Question

我正在使用JavaScript创建一个匹配的游戏（将正确的动物名称与动物图片匹配），我最后一点卡住了......

我希望得分，您可以看到随着时间的推移加起来，以显示在不同的网页上。我将如何做到这一点，因为当我从html页面中删除'score'div时，它都会破坏。

非常感谢任何帮助。

继承代码..

<html>



<head>
<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: "0"},

{text: " What animal is this one?", img: "AnimalPrints/2.jpg", answers: ["Elephant", "Giraffe", "Snake"], ans: "1"},

{text: "What animal is this one please?", img: "AnimalPrints/3.jpg", answers: ["Bumblebee", "Tiger", "Lady bird"], ans: "2"},


{text: "What animal is this one please?", img: "AnimalPrints/4.jpg", answers: ["Tiger", "Parrot", "Snake"], ans: "1"},

{text: "What animal is this one please?", img: "AnimalPrints/5.jpg", answers: ["Bumblebee", "Tiger", "Lady bird"], ans: "2"},

{text: "What animal is this one please?", img: "AnimalPrints/6.jpg", answers: ["Peacock", "Cow", "Zebra"], ans: "2"},

{text: "What animal is this one please?", img: "AnimalPrints/7.jpg", answers: ["Snake", "Ladybird", "Pig"], ans: "0"},

{text: "What animal is this one please?", img: "AnimalPrints/8.jpg", answers: ["Cat", "Bat", "Peacock"], ans: "2"},

{text: "What animal is this one please?", img: "AnimalPrints/9.jpg", answers: ["Cow", "Horse", "Parrot"], ans: "2"},

{text: "What animal is this one please?", img: "AnimalPrints/10.jpg", answers: ["Bumblebee", "Tiger", "Lady bird"], ans: "0"}

];

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();

}



</script>
<title> Game_page</title>


<link rel="stylesheet" type="text/css" href ="gamepage_css.css">


                 <script type = "text/javascript">
/*
                document.write("<img src = \ "" + Math.floor 1 + Math.random() * 10) +
                ".jpg\" />");



                document.write("<img src = \"" + Math.floor 1 + Math.random() * )
*/              

                </script>


</head>



<body>

<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></a>


        </div>



<div id = "display">    Score:  </div>

</body>









</html>

CSS

body {



    background-position: center;
    background-color:lime;


}

#questionText {
    width: 300px; 
    background: white;
    font-family:verdana;
    border-radius: 5px;
    margin-left:150px;
}


#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;

}

#animalPrint{

    margin-left:230px;
    margin-top: 40px;
}

#display {
    width:150px;
    height:50px;
    background-color:blue;
    color:white;
    border-radius:5px;
    font-family:aqua;
}

#alloptions {
    margin-left:180px;
    padding:30px;
}

Answer 1

如果要将变量传递到另一个网页，则需要一台服务器。

该服务器可以在任何技术（node，php，...）中传递变量，你可以使用POST请求，AJAX，websocket ...

Answer 2

您的游戏代码和CSS与问题无关，将来请尝试将相关代码段粘贴到您的问题中。

最简单的解决方案是将分数存储在本地存储中 - 这将允许在页面刷新或重定向到其他页面时读取，假设新页面具有相同的域，即。＆＃34; http：//＆＃34;之间的网址部分和第一个＆＃34; /＆＃34;。

当新游戏开始时

localStorage["score"] = 0

当你增加分数时将其解析为整数（因为它只保留字符串）并添加到它：

localStorage["score"] = parseInt(localStorage["score"],10) + 50

当您重定向到从中读取的乐谱页面时：

document.getElementById('scoreDiv').innerHTML = "Your score is "+localStorage["score"] + " points!";

JavaScript游戏 - 在单独的页面上得分

2 个答案: