javascript - 使用头部图像文件修改 HTML5 贪吃蛇游戏

Question

我已经学习了有关如何创建 HTML5 贪吃蛇游戏的教程，但我想修改它。该教程可在 http://blog.new-bamboo.co.uk/2009/12/30/html5-canvas-snake-game 找到

我想要一个 10x10 像素的蛇头图像文件，而蛇的其余部分是常规颜色。任何人都可以帮助我使用教程中的代码完成此操作吗？

假设这是蛇，[x] 代表头。我想修改头部以包含图像。

[x][ ][ ][ ]

我知道要在 Canvas 中绘制图像，您会使用 drawImage 方法，但不知道如何将它用于这个特定的游戏。

提前致谢:)

Answer 1

在这一行之后... this.gridSize = 10; 添加

this.snakeHead = new Image();
this.snakeHead.src = "/path/to/my/image.png";

然后像这样重写下面的函数...

function drawSnake() {
  snakeBody.push([currentPosition['x'], currentPosition['y']]);
  ctx.drawImage(snakeHead,currentPosition['x'], currentPosition['y'],gridSize,gridSize);
  if(snakeBody.length > 1) {
    last = snakeBody[1];
    ctx.fillRect(last['x'], last['y'], gridSize, gridSize); // this might be last[0] and last[1] here
  }
  if (snakeBody.length > 3) {
    var itemToRemove = snakeBody.shift();
    ctx.clearRect(itemToRemove[0], itemToRemove[1], gridSize, gridSize);
  }
}

我还没有运行过这个，这只是一个入门指南。