游戏图像
按下按钮来移动笑脸：
如何使用图像？
要在画布上添加图像，getContext("2d") 对象具有内置的图像属性和方法。
在我们的游戏中，要将游戏部件创建为图像，请使用组件构造函数，但不是引用颜色，而是必须引用图像的 URL。并且必须告诉构造函数此组件属于“图像”类型：
例子
函数开始游戏() {
myGamePiece = 新组件（30，30， “笑脸.gif”, 10, 120, “图像”);
我的游戏区域.开始()；
}
在组件构造函数中，我们测试组件是否为“图像”类型，并使用内置的“new Image()”对象构造函数创建一个图像对象。当我们准备绘制图像时，我们使用 drawImage 方法而不是 fillRect 方法：
例子
函数组件（宽度，高度，颜色，x，y，类型）{
这个.类型=类型；
如果（类型==“图像”）{
这个.图像 = 新图像（）;
这个.图像.src = 颜色;
}
这个.宽度=宽度；
这个.高度=高度；
这个.speedX = 0;
这个.速度Y = 0;
这个.x = x;
这个.y = y;
this.update = 函数（）{
ctx = 我的游戏区域.context;
如果（类型==“图像”）{
ctx.绘制图像（这个.图像，
这个.x，
这个.y，
这个宽度，这个高度）；
} 别的 {
ctx.填充样式 = 颜色；
ctx.fillRect（这个.x，这个.y，这个.width，这个.height）；
}
}
}
亲自尝试 »
更改图像
您可以随时更改图像，只需更改 src 的财产image 你的组件的对象。
如果您希望每次移动时都更改笑脸，则在用户单击按钮时更改图像源，并在未单击按钮时恢复正常：
例子
函数移动（目录）{
myGamePiece.image.src = “愤怒.gif”;
如果（dir ==“up”）{myGamePiece.speedY = -1; }
如果 (dir == "down") {myGamePiece.speedY = 1; }
如果（dir ==“left”）{myGamePiece.speedX = -1; }
如果 (dir == "right") {myGamePiece.speedX = 1; }
}
函数 clearmove() {
myGamePiece.image.src = “笑脸.gif”;
我的游戏部件.speedX = 0;
myGamePiece.speedY = 0;
}
亲自尝试 »
背景图像
将背景图像添加为组件，将其添加到您的游戏区域，并在每一帧中更新背景：
例子
var myGamePiece;
var 我的背景；
函数开始游戏() {
myGamePiece = 新组件（30，30，“笑脸.gif”，10，120，“图像”）；
myBackground = 新组件（656，270，“citymarket.jpg”，0，0，“图像”）；
我的游戏区域.开始()；
}
函数更新游戏区域（）{
我的游戏区域.清除()；
myBackground.newPos()；
我的背景.更新（）；
myGamePiece.newPos()；
我的游戏部件.更新()；
}
亲自尝试 »
动态背景
更改背景组件的 speedX 使背景移动的属性：
例子
函数更新游戏区域（）{
我的游戏区域.清除()；
我的背景.speedX = -1;
myBackground.newPos()；
我的背景.更新（）；
myGamePiece.newPos()；
我的游戏部件.更新()；
}
亲自尝试 »
背景循环
要使同一个背景永远循环，我们必须使用特定的技术。
首先告诉组件构造函数这是一个 背景然后，组件构造函数将添加图像两次，将第二幅图像紧接着第一幅图像放置。
在里面 newPos() 方法，检查x 组件的位置已经到达图片的末尾，如果已经到达，则设置x 组件的位置设置为 0：
例子
函数组件（宽度，高度，颜色，x，y，类型）{
这个.类型=类型；
如果（类型==“图像” || 类型 == “背景”) {
这个.图像 = 新图像（）;
这个.图像.src = 颜色;
}
这个.宽度=宽度；
这个.高度=高度；
这个.speedX = 0;
这个.速度Y = 0;
这个.x = x;
这个.y = y;
this.update = 函数（）{
ctx = 我的游戏区域.context;
如果（类型==“图像”||类型==“背景”）{
ctx.绘制图像（这个.图像，这个.x，这个.y，这个.宽度，这个.高度）；
如果（类型==“背景”）{
ctx.绘制图像（这个.图像，这个.x + 这个.宽度，这个.y，这个.宽度，这个.高度）；
}
} 别的 {
ctx.填充样式 = 颜色；
ctx.fillRect（这个.x，这个.y，这个.width，这个.height）；
}
}
this.newPos = 函数（）{
这个.x +=这个.速度X；
这个.y +=这个.速度Y；
如果（this.type ==“背景”）{
如果 (this.x == -(this.width)) {
这个.x = 0;
}
}
}
}
亲自尝试 »
