使用頭部圖像文件修改 HTML5 蛇游戲

Question

我遵循了有關如何創建 HTML5 Snake 游戲的教程，但我想對其進行修改。 該教程可以在http://blog.new-bamboo.co.uk/2009/12/30/html5-canvas-snake-game找到

我想要一個 10x10 像素的蛇頭圖像文件，而蛇的其余部分是常規顏色。 任何人都可以用教程中的代碼幫助我完成此操作嗎？

想象這是一條蛇，[x] 代表頭部。 我想修改頭部以包含圖像。

[x][ ][ ][ ]

我知道要在畫布中繪制圖像，您將使用 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);
  }
}

我還沒有運行這個，這是一個指南，只是讓你開始。