如何为HTML贪吃蛇类小游戏使用JavaScript实现计分器功能

实现逻辑 #

通过全局变量存储当前分数，封装分数初始化、更新、重置方法，对接游戏业务逻辑触发分数变更。

完整JS代码（基于你给出的初始代码补充） #

// 你给出的初始代码
var element = document.getElementById("points");

// 补充代码开始
// 获取用于展示分数的h1节点
const scoreText = element.querySelector("h1");
// 存储当前得分的全局变量
let score = 0;

// 初始化计分器，页面加载或游戏重置时调用
function initScoreCounter() {
  score = 0;
  renderScore();
}

// 渲染分数到页面
function renderScore() {
  scoreText.innerText = `当前得分：${score}`;
}

// 吃到食物时调用，可自定义单次增加的分数
function increaseScore(addNum = 1) {
  score += addNum;
  renderScore();
}

// 页面加载完成后自动初始化计分器
window.onload = initScoreCounter;

业务对接方法 #

• 贪吃蛇吃到普通食物的逻辑中调用increaseScore()即可默认加1分
• 如果有特殊分值的食物，传入对应数值即可，比如加5分调用increaseScore(5)
• 游戏重新开始的逻辑中调用initScoreCounter()即可重置分数为0

可选样式优化（CSS） #

可以给计分器添加样式提升展示效果：

#points h1 {
  font-size: 22px;
  color: #2c3e50;
  margin: 12px 20px;
  font-family: sans-serif;
}

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