Question

我对JavaScript和编程非常陌生，但我想知道是否有人可以帮助我尝试在我的数学游戏中添加分数计数器。该网站随机生成一个乘法问题，然后检查该问题，然后会显示一条消息，说明他们是否正确提问。我添加了一个计时器，我试图添加一个计分器，但失败了。这是我的HTML：

<!DOCTYPE html>
<html lang="en">

<head>
    <script type="text/javascript" src="assets/stylesheets/script.js"></script>
    <link rel="stylesheet" href="assets/stylesheets/main.css">
    <link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Learning to multiply</title>
</head>

<body onload="genQuestion();">
<h1>Learning to multiply</h1>
<form name="myForm" id="myForm" action="#">
<label>What is...</label>
<input id="question" name="question" type="text" />
<br>
<label>My answer is...</label>
<input name="answer" id="answer" type="text" />
<br>
<input class="button" name="Check my answer..." type="button" value="Check my answer..." onclick="buttonPressed()" />
</form>
    <div class="score-board">
  <div class="player">
      <h4>Your score</h4>
      <div class="score-box">
         0 
      </div>
  </div>
        </div>
</body>
</html>

这是我的js文件：

var x, y;



        function aNumber() {
        return 1 + Math.round(Math.random() * 11);
        }

        function genQuestion(){
            x = aNumber();
            y = aNumber();
            dout = document.getElementById("question");
            dout.value = x + " times " + y;
         }

        function buttonPressed() {
        var mult = document.getElementById("answer").value;



         var posStatements = [
            "Very Good", 
            "Excellent", 
            "Correct - Nice Work!", 
            "Correct - Keep up the good work"];

        var negStatements = [
            "No. Please try again", 
            "Wrong. Try once more", 
            "Incorrect - Don't give up", 
            "No - keep trying"];

         if (mult == x*y) 
            {
                window.alert(posStatements[Math.round(Math.random() * 3)]);
        }
        else 
        {
                window.alert(negStatements[Math.round(Math.random() * 3)]);
        }

        location.reload();
        }

var score=0 
var score = document.getElementById("score-box").value;
function scoreboard() {
    if (mult == x*y)
        {score= score +1}
}

window.onload = function timer() {
var secs = 0;
    var id = setInterval(function timer(){ 
        secs++; console.log(secs);
      if(secs> 9){
        clearInterval(id);
        alert("Time's up!");
       }
    }, 1000);
}

我知道它不起作用，但我不知道如何去做... 谢谢！

Answer 1

您遇到的问题是Web开发中的一个重要问题，即 Web应用程序默认为无状态 。这只是意味着每次加载网页时，它都会加载一组全新的控件和变量。

因此，当你的buttonPressed（）函数调用location.reload（）时，页面及其所有内容（包括脚本变量）将被重新加载，就好像它们之前从未存在过一样。

为了让你想要在游戏中添加得分，你需要在你的应用程序中创建状态，换句话说，你需要跟踪条件（例如得分）在当前最新页面加载之前的游戏。

现在有许多方法可以做到这一点，现代Web应用程序可能不会在轮次之间完全重新加载页面，而只是更新需要更新的同一页面上的位。这当然是一种做法。

另一种适合您布置应用程序的方式，在页面加载时调用genQuestion（），将上一轮的分数传递给下一个下一页加载。这也可以通过多种方式完成，其中最简单的方法是将查询字符串传递给下一页加载，即不仅仅是

的URL

http://...game.html

而是

http://...game.html?score=3

但这只是一个起点。一旦你得到了当前得分（并记住第一页加载它将只是0），那么你需要在正确的位置更新它，如果用户得到正确答案。正如你的代码现在一样，你需要在if语句中检查用户的答案是否正确。

我不会给你一个有效的解决方案，但为了让你继续前进，这里有一些指示：

要将当前分数传递到下一页加载，请不要只执行location.reload（），而是执行window.location.assign（url），其中url是添加了分数的相同url最后为“？score = xx”。请参阅this w3schools article。

要从url读取下一页加载的分数，请使用location.search（）。请参阅this w3schools article。

还有很多其他方法可以解决这个问题，但我相信你会以这种方式作为起点学到很多东西。祝你好运！

Answer 2

1 - 添加标签以显示分数并将ID设置为＆＃34; lblScore＆＃34;

<label id="lblScore">0</label>

2 - 在js文件中声明全局变量（在函数体外）

    var Score=0;

3 - 根据答案添加1或1来得分

if (mult == x*y) 
        {
            Score=Score+1;
    }
    else 
    {
            Score=Score-1;
    }

4 - 您应该将分数设置为js文件中的标签（在第2部分之后），如下所示

var lblScore = Document.getElementbyId('lblScore');
lblScore.innerHTML=Score;

Answer 3

改为使用：

if (mult == x*y) 
{
    Score+=1;
}
else 
{
    Score-=1;
}

使用html和JavaScript为游戏添加分数计数器

3 个答案: