JS点击游戏点击按钮数字不更新且控制台报game未定义错误求助

问题根因 #

你遇到的Uncaught ReferenceError: game is not defined错误核心是script块内存在语法错误，导致整段JS代码完全没有执行，game变量自然没有被声明，具体错误点如下：

1. building对象的cost数组定义结束后，和下方的purchse方法之间缺少逗号分隔，这是直接导致语法解析失败的核心原因
2. 额外的错误点：
   • purchse方法名拼写错误，正确应为purchase
   • HTML结构中<span id="scorePerSecond">0</span> films per second</p>存在多余的</p>闭合标签，没有对应开始标签
   • 绑定的buyCursor()、buyCamera()、buyLighting()、resetGame()四个函数均未定义，后续点击对应按钮还会触发新报错

修复后的完整代码 #

<!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;
                transition: 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;
                cursor: pointer;
            }

            .shopButton:hover {
                background-color: #c7c7c7;
            }

            .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
                </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" alt="Cursor"></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" alt="Camera"></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" alt="Lighting"></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.getElementById("cursorCost").innerHTML = building.cost[0];
                    document.getElementById("cameraCost").innerHTML = building.cost[1];
                    document.getElementById("lightingCost").innerHTML = building.cost[2];
                    document.getElementById("cursors").innerHTML = building.count[0];
                    document.getElementById("cameras").innerHTML = building.count[1];
                    document.getElementById("lighting").innerHTML = building.count[2];
                    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
                ],

                purchase: 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();
                    }
                }
            };

            // 补全商店购买函数
            function buyCursor() {
                building.purchase(0);
            }
            function buyCamera() {
                building.purchase(1);
            }
            function buyLighting() {
                building.purchase(2);
            }
            // 补全重置函数
            function resetGame() {
                if(confirm('确定要重置所有游戏进度吗？')) {
                    game.score = 0;
                    game.totalScore = 0;
                    game.totalClicks = 0;
                    building.count = [0,0,0];
                    building.cost = [15,50,100];
                    display.updateScore();
                }
            }
            // 每秒自动加分逻辑
            setInterval(function() {
                let perSecond = 0;
                for(let i=0;i<building.count.length;i++) {
                    perSecond += building.count[i] * building.income[i];
                }
                game.addToScore(perSecond);
                document.getElementById('scorePerSecond').innerText = perSecond;
            }, 1000)
        </script>
    </body>
</html>

额外优化说明 #

• 修复了CSS中写错的transform: all .2s属性，正确应为transition: all .2s
• 补全了每秒自动计算分数的逻辑，商店购买的道具会自动产生收益
• 优化了商店按钮的点击反馈，增加cursor: pointer样式
• 补全了重置游戏的确认逻辑，避免误操作

内容的提问来源于stack exchange，提问作者Dominick