游戲組件

在游戲區域添加一個紅色方塊：

添加組件

創建一個組件構造函數，它允許您將組件添加到游戲區域。

這個對象構造函數稱為組件（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 坐標：

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

親自試一試