游戏组件

Idagdag ang isang pulang bloke sa larang ng laro:

Idagdag ang komponente

Buwanin ang constructor ng komponente, na nagbibigay-daan sa iyo na idagdag ang komponente sa larang ng laro.

Ang constructor ng objekto na ito ay tinatawag nacomponent (komponente), amin na binuo ang unang komponente, na tinatawag na 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);
}

亲自试一试

Mayroon ang mga komponente ang mga katangian at mga paraan na kontrolin ang kanilang anyo at kilos.

Frame

Para maghanda ang laro para sa pagkilos, amin na mag-update sa display ng 50 beses bawat segundo, na katulad ng frame sa pelikula.

}} updateGameArea() Unang-una, lumikha ng isang function na may pangalan

sa na bagong function. myGameArea updateGameArea() Sa object, idinagdag ang interval, na magpapatuloy bawat 20 miliyegoldo clear() na function, na ginagamit para sa pagclean ng buong canvas.

sa component Sa constructor, idinagdag ang function na may pangalan update() na mga function, na ginagamit para sa paggamit ng komponente sa pagpipinta.

updateGameArea() mga pagtawag sa clear() at update() Mga paraan.

Ang resulta ay ang pagluluto at pagclean ng komponente 50 beses bawat segundo:

实例

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

亲自试一试

Huwag ito na magpatuloy

Para mapatunayan na ang pula na bloke ay ginagamit 50 beses bawat segundo, bawat update ng lugar ng laro, magbabago kami ng x na posisyon (horizontal) ng isang pixel:

实例

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

亲自试一试

Bakit kailangan magclean ng lugar ng laro?

Mukhang walang kailangan na magclean ng lugar ng laro bawat update. Gayunpaman, kung tinatanggal namin: clear() Mga paraan, ang lahat ng paglipat ng komponente ay mag-iwan ng kanyang lokasyon sa huling frame:

实例

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

亲自试一试