修改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的蛇游戏与头像图像文件

回答

相关问题