JavaScript 函数 - 图像数组和带有输入类型的答案数组

关闭。这个问题需要多问focused 。目前不接受答案。

想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post .

已关闭 6 年前。

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

   <! 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。

最佳答案

由于您还没有真正说出您的具体问题是什么(您应该有，如 https://stackoverflow.com/help 中提到的)，因此我将尝试提供一些帮助，但不会真正解决问题。

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

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

还需要考虑的是暂停游戏的方法 - 通过将变量设置为 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)

关于JavaScript 函数 - 图像数组和带有输入类型的答案数组，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39877770/

JavaScript 函数 - 图像数组和带有输入类型的答案数组

上一篇：javascript - CORS 请求重定向失败

下一篇：javascript - jQuery $(window).scrollTop(); 有一些奇怪的行为在手机上