我正在开发一个简单的HTML游戏,每个页面都有一个问题。我如何保持分数,以便如果该人得到正确的答案,则分数增加,然后当游戏结束或在游戏中选择了错误的答案时,游戏在页面上显示分数。我有什么选择,有没有可能的方法在一个页面而不是几个页面中实现所有这些?
答案 0 :(得分:1)
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
。易于学习,文档很棒。这也可以帮助你使事情变得简单和互动
答案 1 :(得分:0)
如果您有多个有问题的网页,则需要不断将分数从一个html页面传递到另一个html页面。如果你想这样做,这里有post教你。另一个选项是将所有问题保存在一个页面上,并在每次回答上一个问题时使用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>
另外,访问this网站并粘贴代码,看看它是如何运作的。