HTML蛇形游戏开发：文本居中失效与gameOverMessage异常问题

我正在开发一款自定义蛇形游戏，原本功能正常，但添加重启按钮后出了问题——就算撤销所有修改，标题和游戏画面还是没法居中显示。另外gameOverMessage还有两个问题：

• 始终无法隐藏
• 没应用我在JavaScript里设置的样式

我是编程新手，求各位给点实用建议！

相关代码 #

CSS代码 #

#snakeboard {
    position: relative;
    top: 50%;
    left: 500px;
    transform: translate(-50%, -50%);
    z-index: -1;
}

#gameOverMessage {
    z-index: 1;
    text-align: center; 
    position: relative;
    font-size: 150px; 
    color:rgb(235, 28, 28);
    font-weight: bold;
}

.hidden {
    display: none;
}

HTML代码 #

<h1 class="h1">My own snakegame</h1>
<p class="p1">Score:</p>
<div id="score"></div> 
<canvas id="snakeboard" width="400" height="400"></canvas>
<div id="gameOverMessage" class="hidden">
    Game Over!
</div>

JavaScript代码（移除hidden类部分） #

function main() {
    changing_direction = false;
    clear_board();
    drawFood();
    drawSnake();
    move_snake();

    if (!has_game_ended()) {
        setTimeout(main, 200);
    } else {
        const gameOverMessage = document.getElementById("gameOverMessage");
        gameOverMessage.classList.remove("hidden");
    }
}

问题分析与解决方案 #

一、标题和游戏画面居中问题 #

你当前给#snakeboard设置的left:500px是固定值，会导致它无法自适应居中；同时标题<h1>也没设置居中样式，所以没法自动居中。修改方案：

1. 给页面主体添加flex布局，实现整体居中：

body {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
}

2. 删掉#snakeboard里的left:500px，保留平移实现自身居中：

#snakeboard {
    position: relative;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
}

3. 给标题添加宽度占满和居中样式：

.h1 {
    text-align: center;
    width: 100%;
}

二、gameOverMessage的问题 #

1. 无法隐藏/移除hidden类不生效

• 先验证has_game_ended()函数是否正确触发：在函数内加console.log("游戏结束")，看游戏结束时控制台是否输出，确认函数逻辑没问题。
• 提升.hidden类的优先级：因为ID选择器优先级高于类选择器，直接写.hidden可能被#gameOverMessage的默认样式覆盖，修改为：

#gameOverMessage.hidden {
    display: none !important;
}

• 确认DOM元素是否正确获取：在JavaScript移除类的代码前加console.log(gameOverMessage)，看是否能拿到目标元素，避免ID拼写大小写错误。

2. 样式未应用

• 检查JavaScript是否有覆盖样式的代码：比如有没有用gameOverMessage.style设置属性，和CSS里的样式冲突。
• 提高CSS选择器优先级：如果样式被其他规则覆盖，可增强选择器权重：

body #gameOverMessage {
    z-index: 1;
    text-align: center; 
    position: relative;
    font-size: 150px; 
    color: rgb(235, 28, 28);
    font-weight: bold;
}

额外实用建议 #

• 用浏览器开发者工具（F12）的Elements面板，查看元素的样式加载情况和DOM结构，能快速定位样式不生效、元素找不到的问题。
• 变量名和ID尽量遵循驼峰命名规范，比如has_game_ended改成hasGameEnded，减少拼写错误概率。

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