Javascript 游戏存档变量

Question

我的目标是每次单击正确的框时保存我的分数，如果我单击错误的框，分数将重置为 0，并弹出一条警告消息，提示“你输了。”。我的问题是，即使页面刷新，我如何将值保存到 javascript 中的变量？我已经标记了变量首先被声明、更改和保存的重要位置。

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

        .normalTableSize {
            margin-left: auto;
            margin-right: auto;
            margin-bottom: 3%;
        }

        .navigationbarFont {
            font-size: xx-large;
            font-weight: bold;
        }

        .squareBorders {
            border: 2px solid black;
            width: 33%;
            padding:40px;
        }
        .buttons {
            border: 2px solid black;
            width: 100%;
            padding: 40px;
        }


        .score {
            text-align: center;
            font-size: x-large;
        }

    </style>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>J-Game</title>
    </head>
    <body width=100%;>
        <table width=100%;>
            <tr>
                <td>
                    <table width=60% class="normalTableSize" style="background-color: green; margin-top: 1%; border: 3px solid black;">
                        <tr>
                            <td>
                                <div style="width:60%; margin-left: auto; margin-right: auto; padding: 10px 0px 10px 0px;">
                                    <a class="navigationbarFont" href="">Home</a> <a style="margin-left: 5%;" class="navigationbarFont" href="">Games</a>
                                </div>
                            </td>
                        </tr>
                    </table>
                    <table>
**
<!--!!!!!!!!!!!!!!!!!!!!!!!!! VALUE GETS DISPLAYED HERE!!!!!!-->
                        <p id="score" class="score">0</p>
**
                    </table>

                    <!-- Maybe I should implement Buttons instead of table squares-->
                    <table width=60%; class="normalTableSize" style="text-align: center;">
                        <tr>
                            <td>
                                <button onclick="buttonclick(this.id)" id="1" class="buttons">1</button> 
                            </td>
                            <td>
                                <button onclick="buttonclick(this.id)" id="2" class="buttons">2</button>
                            </td>
                            <td>
                                <button onclick="buttonclick(this.id)" id="3" class="buttons">3</button>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <button onclick="buttonclick(this.id)" id="4" class="buttons">4</button>
                            </td>
                            <td>
                                <button onclick="buttonclick(this.id)" id="5" class="buttons">5</button>
                            </td>
                            <td>
                                <button onclick="buttonclick(this.id)" id="6" class="buttons">6</button>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <button onclick="buttonclick(this.id)" id="7" class="buttons">7</button>
                            </td>
                            <td>
                                <button onclick="buttonclick(this.id)" id="8" class="buttons">8</button>
                            </td>
                            <td>
                                <button onclick="buttonclick(this.id)" id="9" class="buttons">9</button>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
        <!-- <button onclick="hi">Click me!</button> -->
        <button onclick="stopAlerting()">Stop alerting!</button>
        <script>

    // Declaring variables
**
    //!!!!!!!!!!!!! TRIED TO USE "sesssionStorage", but couldnt figure out a way to use it well.
        sessionStorage.setItem('scoreamount', 0);
        let score = 0;
    //!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
**
        let gameover = false;
        let rawRandNumber = randomNumber();
        let randomID = notZeroDetector();


    // Main Codeblock for the game

        if(gameover === false) {
**
    //!!!!!!!!! VALUE GETS DISPLAYED ON THE PAGE AS "SCORE" !!!!!!!!!!!!!!!!!!!!!!!
            document.getElementById('score').innerHTML = sessionStorage.scoreamount;
**
            squareGetsRed(randomID);
        } else {    
            console.log("U lost")
        }

    // Click button reaction

        function buttonclick(buttonid){ 
            if(buttonid == randomID){
**
    //!!!!!!!!! BUG (Value isnt saving after page reload) !!!!!!!!!!!!!!!!!!!!!!!
                score++;
                sessionStorage.scoreamount = score;
    //!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
**
                location.reload();
            } else {
                gameover = true;
                alert("Wrong Button");
                location.reload();
            }

        }

    // Random Number function    
        function randomNumber(){
            return Math.floor(Math.random() * 10);
        }

    // Return 1 if rawRandNumber = 0 
        function notZeroDetector() {
            if(rawRandNumber === 0){
                return 1;  
            } else {
                return rawRandNumber;
            };
        }

    // Makes Squares red
        function squareGetsRed(number) {
            document.getElementById(number).style["background-color"] = "red";
        }

        function stopAlerting(){
            clearInterval(hi);
        }

        </script>
    </body>
</html>

Answer 1

您可以在 JS 中使用 localStorage :

localStorage.setItem('yourScore', '123'); // Set the value
var score = localStorage.getItem('yourScore'); // retrieve the value from localStore

查看： https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

您可以测试商店中是否保存了以前的分数

if (localStorage.getItem('yourScore') === null) {
    // if the key yourScore is null, there's no score registered
}

Answer 2

您需要 let scoreamount = +sessionStorage.getItem('scoreamount');，它将您的脚本变量设置为存储值或将其设置为 0

改变

  sessionStorage.setItem('scoreamount', 0);
  let score = 0;

至

let scoreamount = +sessionStorage.getItem('scoreamount');

然后改为

 document.getElementById('score').innerHTML = scoreamount;

并改变

 score++;
 sessionStorage.scoreamount = score;

至

 scoreamount++;
 sessionStorage.scoreamount = scoreamount;

Javascript 游戏存档变量

Javascript game save variable

html

variables

session-storage