Componentes do Jogo

Adicionar um quadrado vermelho à área do jogo：

Adicionar componente

Crie um construtor de componente que permita adicionar componentes à área do jogo.

Este construtor de objeto é chamadocomponente（component），criamos o primeiro componente, chamado myGamePiece:

instância

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

Experimente Você Mesmo

Esses componentes possuem atributos e métodos para controlar sua aparência e movimento.

Quadro

Para preparar o jogo para ações, atualizamos a exibição 50 vezes por segundo, o que é semelhante a quadros em filmes.

Primeiro, crie um nome da função updateGameArea(), usada para lidar com o desenho do componente. nova função.

função, usada para limpar toda a canvas. myGameArea adicionamos um intervalo que executará a cada 20 milissegundos da função updateGameArea(), usada para lidar com o desenho do componente. no objeto clear() função (50 vezes por segundo). Em seguida, adicionamos uma função chamada

função, usada para limpar toda a canvas. em component update() No construtor, adicionamos uma função chamada

da função updateGameArea(), usada para lidar com o desenho do componente. chamadas de função clear() e update() método.

O resultado é que o componente é desenhado e limpo 50 vezes por segundo:

instância

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

Experimente Você Mesmo

Deixem-no se mover

Para provar que o quadrado vermelho é desenhado 50 vezes por segundo, alteramos a posição x (horizontal) um pixel a cada atualização da área do jogo:

instância

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

Experimente Você Mesmo

Por que limpar a área do jogo?

Parece desnecessário limpar a área do jogo a cada atualização. No entanto, se omitirmos clear() Método, todas as movimentações do componente deixarão uma marca da sua posição na última frame:

instância

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

Experimente Você Mesmo

mudar tamanho

você pode controlar a largura e a altura do componente:

instância

criar retângulo de 10x140 pixels:

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

Experimente Você Mesmo

mudar cor

você pode controlar a cor do componente:

instância

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

Experimente Você Mesmo

você também pode usar outros valores de cor, como hexadecimal, rgb ou rgba:

instância

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

Experimente Você Mesmo

mudar posição

usamos as coordenadas x e y para localizar os componentes na área do jogo.

o canto superior esquerdo do canvas é (0,0).

coloque o cursor do mouse sobre a área do jogo abaixo para ver suas coordenadas x e y:

você pode colocar os componentes em qualquer posição na área do jogo:

instância

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

Experimente Você Mesmo

múltiplos componentes

você pode colocar qualquer quantidade de componentes na área do jogo:

instância

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

Experimente Você Mesmo

mover componente

movimento dos três componentes em direções diferentes ao mesmo tempo:

instância

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

Experimente Você Mesmo