添加一个红色方块到游戏区：
添加组件
使一个组件构造，它可以让你添加组件到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();
}
试一试»