JavaScript贪吃蛇游戏：蛇身食物不渲染、分数颜色异常求助

嘿，我之前也踩过类似的Canvas渲染坑，结合你的描述（分数能显示但颜色不对、蛇和食物没影但参数都正常），给你几个关键排查点：

1. 先确认Canvas上下文的可用性 #

首先得确保你的Snake和Stage绘制函数都能拿到正确的2D上下文对象。比如如果Stage里的ctx是局部变量，Snake的绘制函数可能找不到它，导致所有绘制操作都相当于"无的放矢"。可以检查下是不是把上下文挂载到了Stage实例上（比如this.ctx = canvas.getContext('2d')），然后Snake通过this.stage.ctx来调用上下文方法。

2. 蛇身/食物的绘制是否真的"执行"了？ #

参数对不代表绘制操作落地了：

• 有没有漏写fillRect()或者fill()？比如你设置了fillStyle但没调用填充方法，等于白设置样式。
• 坐标是不是没做网格转像素的转换？如果你的游戏是网格布局，蛇段的x/y是网格索引的话，必须乘以网格大小（比如x * gridSize），不然会在Canvas的(0,0)附近画个1x1的像素，自然看不见。
• 检查gridSize是不是合理值（比如不是0或者负数），开发者工具里确认下这个参数的数值。

3. 分数颜色问题：样式被覆盖了 #

分数能显示但颜色不对，大概率是绘制顺序导致样式被继承。比如你先画蛇身设置了黑色fillStyle，然后没重新设置文本颜色就直接画分数，分数就会继承蛇身的颜色。解决方法很简单：画分数前单独设置fillStyle，比如：

// Stage的分数绘制函数里
ctx.fillStyle = "#fff"; // 单独指定分数颜色
ctx.fillText(`Score: ${this.score}`, 10, 30);

4. 主循环的绘制顺序是否正确 #

主循环里的绘制步骤必须是固定顺序，不然要么内容被清掉，要么被覆盖：

function mainLoop() {
  // 1. 先清屏！不然旧的绘制内容会堆积
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  // 2. 绘制蛇身
  snake.draw();
  // 3. 绘制食物
  stage.drawFood();
  // 4. 最后绘制分数（避免被蛇/食物挡住）
  stage.drawScore();
  
  requestAnimationFrame(mainLoop);
}

如果没清屏，或者清屏步骤在绘制之后，就会导致刚画的内容被立刻清掉，看起来就是没渲染。

5. Canvas的尺寸设置别踩坑 #

很多人会犯的错：只通过CSS设置Canvas的宽高，却没设置Canvas元素本身的width和height属性。CSS会拉伸Canvas的显示，但绘制的坐标是基于Canvas自身的像素尺寸的，这会导致你的蛇/食物要么被拉伸变形，要么直接画到了可视区域外面。比如在Stage初始化时要这么设置：

// Stage构造函数里
this.canvas.width = 400; // 实际像素宽度
this.canvas.height = 400; // 实际像素高度
// CSS可以设置成一样的，或者按比例缩放
this.canvas.style.width = "400px";
this.canvas.style.height = "400px";

你可以按照这个顺序排查，大概率能找到问题。比如先检查上下文和绘制顺序，再看坐标转换和填充操作，应该就能解决蛇身和食物不显示的问题，同时修复分数颜色的bug。

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