頭の画像ファイルでHTML5スネークゲームを変更する

Question

私はHTML5スネークゲームを作成する方法についてのチュートリアルに従いましたが、変更したいと思います。チュートリアルはhttp://blog.new-bamboo.co.uk/2009/12/30/html5-canvas-snake-game

のスネークの頭には10x10ピクセルの画像ファイルを、残りのスネークには通常の色を入れたいと思っています。チュートリアルのコードで誰もがこれを達成するのを手伝ってもらえますか？

これがヘビであり、[x]が頭を表しているとします。私は画像を含むように頭を修正したいと思います。

[X] [] [] []

私はあなたがdrawImageメソッドを使用するキャンバスに画像を描画することを知っているが、この特定のゲームのためにそれを使用する方法がわかりません。

事前にThxを:)この行の後

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

私が実行していませんこれは、あなたを始めるためのガイドです。