헤드 용 이미지 파일로 HTML5 스네이크 게임 수정

Question

HTML5 스네이크 게임을 만드는 방법에 대한 자습서를 읽었지만 수정하고 싶습니다. 튜토리얼은 http://blog.new-bamboo.co.uk/2009/12/30/html5-canvas-snake-game

뱀의 머리 부분에 10x10 픽셀의 이미지 파일을 갖고 싶지만 나머지 뱀은 일반 색상으로 만들고 싶습니다. 누구든지 튜토리얼의 코드로이 작업을 수행 할 수 있습니까?

이것이 뱀이라고 상상해보십시오. [x]는 머리를 나타냅니다. 이미지를 포함하도록 머리를 수정하고 싶습니다.

은 [X] [] [] []

는 나는 당신이의 drawImage 메소드를 사용하는 것이 캔버스에 이미지를 그릴 알고 있지만이 특정 게임을 위해 그것을 사용하는 방법을 모르겠어요. this.gridSize = 10;이

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

는 다음과 같이 다음과 같은 기능을 다시 추가 사전 :이 선 후

Answer 1

더 ...

는

들으 ...

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

나는 실행하지 않은 이것은, 당신을 시작하게하는 유일한 지침입니다.