在javascript中創建遊戲 - 分配正確答案

我正在製作一個非常簡單的遊戲，您必須選擇正確的動物以匹配顯示的動物圖片。在javascript中創建遊戲 - 分配正確答案

我需要爲正確的動物分配正確的打印，以便正確添加分數。不確定如何去做這件事，並會感謝任何幫助。

這是代碼。

<html> 
<head> 
    <script> 
     function randSort (a,b) {return Math.random() - 0.5} 

     var questions = [ 
      {text: " What animal is this?", img: "AnimalPrints/1.jpg", answers: ["Cheetah", "Tiger", "Ladybird"], ans: }, 
      {text: " What animal is this one?", img: "AnimalPrints/2.jpg", answers: ["Elephant", "Giraffe", "Snake"], ans: "Giraffe"}, 
      {text: "What animal is this one please?", img: "AnimalPrints/3.jpg", answers: ["Bumblebee", "Tiger", "Lady bird"], ans: "Bumblebee"} 
     ]; 

     var correctCount = 0; 
     var currentQ = 0; 

     function select(nr) { 
      if (nr == questions[currentQ].ans) 
      { 
       correctCount++; 
       document.getElementById('display').innerHTML= "You win" 
      } 
      else 
      { 
       document.getElementById('display').innerHTML= "You lose" 
      } 
      document.getElementById('display').innerHTML += "<p>Score: "+ correctCount; 

      // if its the last one 
      nextQ(); 
     } 

     function showQ() { 
      document.getElementById('questionText').innerHTML = questions[currentQ].text; 

      document.getElementById('animalPrint').src = questions[currentQ].img; 

      newhtml = ""; 
      for (var i = 0; i< questions[currentQ].answers.length; i++) 
      { 
       newhtml+= "<button onclick = 'select(" + i + ")'>"+ questions[currentQ].answers[i] + "</button>"; 
      } 
      document.getElementById('alloptions').innerHTML = newhtml; 
     } 

     function nextQ(){ 
      if (currentQ < questions.length-1) 
      { 
       currentQ++; 
       showQ(); 
      } 
     } 

     window.onload =init; 

     function init() 
     { 
      correctCount = 0; 
      questions.sort(randSort); 
      currentQ = 0; 
      showQ(); 

     } 

    </script> 
    <title> Game_page</title> 

    <link rel="stylesheet" type="text/css" href="gamepage_css.css"> 
    <script type="text/javascript"> 
     /* 
         document.write("<img src = \ "" + Math.floor 1 + Math.random() * 10) + 
         ".jpg\" />"); 

         document.write("<img src = \"" + Math.floor 1 + Math.random() *) 
     */ 
    </script> 
</head> 

<body> 
    <div id=main> 
     <button id="nextbutton" onclick="nextQ();"></button></a> 
     <div id="questionText"> Testing</div> 
     <div id="animal"> 
      <img id="animalPrint" src="AnimalPrints/1.jpg"> 
     </div> 
     <div id="alloptions"> 
     </div> 
    </div> 
    <div id="display">Output</div> 
</body> 
</html>

來源

2015-05-08 MysteryX

不知道你在問什麼。你可以簡化你的問題只包括相關的代碼位？ – Tom

對不起，我說得很厲害......我需要電腦將正確的打印機連接到正確的動物圖像上，以便正確記分。例如，當獵豹打印出現時，點擊「獵豹」，並添加一個點。目前，它不識別正確的awnser。 – MysteryX

繼承人我使用的代碼部分.. function randSort（a，b）{return Math.random（） - 0.5} var questions = [ {text ：「這是什麼動物？」，img：「AnimalPrints/1.jpg」，答案：[「獵豹」，「老虎」，「瓢蟲」]，回覆： {text：「這是什麼動物？「，img：」AnimalPrints/2.jpg「，答案：[」Elephant「，」Giraffe「，」Snake「]，ans：」長頸鹿「}， {text：」這是什麼動物？「，img ：「AnimalPrints/3.jpg」，答案：[「大黃蜂」，「老虎」，「瓢蟲」]，ans：「大黃蜂」} ]; var correctCount = 0; var currentQ = 0; – MysteryX

這個腳本還有更多的問題，但希望這些小的更新幫助。添加了一些調整顯示&選擇功能

function select(e) { 
     if (e.target.textContent == questions[currentQ].ans) 
     { 
      correctCount++; 
      document.getElementById('display').innerHTML= "You win" 
     } 
     else 
     { 
      document.getElementById('display').innerHTML= "You lose" 
     } 
     document.getElementById('display').innerHTML += "<p>Score: "+ correctCount; 

     // if its the last one 
     nextQ(); 
    } 

    function showQ() { 
     document.getElementById('questionText').innerHTML = questions[currentQ].text; 

     document.getElementById('animalPrint').src = questions[currentQ].img; 

     newhtml = ""; 
     for (var i = 0; i< questions[currentQ].answers.length; i++) 
     { 
      newhtml+= "<button>"+ questions[currentQ].answers[i] + "</button>"; 
     } 
     document.getElementById('alloptions').innerHTML = newhtml; 
     document.getElementById('alloptions').addEventListener('click', select) 
    }

來源

2015-05-08 17:14:59 vizidev

我將此添加到我的腳本中，並保持不變。對不起，我對此很新 – MysteryX

在javascript中創建遊戲 - 分配正確答案

回答

相關問題