Composants de jeu

Ajouter un carré rouge dans la zone de jeu :

Ajouter un composant

Créer un constructeur de composant qui vous permet d'ajouter des composants à la zone de jeu.

Ce constructeur d'objet est appelécomposant（component），nous avons créé le premier composant, nommé 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);
}

Essayer vous-même

Ces composants possèdent des attributs et des méthodes pour contrôler leur apparence et leur mouvement.

Trame

Pour préparer le jeu à l'action, nous mettons à jour l'affichage 50 fois par seconde, ce qui ressemble beaucoup aux trames des films.

首先，创建一个名为 la fonction updateGameArea(), utilisée pour gérer le dessin du composant. nouvelle fonction. Tout d'abord, créez un nom

de myGameArea dans l'objet la fonction updateGameArea(), utilisée pour gérer le dessin du composant. La fonction (50 fois par seconde). Ajoutez également une intervalle clear() la fonction, utilisée pour effacer tout le canevas.

de a été ajoutée component update() Dans le constructeur, une fonction nommée

la fonction updateGameArea(), utilisée pour gérer le dessin du composant. appels de fonction clear() et update() méthode.

Le résultat est que le composant est dessiné et effacé 50 fois par seconde :

实例

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

Essayer vous-même

Le faire bouger

Pour prouver que le carré rouge est dessiné 50 fois par seconde, nous changeons la position x (horizontale) d'un pixel à chaque mise à jour de la zone de jeu :

实例

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

Essayer vous-même

Pourquoi nettoyer la zone de jeu ?

Il semble inutile de nettoyer la zone de jeu à chaque mise à jour. Cependant, si nous omettons clear() La méthode, tout déplacement du composant laisse une trace de sa position à la dernière frame :

实例

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

Essayer vous-même

更改尺寸

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

实例

创建 10x140 像素的矩形：

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

Essayer vous-même

改变颜色

您可以控制组件的颜色：

实例

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

Essayer vous-même

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

实例

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

Essayer vous-même

改变位置

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

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

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

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

实例

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

Essayer vous-même

多个组件

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

实例

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

Essayer vous-même

移动组件

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

实例

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

Essayer vous-même