添加一個紅色方塊到遊戲區：
添加組件
使一個組件構造，它可以讓你添加組件到gamearea。
對象構造函數被調用component ，我們讓我們的第一個組件，名為myGamePiece ：
例
var myGamePiece;
function startGame() {
myGameArea.start();
myGamePiece = new
component(30, 30, "red" , 10, 120);
}
function component(width, height, color, x, y) {
this.width = width;
this.height = height;
this.x = x;
this.y = y;
ctx = myGameArea.context;
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
} 該組件具有的屬性和方法來控制它們的外觀和運動。
相框
為了讓遊戲準備採取行動，我們將更新顯示每秒50次，這很像一個電影幀。
首先，創建一個所謂的新功能updateGameArea()
在myGameArea對象，添加將運行的區間updateGameArea()函數每隔20毫秒(50 times per second) 。 還添加了調用的函數clear()掃清整個畫布。
在component的構造中，添加一個函數調用update()以處理該部件的圖紙。
該updateGameArea()函數調用clear()和update()方法。
其結果是，該組件被繪製並且清零每秒50次：
例
var myGameArea = {
canvas :
document.createElement("canvas"),
start : function() {
this.canvas.width = 480;
this.canvas.height = 270;
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
this.interval = setInterval(updateGameArea, 20);
},
clear : function() {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
}
function component(width, height, color, x, y) {
this.width = width;
this.height = height;
this.x = x;
this.y = y;
this.update = function(){
ctx = myGameArea.context;
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
}
function updateGameArea() {
myGameArea.clear();
myGamePiece.update();
} 試一試» 讓它動。
為了證明紅色正方形正在繪製每秒50次，我們將改變x位置(horizontal)由我們每次更新遊戲區域時一個像素：
為什麼要清除遊戲區？
這似乎沒有必要在每次更新清除遊戲區。 但是，如果我們離開了clear()方法中，組件的所有動作會留下它被定位在最後一幀一線索：
改變大小
可以控制組件的寬度和高度：
例
創建一個10x140像素矩形：
function startGame() {
myGameArea.start();
myGamePiece = new
component( 10 , 140 , "red" , 10, 120);
} 試一試» 改變顏色
可以控制組件的顏色：
例
function startGame() {
myGameArea.start();
myGamePiece = new
component(30, 30, "blue" , 10, 120);
} 試一試» 您也可以使用其他colorvalues像十六進制，RGB或RGBA：
例
function startGame() {
myGameArea.start();
myGamePiece = new
component(30, 30, "rgba(0, 0, 255, 0.5)" , 10, 120);
} 試一試» 改變位置
我們使用x和y坐標組件定位到遊戲區。
畫布的左上角的坐標為(0,0)
將鼠標懸停在遊戲區下面來看看它的X和Y坐標：
X
ÿ
您可以定位，無論你在遊戲區喜歡的組件：
例
function startGame() {
myGameArea.start();
myGamePiece = new
component(30, 30, "red" , 2 , 2 );
} 試一試» 許多組件
你可以把盡可能多的組件，你喜歡在遊戲區：
例
var redGamePiece, blueGamePiece, yellowGamePiece;
function startGame() {
redGamePiece = new
component(75, 75, "red" , 10, 10);
yellowGamePiece = new component(75, 75, "yellow" , 50, 60);
blueGamePiece = new component(75, 75, "blue" , 10, 110);
myGameArea.start();
}
function updateGameArea() {
myGameArea.clear();
redGamePiece.update();
yellowGamePiece.update();
blueGamePiece.update();
}
試一試» 運動部件
使所有三個組成部分在不同的方向移動：
例
function updateGameArea() {
myGameArea.clear();
redGamePiece.x += 1;
yellowGamePiece.x += 1;
yellowGamePiece.y += 1;
blueGamePiece.x += 1;
blueGamePiece.y -= 1;
redGamePiece.update();
yellowGamePiece.update();
blueGamePiece.update();
}
試一試»