游戏图片
按下按钮移动笑脸：
如何使用图片?
要在画布上添加图像，getContext("2d") 对象具有内置的图像属性和方法。
在我们的游戏中，要将游戏块创建为图像，请使用组件构造函数，但不能引用颜色，而必须引用图像的 url。 而且你必须告诉构造函数这个组件是 "image" 类型的：
实例
function startGame() {
myGamePiece = new component(30, 30, "smiley.gif", 10, 120, "image");
myGameArea.start();
}
在组件构造函数中，我们测试组件是否为“image”类型，并使用内置的 "new Image()" 对象构造函数创建一个图像对象。 当我们准备好绘制图像时，我们使用 drawImage 方法而不是 fillRect 方法：
实例
function component(width, height, color, x, y, type) {
this.type = type;
if (type == "image") {
this.image = new Image();
this.image.src = color;
}
this.width = width;
this.height = height;
this.speedX = 0;
this.speedY = 0;
this.x = x;
this.y = y;
this.update = function() {
ctx = myGameArea.context;
if (type == "image") {
ctx.drawImage(this.image,
this.x,
this.y,
this.width, this.height);
} else {
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
}
}
亲自试一试 »
更换图片
您可以随时更改图像，方法是更改您的 image 对象的 src 属性 组件。
如果你想每次移动时改变笑脸，当用户点击按钮时改变图片源，当按钮没有点击时恢复正常：
实例
function move(dir) {
myGamePiece.image.src = "angry.gif";
if (dir == "up") {myGamePiece.speedY = -1; }
if (dir == "down") {myGamePiece.speedY = 1; }
if (dir == "left") {myGamePiece.speedX = -1; }
if (dir == "right") {myGamePiece.speedX = 1; }
}
function clearmove() {
myGamePiece.image.src = "smiley.gif";
myGamePiece.speedX = 0;
myGamePiece.speedY = 0;
}
亲自试一试 »
背景图片
通过将背景图像作为组件添加到您的游戏区域，并在每一帧中更新背景：
实例
var myGamePiece;
var myBackground;
function startGame() {
myGamePiece = new component(30, 30, "smiley.gif", 10, 120, "image");
myBackground = new component(656, 270, "citymarket.jpg", 0, 0, "image");
myGameArea.start();
}
function updateGameArea() {
myGameArea.clear();
myBackground.newPos();
myBackground.update();
myGamePiece.newPos();
myGamePiece.update();
}
亲自试一试 »
移动背景
更改背景组件的 speedX 属性以使背景移动：
实例
function updateGameArea() {
myGameArea.clear();
myBackground.speedX = -1;
myBackground.newPos();
myBackground.update();
myGamePiece.newPos();
myGamePiece.update();
}
亲自试一试 »
后台循环
要使相同的背景循环永远存在，我们必须使用特定的技术。
首先告诉组件构造器这是一个 background 背景。 然后组件构造函数会添加两次图片，将第二张图片放在第一张图片之后。
在newPos()方法中，检查组件的x位置是否已经到达末尾 图片的，如果有，设置组件的x位置为0：
实例
function component(width, height, color, x, y, type) {
this.type = type;
if (type == "image" || type == "background") {
this.image = new Image();
this.image.src = color;
}
this.width = width;
this.height = height;
this.speedX = 0;
this.speedY = 0;
this.x = x;
this.y = y;
this.update = function() {
ctx = myGameArea.context;
if (type == "image" || type == "background") {
ctx.drawImage(this.image, this.x, this.y, this.width, this.height);
if (type == "background") {
ctx.drawImage(this.image, this.x + this.width, this.y, this.width, this.height);
}
} else {
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
}
this.newPos = function() {
this.x += this.speedX;
this.y += this.speedY;
if (this.type == "background") {
if (this.x == -(this.width)) {
this.x = 0;
}
}
}
}
亲自试一试 »
