Componentes de juego

Agregar un cuadrado rojo al área de juego:

Agregar componente

Crear una función constructora de componente que le permita agregar componentes al área de juego.

Esta función constructora del objeto se llamacomponente (component)，creamos el primer componente, llamado 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);
}

Prueba por tu cuenta

Estos componentes tienen propiedades y métodos para controlar su apariencia y movimiento.

Fotograma

Para preparar el juego para las acciones, actualizamos la visualización 50 veces por segundo, lo que es muy similar a los fotogramas de una película.

Primero, cree un nombre de updateGameArea(), nuevo función.

en myGameArea objeto, se agrega un intervalo que se ejecutará cada 20 milisegundos updateGameArea(), función (50 veces por segundo). A continuación, se agrega una función llamada clear(); la función para borrar toda la pintura.

en component En el constructor, se agrega una función llamada update() la función para manejar el dibujo del componente.

updateGameArea(), llamadas a funciones clear(); y update() método.

El resultado es que el componente se dibuja y se borra 50 veces por 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();
}

Prueba por tu cuenta

Hágalo moverse

Para probar que el cuadrado rojo se dibuja 50 veces por segundo, cada vez que actualizamos el área de juego, modificamos la posición x (horizontal) en un píxel:

实例

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

Prueba por tu cuenta

¿Por qué limpiar el área de juego?

Parece que no es necesario limpiar el área de juego en cada actualización. Sin embargo, si omitimos clear(); Método, todos los movimientos del componente dejan una huella de su posición en el último fotograma:

实例

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

Prueba por tu cuenta

更改尺寸

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

实例

创建 10x140 像素的矩形：

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

Prueba por tu cuenta

改变颜色

您可以控制组件的颜色：

实例

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

Prueba por tu cuenta

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

实例

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

Prueba por tu cuenta

改变位置

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

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

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

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

实例

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

Prueba por tu cuenta

多个组件

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

实例

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

Prueba por tu cuenta

移动组件

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

实例

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

Prueba por tu cuenta