用头部图像文件修改 HTML5 蛇游戏答案

【问题标题】：Modifying HTML5 snake game with image file for head用头部图像文件修改 HTML5 蛇游戏
【发布时间】：2020-05-21 03:59:00
【问题描述】：

我已经学习了如何创建 HTML5 Snake 游戏的教程，但我想对其进行修改。教程可以在http://blog.new-bamboo.co.uk/2009/12/30/html5-canvas-snake-game找到

我想要一个蛇头的图像文件，它是 10x10 像素，而蛇的其余部分是常规颜色。谁能帮我用教程中的代码完成这个任务？

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

[x][ ][ ][ ]

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

提前谢谢 :)

【问题讨论】：

您期待什么样的答案？竞争代码示例？如果你真的知道drawImage()你应该可以把图片贴到蛇头的位置吧？ =)
如果我自己不确定如何解决这个问题，我就不会问这个问题。我只想知道如何使用教程中提供的代码实现头部图像。

标签： javascript html canvas

【解决方案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);
  }
}

我没有运行这个，这只是一个引导你开始的指南。

【讨论】：

我根据您提供的内容稍微修改了代码，但仍然存在一些问题。函数 drawSnake() { snakeBody.push([currentPosition['x'], currentPosition['y']]); ctx.drawImage(snakeHead,currentPosition['x'], currentPosition['y'],gridSize,gridSize); if(snakeBody.length > 3) { last = snakeBody[snakeLength-1]; ctx.fillRect(last[0], last[1], gridSize, gridSize); // 这里可能是 last[0] 和 last[1] } if (snakeBody.length > snakeLength) { var itemToRemove = snakeBody.shift(); ctx.clearRect(itemToRemove[0], itemToRemove[1], gridSize, gridSize); } }
到底是什么问题？（我没有链接...）这肯定会在整个蛇的长度上绘制蛇头图像...
当蛇的长度增加时，您可以看到蛇头的正好 3 格最终消失。有什么建议吗？