游戏组件
在游戏区域添加一个红色方块
添加组件
创建一个组件构造函数，用于将组件添加到游戏区域。
对象构造函数名为 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 毫秒（每秒 50 次）运行一次 updateGameArea() 函数。同时添加一个名为 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 坐标。
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();
}
自己动手试一试 »
