按動按鈕來移動笑臉：
如何使用圖片？
要在畫布上添加圖片時， getContext("2d")的對象具有內置的圖像屬性和方法。
在我們的遊戲中，打造gamepiece作為圖像，使用組件構造，但不是指一個顏色，你必須引用圖像的URL。 你必須告訴構造函數，這個組件類型的"image" ：
例
function startGame() {
myGamePiece = new component(30, 30, "smiley.gif" ,
10, 120, "image" );
myGameArea.start();
}在組件構造我們測試如果組件類型的"image" ，並通過使用內置的“新創建的圖像對象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);
}
}
}
試一試» 改變圖像
當你通過改變喜歡，你可以改變圖像src的財產image組件的對象。
如果你想改變它移動笑臉每次，當用戶點擊一個按鈕，恢復正常時，按鈕沒有點擊改變圖像來源：
例
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();
}
試一試» 背景環路
為了使相同的背景永遠循環下去，我們必須使用特定的技術。
告訴組件構造，這是一個後台啟動。 然後該組件構造將添加圖像兩次，第一圖像之後立即將所述第二圖像。
在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;
}
}
}
}
試一試»