修改HTML5的蛇遊戲與頭像圖像文件

我已經遵循教程如何創建一個HTML5蛇遊戲，但我想修改它。教程可以在http://blog.new-bamboo.co.uk/2009/12/30/html5-canvas-snake-game 修改HTML5的蛇遊戲與頭像圖像文件

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

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

[X] [] [] []

我知道，你會使用的drawImage方法畫布繪製圖像，但不知道如何使用它爲這個特定的遊戲。

提前:)

來源

2011-01-14 Eypeon

你期待什麼樣的答案？競爭代碼示例？如果你真的知道`drawImage（）`你應該能夠將圖像粘貼到蛇頭的位置上嗎？ =） – timdream 2011-01-14 06:27:49

我不會問這個問題，如果我不知道如何處理它我自己。我只想知道如何使用教程提供的代碼實現頭部圖像。 – Eypeon 2011-01-14 07:11:44

這條線後... THX 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); 
    } 
}

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

來源

2011-01-14 08:13:30 stef

修改HTML5的蛇遊戲與頭像圖像文件

回答

相關問題