Komponen Permainan

Tambahkan sebatang persegi merah ke area permainan:

Tambahkan komponen

Membuat fungsi konstruktur komponen yang memungkinkan Anda menambah komponen ke area permainan.

Fungsi konstruktur ini disebutkomponen (component), kami telah membuat komponen pertama, yang dinamai 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);
}

Cuba Sendiri

Bahan-bahan ini memiliki properti dan metode untuk mengawasi penampilan dan geraknya.

bingkai

Untuk mempersiapkan permainan untuk menggerakkan aksi, kami akan memperbarui tampilan setiap detik 50 kali, yang hampir seperti bingkai dalam film.

首先，创建一个名为 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();
}

Cuba Sendiri

让它动起来

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

实例

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

Cuba Sendiri

为什么要清理游戏区？

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

实例

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

Cuba Sendiri

更改尺寸

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

实例

创建 10x140 像素的矩形：

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

Cuba Sendiri

改变颜色

您可以控制组件的颜色：

实例

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

Cuba Sendiri

您还可以使用其他颜色值，例如十六进制、rgb 或 rgba：

实例

function startGame() {
  myGameArea.start();
  myGamePiece = new component(30, 30, "rgba(0, 0, 255, 0.5)", 10, 120);
}

Cuba Sendiri

改变位置

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

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

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

X
Y

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

实例

function startGame() {
  myGameArea.start();
  myGamePiece = new component(30, 30, "red", 2, 2);
}

Cuba Sendiri

多个组件

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

实例

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

Cuba Sendiri

移动组件

使三个组件同时向不同方向移动：

实例

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

Cuba Sendiri