javascript - 在匹配游戏javascript中添加分数

标签 javascript css function matching

我对 java script 很陌生,所以请耐心等待我:) 所以我正在用 java 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: "A"
  },
  {
    text: " What animal is this one?", 
    img: "AnimalPrints/2.jpg", 
    answers: ["Elephant", "Giraffe", "Snake"], 
    ans: "B"
  },
  {
    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();
}
body {
    background-position: center;
    background-color:lime;
}

#questionText {width: 350px; background: white;}


#nextbutton {
    background-image: url(Buttons/nextbutton.jpg);
    background-size:contain;
    background-repeat:repeat-y;
    background-position: center;
    width:100px;
    height:44px;
    margin-left: 250px;
    border-radius:10px;
}


#main {
  margin-top:200px;
  margin-left:250px;
  border:1px solid red;
  width:600px;

}

#display {
    width:150px;
    height:50px;
    background-color:blue;
    color:white;
    border-radius:5px;
    font-family:aqua;
}
<div id = main>
  <div id = "questionText"> Testing</div>
  <div id ="animal">
    <img id = "animalPrint" src = "AnimalPrints/1.jpg">
  </div>

  <div id = "alloptions"> </div>

  <button id = "nextbutton" onclick = "nextQ();"></button>
</div>
<div id = "display">    Score:  </div>

最佳答案

根据您单击的按钮,将答案的(数字,基于 0 的)索引传递给函数 select。您将其与 ans 属性进行比较,对于第一个问题,该属性的值为 'A''B'

显然,0 不等于“A”。

因此将 ans 更改为 0 到 N 的值,指定正确答案的索引,它起作用了。

关于javascript - 在匹配游戏javascript中添加分数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30223072/

相关文章:

javascript - 检查 2 个输入和启用按钮的变化

javascript - Typescript 中的 Json 形成(Angular 7)

html - 带有图像的响应式 4 到 2 列网站

c++ - 将函数对象传递给 std::function

javascript - 如何访问另一个文件中函数的状态

javascript - 防止或处理同一部分中子标签和父标签的点击事件

jquery - 复选框详细 View

javascript - 更改图像和标题

r - 更改 R 中数据框列表中的列值

javascript - 如何拼接多个字符串