Модификация HTML5 игры со змеями с файлом изображения для головы

Question

Я следовал учебному пособию о том, как создать игру Snake на HTML5, но я хочу ее изменить. Учебное пособие можно найти по адресу http://blog.new -bamboo.co.uk / 2009/12/30 / html5-canvas-snake-game

Я хочу получить файл изображения для головы змеи размером 10x10 пикселей, в то время как остальная часть змеи имеет обычный цвет. Может ли кто-нибудь помочь мне сделать это с помощью кода из учебника?

Представьте, что это змея и [x] представляет голову. Я хотел бы изменить голову, чтобы она содержала изображение.

[x] [] [] []

Я знаю, что для рисования изображения на холсте вы бы использовали метод drawImage, но не знаете, как использовать его для этой конкретной игры.

Спасибо заранее:)

Answer 1

После этой строки ... this.gridSize = 10; add

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);
  }
}

Я не запускал это, эторуководство только для начала.