JS外部文件开发Snake浏览器游戏：蛇身无法渲染问题求助

以下是你代码里的核心问题以及对应的修复方案：

1. 上下文获取错误 #

你在获取Canvas绘图上下文时，错误使用了未定义的gameCanvas变量，应该用之前通过getElementById获取到的snakeboard变量：

// 原错误代码
const snakeboard_ctx = gameCanvas.getContext('2d');

// 修复后
const snakeboard_ctx = snakeboard.getContext('2d');

2. 错误操作Canvas元素而非绘图上下文 #

drawSnakeparts函数中，你给snakeboard（Canvas元素本身）设置fillStyle和strokeStyle，但这些样式属性属于绘图上下文snakeboard_ctx，不是Canvas元素：

// 原错误代码
function drawSnakeparts(snakePart){
    snakeboard.fillStyle = snake_col;
    snakeboard.strokeStyle = snake_border;
    snakeboard_ctx.fillRect(snakePart.x, snakePart.y, 10, 10);  
    snakeboard_ctx.strokeRect(snakePart.x, snakePart.y, 10, 10);
}

// 修复后
function drawSnakeparts(snakePart){
    snakeboard_ctx.fillStyle = snake_col;
    snakeboard_ctx.strokeStyle = snake_border;
    snakeboard_ctx.fillRect(snakePart.x, snakePart.y, 10, 10);  
    snakeboard_ctx.strokeRect(snakePart.x, snakePart.y, 10, 10);
}

3. Canvas绘图缓冲区尺寸未配置 #

你只在CSS里设置了Canvas的显示尺寸，但Canvas内部的绘图缓冲区默认是300x150，这会导致坐标错位（比如蛇的y坐标200超过默认高度150，会被绘制到可视区域外）。需要给Canvas设置真实的绘图尺寸，两种方式二选一：

• 在HTML中直接设置属性：

  <canvas id="gameCanvas" width="400" height="400"></canvas>
  

• 在JS中动态设置：

  const snakeboard = document.getElementById('gameCanvas');
  snakeboard.width = 400;
  snakeboard.height = 400;
  const snakeboard_ctx = snakeboard.getContext('2d');
  

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