游戏组件

在游戏区域添加一个红色方块:

添加组件

创建一个组件构造函数,它允许您将组件添加到游戏区域。

这个对象构造函数称为组件(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 对象中,添加一个间隔,该间隔将每 20 毫秒运行一次 updateGameArea() 函数(每秒 50 次)。再添加一个名为 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 位置(水平)更改一个像素:

实例

function updateGameArea() {
 myGameArea.clear();
 myGamePiece.x += 1;
 myGamePiece.update();
}

亲自试一试

为什么要清理游戏区?

似乎没有必要在每次更新时清理游戏区域。然而,如果我们省略 clear() 方法,组件的所有移动都会留下它在最后一帧中的位置的痕迹:

实例

function updateGameArea() {
 // myGameArea.clear();
 myGamePiece.x += 1;
 myGamePiece.update();
}

亲自试一试

更改尺寸

您可以控制组件的宽度和高度:

实例

创建 10x140 像素的矩形:

function startGame() {
 myGameArea.start();
 myGamePiece = new component(140, 10, "red", 10, 120);
}

亲自试一试

改变颜色

您可以控制组件的颜色:

实例

function startGame() {
 myGameArea.start();
 myGamePiece = new component(30, 30, "blue", 10, 120);
}

亲自试一试

您还可以使用其他颜色值,例如十六进制、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 坐标:

您可以将组件放置在游戏区域中的任意位置:

实例

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();
}

亲自试一试