在HTML游戏中保持分数



我正在开发一个简单的HTML游戏,每个页面都有一个问题。我如何保持分数,以便如果该人得到了正确的答案,分数会增加,然后当游戏结束或在游戏中选择了错误的答案时,游戏结束页面会显示分数。我有什么选择?有没有任何可能的方法可以在一个页面而不是几个页面中实现所有这些?

var score = "10";
localStorage.setItem("score", score);

在任何页面中(如页面加载时),获取如下信息:

var score = localStorage.getItem("score");

了解更多信息:https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API#localStorage

不管怎样,你为什么不使用PHP。你不必为每个问题创建那么多单独的页面

如果你因为某种原因不能,那就选择jquery。易于学习,文档很棒。这也可以帮助你让事情变得简单和交互式

如果你有多个有问题的网页,你需要不断地将分数从一个html页面传递到另一个页面。如果你想这样做,这里有一个帖子会教你这一点。另一种选择是将所有问题保留在一个页面上,并在每次回答之前的问题时使用JavaScript显示一个新问题。以下是完整的代码示例:

   <html>
<head>
<title>Ten Questions</title>
<script type="text/javascript">
    var score = 0;
    var questions = 10;
    function start() {
        if (questions == 10) {
            document.getElementById("question").innerHTML = "What car brand out of the following options is German?";
            document.getElementById("option1").innerHTML = "Mercedes Benz";
            document.getElementById("option2").innerHTML = "Toyota";
            document.getElementById("option3").innerHTML = "Skoda";
        }
        else if (questions == 9) {
            document.getElementById("question").innerHTML = "What is the biggest country in the world?";
            document.getElementById("option1").innerHTML = "Fiji";
            document.getElementById("option2").innerHTML = "United States of America";
            document.getElementById("option3").innerHTML = "Russia";
        }
        else if (questions == 8) {
            document.getElementById("question").innerHTML = "What is the biggest river in the world?";
            document.getElementById("option1").innerHTML = "Amazon River";
            document.getElementById("option2").innerHTML = "Nile River";
            document.getElementById("option3").innerHTML = "Hudson River";
        }
        else if (questions == 7) {
            document.getElementById("question").innerHTML = "What does HP stand for?";
            document.getElementById("option1").innerHTML = "Hewlett Packard";
            document.getElementById("option2").innerHTML = "Howard Powell";
            document.getElementById("option3").innerHTML = "Honda Panda";
        }
        else if (questions == 6) {
            document.getElementById("question").innerHTML = "What does PM stand for?";
            document.getElementById("option1").innerHTML = "Post Meridien";
            document.getElementById("option2").innerHTML = "Post Man";
            document.getElementById("option3").innerHTML = "P M";
        }
        else if (questions == 5) {
            document.getElementById("question").innerHTML = "Who created Facebook?";
            document.getElementById("option1").innerHTML = "Bill Gates";
            document.getElementById("option2").innerHTML = "Mark Zuckerburg";
            document.getElementById("option3").innerHTML = "Steve Wozniak";
        }
        else if (questions == 4) {
            document.getElementById("question").innerHTML = "What is a banana made of?";
            document.getElementById("option1").innerHTML = "A banana";
            document.getElementById("option2").innerHTML = "Small hair-like strands";
            document.getElementById("option3").innerHTML = "Steve Wozniak";
        }
        else if (questions == 3) {
            document.getElementById("question").innerHTML = "What does LCD stand for?";
            document.getElementById("option1").innerHTML = "Light crystal display";
            document.getElementById("option2").innerHTML = "Large crystal display";
            document.getElementById("option3").innerHTML = "Liquid crystal display";
        }
        else if (questions == 2) {
            document.getElementById("question").innerHTML = "How many wheels does a car have?";
            document.getElementById("option1").innerHTML = "12";
            document.getElementById("option2").innerHTML = "6";
            document.getElementById("option3").innerHTML = "4";
        }
        else if (questions == 1) {
            document.getElementById("question").innerHTML = "Who is Microsoft's new CEO?";
            document.getElementById("option1").innerHTML = "Satcha Nadella";
            document.getElementById("option2").innerHTML = "Bill Gates";
            document.getElementById("option3").innerHTML = "Mark Zuckerburg";
        }
        else if (questions == 0) {
            document.getElementById("question").innerHTML = "";
            document.getElementById("option1").innerHTML = "";
            document.getElementById("option2").innerHTML = "";
            document.getElementById("option3").innerHTML = "";
            document.getElementById("score").innerHTML = "Your score was: " + score;
        }
    }
    function answer(question) {
        if (questions == 10) {
            if (question == 1) {
                score++; 
                questions--;
                start();
            }
            else if (question == 2) {
                score = score;
                questions--;
                start();
            }
            else if (question == 3) {
                score = score;
                questions--;
                start();
            }
        }
        else if (questions == 9) {
            if (question == 1) {
                score = score;
                questions--;
                start();
            }
            else if (question == 2) {
                score = score;
                questions--;
                start();
            }
            else if (question == 3) {
                score++;
                questions--;
                start();
            }
        }
        else if (questions == 8) {
            if (question == 1) {
                score = score;
                questions--;
                start();
            }
            else if (question == 2) {
                score++;
                questions--;
                start();
            }
            else if (question == 3) {
                score = score;
                questions--;
                start();
            }
        }
        else if (questions == 7) {
            if (question == 1) {
                score++;
                questions--;
                start();
            }
            else if (question == 2) {
                score = score;
                questions--;
                start();
            }
            else if (question == 3) {
                score = score;
                questions--;
                start();
            }
        }
        else if (questions == 6) {
            if (question == 1) {
                score++;
                questions--;
                start();
            }
            else if (question == 2) {
                score = score;
                questions--;
                start();
            }
            else if (question == 3) {
                score = score;
                questions--;
                start();
            }
        }
        else if (questions == 5) {
            if (question == 1) {
                score = score;
                questions--;
                start();
            }
            else if (question == 2) {
                score++;
                questions--;
                start();
            }
            else if (question == 3) {
                score = score;
                questions--;
                start();
            }
        }
        else if (questions == 4) {
            if (question == 1) {
                score = score;
                questions--;
                start();
            }
            else if (question == 2) {
                score++;
                questions--;
                start();
            }
            else if (question == 3) {
                score = score;
                questions--;
                start();
            }
        }
        else if (questions == 3) {
            if (question == 1) {
                score = score;
                questions--;
                start();
            }
            else if (question == 2) {
                score = score;
                questions--;
                start();
            }
            else if (question == 3) {
                score++;
                questions--;
                start();
            }
        }
        else if (questions == 2) {
            if (question == 1) {
                score = score;
                questions--;
                start();
            }
            else if (question == 2) {
                score = score;
                questions--;
                start();
            }
            else if (question == 3) {
                score++;
                questions--;
                start();
            }
        }
        else if (questions == 1) {
            if (question == 1) {
                score++;
                questions--;
                start();
            }
            else if (question == 2) {
                score = score;
                questions--;
                start();
            }
            else if (question == 3) {
                score = score;
                questions--;
                start();
            }
        }
    }
</script>
</head>
 <body onload="javascript:start()">
 <div>
<span id="question">
The question will be changed dynamically so the text here doesn't matter
    </span><br />
    <button onclick="javascript:answer(1)" id="option1">Random Answer 1</button><br />
    <button onclick="javascript:answer(2)" id="option2">Random Answer 2</button><br />
    <button onclick="javascript:answer(3)" id="option3">Random Answer   3</button><br />
<font face="Tahoma" color="red"><span id="score"></span></font>
</div>
</body>
</html>

另外,访问这个网站并粘贴代码,看看它是如何工作的。

最新更新