JavaScript函数-输入类型的图像数组和答案数组[关闭]

Question

当用户输入正确答案时，我需要使用随机图像数组及其答案制作问题游戏。

   <! DOCTYPE html>
  <html>
  <title>
    Guess the CharToon 
</title>
<head>
        <LINK rel="stylesheet" type="text/css" href="F:\ANGELA\MM1\CHARTOON\CSS\samp.css">      
    <div id="timer" style="padding: 1%;background-color: white;border-radius: 1%;color: black;font-size: 30;font-family: aero; position: absolute;top: 75%;left: 85%;"></div>




</head>
<body>

   <h1>From what movie this<br>&nbsp; place can be found?</h1>        
   <p id="count"></p>  
   <form>

    <img id="pic" class="jpg" src="Nigel Uno.png">

  <input type="text" id="anss" class="type1" value="" ></input>
<button class="type2" value="submit" onclick="sub()">Submit</button>
</form>
     <a class="back2" href="F:\ANGELA\MM1\CHARTOON\HTML\HARD3.html"><img src="F:\ANGELA\MM1\CHARTOON\IMAGES\MENU\back.png" width="150" height="150"></a>

   </body>
    <audio src="F:\ANGELA\MM1\CHARTOON\SOUNDS\Main.mp4" autoplay loop hidden>     </audio>
   </html>

这是我的脚本：

        <script>
     var Imagearray = [];
     Imagearray[0] = "Nigel Uno.png";
    Imagearray[1] = "perry.jpg";
     Imagearray[2] = "BOOTS.jpg";
     Imagearray[3] = "SPONGEBOB.jpg";


var a= Math.floor(Math.random()* Imagearray.length);


var anw = [];
anw[0] = "nigel"; 
anw[1] = "perry"; 
anw[2] = "boots";
anw[3] = "sponge";  

var scor = 2;
  function sub()
{
var correct = 0; 
if (a == 0)
 {

var ans = document.getElementById('anss').value;
if (ans == anw[a] )
{

    a= Math.floor(Math.random() * Imagearray.length);
    document.getElementById("pic").src = Imagearray[a];
    document.getElementById("anss").value = "";
    document.getElementById("count").innerHTML= scor + "  " +"/5";
    correct == 1;
    scor++;

}
else
{
    if (correct == 0 )
    {
        hideass++;
     document.getElementById("anss").value = null;

    }
    if (ans == ""){
        hideass = 0;
    }


   }




   }

if (a == 1)
{

var ans = document.getElementById('anss').value;
if (ans == anw[a])
{

    a= Math.floor(Math.random() * Imagearray.length);
    document.getElementById("pic").src = Imagearray[a];
    document.getElementById("anss").value = "";
    document.getElementById("count").innerHTML= scor + "  " +"/5";
    correct = 1;
    scor++;


}
else
{
    if (correct == 0  )
    {
        hideass++;
        document.getElementById("anss").value = null;   
    }
    if (ans == ""){
        hideass = 0;
    }
    }



  }
if (a == 2)
{

var ans = document.getElementById('anss').value;
if (ans == anw[a])
{

    a= Math.floor(Math.random() * Imagearray.length);
    document.getElementById("pic").src = Imagearray[a];
    document.getElementById("anss").value = "";
    document.getElementById("count").innerHTML= scor + "  " +"/5";
    correct = 1;
    scor++;


}
else
{
    if (correct == 0 )
    {
        hideass++;
        document.getElementById("anss").value = null;   
    }
     if (ans == ""){
        hideass = 0;
    }
}


     }

     if (a == 3)
 {

var ans = document.getElementById('anss').value;
if (ans == anw[a])
{

    a= Math.floor(Math.random() * Imagearray.length);
    document.getElementById("pic").src = Imagearray[a];
    document.getElementById("anss").value = "";
    document.getElementById("count").innerHTML= scor + "  " +"/5";
    correct = 1;
    scor++;


}
else
{
    if (correct == 0 )
    {
        hideass++;
        document.getElementById("anss").value = null;

    }
    if (ans == ""){
        hideass = 0;
    }
    }



  }

  if (Imagearray.length == 3)
 {
window.location.innerHTML = ClearEasy();
}


}

  window.onload = function timerx(){
  var sec = 30;
  setInterval(function(){
 if (pause == 0)
 {
  document.getElementById("timer").innerHTML = sec + " " + "Seconds" ;
 sec--;
 }
  if (sec < 0) {    
        sec = 0;
        window.location.assign("Times_up_Easy1.html");
   sec = 30;
  }
   },1000);
   }

 </script>

我尝试了很多方法，但我仍然不知道。游戏的主要目标是图像与输入框一起显示，用户需要正确回答并添加分数并转到另一个随机图像。因此，当用户输入正确答案时，我需要使用随机图像数组和该图像的答案数组，分数加 1。

Answer 1

由于您还没有真正说出您的具体问题是什么（您应该有，如 https://stackoverflow.com/help 中所述），我将尝试在不实际解决问题的情况下提供一些帮助。

您的代码存在许多问题，包括（但可能不限于）

• 为每个答案提交一个表单 - 这重新加载页面和 删除您拥有的任何状态/进度信息。
• 大量冗余/重复代码。
• 与更长的名称相比，现在可以为您节省更少的输入时间的变量名称 将来您（或其他人）查看代码时会节省您的时间。
• 将相关信息分成 2 个数组 - 不阅读代码，它不是 立即清楚（虽然 可以 猜到）它们是相关的。
• 似乎依赖于不存在的变量 (pause) 的计时器处理程序

还有一点需要考虑，即暂停游戏的方法 - 通过将变量设置为 true 或 false。然而，这是非常好的和功能性的 - 它的缺点是让计时器保持运行，每秒尽职尽责地触发一次。它还要求您在每次调用处理程序时检查标志的状态。如果您保留SetInterval 的结果，您可以在对ClearInterval 的调用中使用它 - 这将停止计时器，暂停游戏并减少能源使用。当然，如果您决定采用这种方法，您将不得不添加额外的代码来使用计时器进行跟踪。

这里有一些代码旨在解决上述项目符号列表中的每个问题（我不费心添加和实现暂停功能）：

var currentAnswerIndex;
var currentScore=0;

var answerObjs =
[
	{ answer: "nigel", file: "Nigel Uno.png"},
	{ answer: "perry", file: "perry.jpg"},
	{ answer: "boots", file: "boots.jpg"},
	{ answer: "sponge", file: "spongebob.jpg"}
];

function byId(id){return document.getElementById(id);}

window.addEventListener('load', onDocLoaded, false);

function onDocLoaded(evt)
{
	randomizeQuestion();
	//initTimer(10);
}

function initTimer(secondsBeforeTimeout)
{
	var secondsRemaining = secondsBeforeTimeout;
	const msPerSecond = 1000;
	var timerId = setInterval(intervalHandler, 1*msPerSecond);

	function intervalHandler()
	{
		if (gameIsPaused == false)
		{
			document.getElementById("timer").innerHTML = secondsRemaining + " " + "Seconds" ;
			secondsRemaining--;
		}
		if (secondsRemaining < 0) 
		{    
			window.location.assign("Times_up_Easy1.html");
		}
	}
}

function randomizeQuestion()
{
	currentAnswerIndex = Math.floor( Math.random() * answerObjs.length );
	byId('questionPic').src = answerObjs[currentAnswerIndex].file;
	// for debugging purposes
	console.log( "Current answer is: " + answerObjs[currentAnswerIndex].answer );
}

function checkAnswer()
{
	var usersAnswer = byId('questionAnswer').value;
	if (answerObjs[currentAnswerIndex].answer == usersAnswer)
	{
		currentScore++;
		byId('currentScore').textContent = currentScore;
		randomizeQuestion();
	}
	else
	{
	}
	byId('questionAnswer').value = '';
}

<h1>Which movie contains this location?</h1>
<img id='questionPic'/><br>
<input type='text' id='questionAnswer'/>
<button id='checkAnsBtn' onclick='checkAnswer();'>Check Answer</button>(<span id='currentScore'>0</span>/5)