javascript - 构建贪吃蛇游戏 javascript - 插入 png 图像而不是在 Canvas 上绘制矩形

Question

我正在用 javascript 构建一个贪吃蛇游戏。

到目前为止，我有一个在屏幕上移动的矩形，由上、下、左、右键控制。

一切正常..

但是，我想将移动矩形更改为 png 图像。我使用本教程作为指南，但绝不复制它

https://github.com/davethesoftwaredev/SnakeGame/tree/master/5/js

他把他的图像放在一个单独的js文件中，然后他在snake文件中引用它们并为它们分配名称和编号。我应该像这样做我的还是应该将其全部保存在一个文件中？

我想要一些关卡、碰撞检测和记分板。那么像他那样做是否明智呢？

我不想把我的整个代码放在这里，因为它是大学项目的一部分，所以我不希望它看起来像是从这里复制的，但这是我的矩形代码:

snake.context.fillStyle = "#f00";
snake.context.fillRect(snake.xcoord, snake.ycoord, 50, 50); //Creates the rectangle
snake.context.stroke;

我希望这个显示我的 Snakehead.png 图像

我对 javascript 非常陌生。我是一个月前开始学习的，所以请大家多多包涵!我不太了解行话。

我假设我想在 Canvas 上绘制图像，而不是创建 HTML 图像标签。

请告诉我是否应该使用教程中的人使用的方法并制作一个完整的单独的 js 文件，或者应该有不同的方法吗？请记住，我想要一些游戏关卡、与墙壁和水果的碰撞检测。如果将矩形更改为图像会破坏我的其余代码，请告诉我。我确信我将能够看到还有什么需要改变..也许

非常感谢任何帮助!

谢谢

Answer 1

绘制图像相当简单。首先，您需要创建一个图像，设置源并等待它加载:

var image = new Image();
image.onload = function() {
    // Image is ready
};
image.src = imageURL;

然后将图像绘制到 Canvas 就像调用一样简单

context.drawImage(image, xPosition, yPosition);

示例:

var context = document.querySelector('canvas').getContext('2d');
var image = new Image();
image.onload = function() {
  context.drawImage(image, 0, 0);
};
image.src = 'http://placecage.com/320/240';

<canvas width="320" height="240"></canvas>