javascript - 单击按钮时数字不更新。控制台还给出了“游戏”未定义的错误。任何帮助表示赞赏

问题描述

对 JS 来说很新。我一直在关注一个简单的答题器游戏的教程，但遇到了障碍。控制台给我一个错误，说“未捕获的 ReferenceError：游戏未定义。” 这也导致单击按钮时数字不会增加。我密切关注本教程，似乎无法弄清楚为什么页面给了我这个错误。任何帮助，将不胜感激。

也不知道这是否有帮助，但是当我单击控制台中的错误时，它指向显示“game.addToScore(game.clickValue)”的行。

代码：

<!DOCTYPE html>
<html>
    <head>
        <title>Film Clicker</title>

        <style>
            .sectionLeft {
                float: left;
                width: 80%;
            }

            .sectionRight {
                float: right;
                width: 20%;
                font-family: arial;
            }

            .scoreContainer {
                background-color: rgb(238, 238, 238, 0.6);
                width: 50%;
                padding: 10px;
                border-radius: 10px;
                font-size: 24px;
                font-weight: bold;
            }

            .clickerConatiner button {
                position: relative;
                transform: all .2s ease-in-out;
            }

            .clickerConatiner button:hover {
                transform: scale(1.10);
            }

            .clickerConatiner button:active {
                transform: scale(0.99);
            }

            .shopButton {
                background-color: #b5b5b5;
                transition:  all .2s ease-in-out;
                border-radius: 10px;
                width: 100%;
                margin: 10px 0px 10px 0px;
            }

            .shopButton:hover {
                background-color: #c7c7c7;
                transform: all .2s ease-in-out;
            }

            .shopButton #image {
                width: 25%;
            }

            .shopButton img {
                height: 64px;
                width: 64px;
            }

            .shopButton #nameAndCost p {
                margin: 0px;
                width: 60%;
            }

            .shopButton #nameAndCost p:first-of-type {
                font-size: 24px;
            }

            .shopButton #amount {
                font-size: 40px;
                color: #595959;
                font-family: monospace;
                width: 15%;
            }

            .sectionFooter {
                margin-top: 50%;
            }

            .unselectable {
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
            }
        </style>
    </head>

    <body>
        <div class="sectionLeft">
            <center>
                <div class="scoreContainer unselectable">
                    <span id="score">0</span> films<br>
                    <span id="scorePerSecond">0</span> films per second</p>
                </div>
                <br>
                <div class="clickerConatiner unselectable" >
                    <button onclick="game.addToScore(game.clickValue)">Produce Film</button>
                </div>
            </center>

            <div class="sectionFooter">
                <h5>Film Clicker</h5>
                <button onclick="resetGame();">Reset Game</button>
            </div>
        </div>

        <div class = "sectionRight">
            <table class="shopButton unselectable" onclick="buyCursor()">
                <tr>
                    <td id="image"><img src="cursor.png"></td>
                    <td id="nameAndCost">
                        <p>Cursor</p>
                        <p><span id="cursorCost">15</span> films</p>
                    </td>
                    <td id="amount"><span id="cursors">0</span></td>
                </tr>
            </table>

            <table class="shopButton unselectable" onclick="buyCamera()">
                <tr>
                    <td id="image"><img src="camera.png"></td>
                    <td id="nameAndCost">
                        <p>Camera</p>
                        <p><span id="cameraCost">50</span> films</p>
                    </td>
                    <td id="amount"><span id="cameras">0</span></td>
                </tr>
            </table>

            <table class="shopButton unselectable" onclick="buyLighting()">
                <tr>
                    <td id="image"><img src="lighting.png"></td>
                    <td id="nameAndCost">
                        <p>Lighting</p>
                        <p><span id="lightingCost">100</span> films</p>
                    </td>
                    <td id="amount"><span id="lighting">0</span></td>
                </tr>
            </table>
        </div>

        <script>
            var game = {
                score: 0,
                totalScore: 0,
                totalClicks: 0,
                clickValue: 1,
                version: 0.000,

                addToScore: function(amount){
                    this.score += amount;
                    this.totalScore += amount;
                    display.updateScore();
                }
            };

            var display = {
                updateScore: function() {
                    document.getElementById("score").innerHTML = game.score;
                    document.title = game.score + " films - Film Clicker";
                }
            };

            var building = {
                name: [
                    "Cursor", 
                    "Camera",
                    "Lighting"
                ],
                image: [
                    "cursor.png",
                    "camera.png",
                    "lighting.png"
                ],
                count: [0, 0, 0],
                income: [
                    1,
                    15,
                    155
                ],
                cost: [
                    15,
                    50,
                    100
                ]

                purchse: function(index) {
                    if(game.score >= this.cost[index]) {
                        game.score -= this.cost[index];
                        this.count[index]++;
                        this.cost[index] = Math.ceil(this.cost[index] * 1.10);
                        display.updateScore();
                    }
                }
            };
        </script>
    </body>
</html>

标签： javascripthtml

cost: [ 15, 50, 100 ] purchse: function(index) { if(game.score >= this.cost[index]) {

cost: [ 15, 50, 100 ], purchse: function(index) { if(game.score >= this.cost[index]) {

javascript - 单击按钮时数字不更新。控制台还给出了“游戏”未定义的错误。任何帮助表示赞赏

问题描述

解决方案

推荐阅读