游戏组件

添加组件

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

对象构造函数被称为 component，然后我们制作第一个组件，称为 myGamePiece:

组件具有控制其外观和运动的属性和方法。

框架

为了让游戏可以正常运行，我们将以每秒 50 次的速度更新显示，这很像电影中的帧。

首先，创建一个名为的新函数 updateGameArea().

在里面 myGameArea 对象，添加一个间隔，它将运行updateGameArea() 每 20 毫秒执行一次函数（每秒 50 次）。还添加一个名为clear()，清除整个画布。

在里面 component 构造函数，添加一个名为update()，来处理组件的绘制。

这 updateGameArea() 函数调用clear() 和update() 方法。

结果是该组件每秒绘制和清除 50 次：

让它动起来

为了证明红色方块每秒被绘制 50 次，我们每次更新游戏区域时都会将 x 位置（水平）改变一个像素：

为什么要清除游戏区域？

每次更新时清除游戏区域似乎没有必要。但是，如果我们忽略 clear() 方法，组件的所有移动都会留下它在上一帧的位置的轨迹：

更改尺寸

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

改变颜色

您可以控制组件的颜色：

您还可以使用其他颜色值，如 hex、rgb 或 rgba：

改变位置

我们使用 x 和 y 坐标将组件定位到游戏区域。

画布左上角的坐标为 (0,0)

将鼠标悬停在下面的游戏区域上以查看其 x 和 y 坐标：

您可以将组件放置在游戏区域的任何位置：

许多组件

您可以在游戏区域放置任意数量的组件：

移动组件

使所有三个组件朝不同的方向移动：