Question

我正在开发一款记忆游戏，我需要根据以下内容计算游戏的公平得分：

尝试次数，时间和比赛次数

因此，我尝试使用函数来计算分数，但是当我尝试在获胜屏幕中显示分数时，分数不会出现。

变量是

var matches = 0;
var moves = 0;
var counter = document.querySelector(".moves");

要检查匹配项：

for (i = 0; i < buttons.length; i++) {
buttons[i].addEventListener('click', function (e) {
var turnable = e.target.dataset.turnable;


//first click
if (!wait && lastKnownButtonId == undefined && lastKnownButtonNumber == undefined && turnable == 'true') {
  e.target.dataset.turnable = 'false';

  e.target.innerHTML = getgImage(event.target.dataset.number);
  e.target.style.backgroundColor = 'yellow';

  lastKnownButtonId = e.target.id;
  lastKnownButtonNumber = e.target.dataset.number;

}
//second click
else if (!wait && lastKnownButtonId != undefined && lastKnownButtonNumber != undefined && turnable == 'true' && e.target.id != lastKnownButtonId) {
  e.target.dataset.turnable = 'false';

  e.target.innerHTML = getgImage(event.target.dataset.number);




  //match
  if (e.target.dataset.number == lastKnownButtonNumber) {
    e.target.style.backgroundColor = '#00FF7F';
    document.getElementById(lastKnownButtonId).style.backgroundColor = '#00FF7F';

    lastKnownButtonId = undefined;
    lastKnownButtonNumber = undefined;

    matches++;


    if (matches == 8) {

      document.getElementById("finalMove").innerHTML = moves;

    showWinScreen();
    //clearTimeout(timeoutHandle);


    }

  }

  //no match
  else {
    document.getElementById(lastKnownButtonId).style.backgroundColor = 'red';
    e.target.style.backgroundColor = 'red';
    wait = true;

    setTimeout(() => {
      e.target.dataset.turnable = 'true';
      e.target.style.backgroundColor = 'white'
      e.target.innerHTML = getgImage(0);


      var tempLastClickedButton = document.getElementById(lastKnownButtonId);

      tempLastClickedButton.dataset.turnable = 'true';
      tempLastClickedButton.style.backgroundColor = 'white';
      tempLastClickedButton.innerHTML = getgImage(0);

      lastKnownButtonId = undefined;
      lastKnownButtonNumber = undefined;
      wait = false;
    }, 1000);


  }
  moveCounter();
}
}); 
}

我插入了一个计算分数的函数

 function calcScore(){
 var tilesbonus = (16 - matches) * 20; // 20 points for each successful tile
var timebonus = (60 - finaltime) * 8;  // 8 points for each second
var triesbonus = (48 - moves) * 10;  // (deduct) 10 points for each try
if (tilesbonus <0) { tilesbonus = 0; }
if (timebonus <0) { timebonus = 0; }
if (triesbonus <0) { triesbonus = 0; }
var totalscore= tilesbonus + timebonus + triesbonus;
return totalscore;
}

计时器功能：

window.onload = function() {
var timeoutHandle;
function countdown(minutes, seconds) {
function tick() {
var timecounter = document.getElementById("timer");
timecounter.innerHTML = minutes.toString() + ":" + (seconds < 10 ? "0" : "") + String(seconds);
seconds--;
if (seconds >= 0) {
timeoutHandle = setTimeout(tick, 1000);
} else {
if (minutes >= 1) {
setTimeout(function () {
countdown(minutes - 1, 59);
}, 1000);
}
}
if (seconds==0 && minutes ==0){

alert("Game over");
//reset();
}
if (matches==8){
var totalscore = calcScore();
clearTimeout(timeoutHandle);
var finaltime= timecounter.innerHTML;
document.getElementById("seconds").innerHTML= finaltime;
document.getElementById("score").innerHTML=totalscore;

}
}
tick();
}

countdown(1, 00); }

移动计数器：

function moveCounter(){
moves++;
counter.innerHTML = moves;
}

游戏结束时调用calscore（）函数

 if (matches==8){
 calcScore();
 clearTimeout(timeoutHandle);
 var finaltime= timecounter.innerHTML;
 document.getElementById("seconds").innerHTML= finaltime;
 document.getElementById("score").innerHTML=totalscore;
 document.getElementById("finalMove").innerHTML = moves;
 }

应该显示分数的html代码是：

  <p><font size= "5">Your score: <span id=score> </span></font></p>

Answer 1

这是因为您尝试使用从全局范围的功能中定义的变量

这是javascript scopes

的解释

基本上，如果在函数内部声明变量，则不能在函数外部使用它

更正并评论了有关此特定问题的代码

var matches = 8
var finaltime = 42
var moves = 13

function calcScore(){
  var tilesbonus = (16 - matches) * 20; // 20 points for each successful tile
  var timebonus = (60 - finaltime) * 8;  // 8 points for each second
  var triesbonus = (48 - moves) * 10;  // (deduct) 10 points for each try
  if (tilesbonus <0) { tilesbonus = 0; }
  if (timebonus <0) { timebonus = 0; }
  if (triesbonus <0) { triesbonus = 0; }
  var totalscore= tilesbonus + timebonus + triesbonus; // you defined the variable here
  return totalscore;
} // totalscore is destroyed after the end of the function

if (matches==8){
  var totalscore = calcScore(); // I modified this line and now it works
  // I declare a new variable which contains the value returned by calcScore

  clearTimeout(null); // i don't have the timeout var so I can't clear it
  var finaltime= timecounter.innerHTML;
  document.getElementById("seconds").innerHTML= finaltime;
  document.getElementById("score").innerHTML=totalscore; // finally use the variable
}

<p><font size= "5">Your score: <span id=score> </span></font></p>
<p><font size= "5">finalTime: <span id=seconds> </span></font></p>
  
<span id=timecounter>42</span>

根据回合次数，时间和比赛次数计算记忆游戏的得分

1 个答案: