Componenti di gioco

Aggiungi un quadrato rosso all'area di gioco:

Aggiungi componente

Creare una funzione costruttore del componente che ti permette di aggiungere componenti all'area di gioco.

Questa funzione costruttore dell'oggetto è chiamatacomponente (component)abbiamo creato il primo componente, chiamato myGamePiece:

istanza

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

Prova tu stesso

Questi componenti hanno attributi e metodi che controllano il loro aspetto e il loro movimento.

Fotogramma

Per preparare il gioco all'azione, aggiorniamo ogni secondo la visualizzazione 50 volte, il che è molto simile ai fotogrammi di un film.

Prima di tutto, crea un nome la funzione updateGameArea(), utilizzata per gestire il disegno del componente. nuova funzione.

in myGameArea nello oggetto la funzione updateGameArea(), utilizzata per gestire il disegno del componente. funzione (ogni secondo 50 volte). Aggiungi anche un intervallo chiamato clear(); che utilizza la funzione per cancellare l'intera lavagna.

in funzione component update() Nel costruttore, è stato aggiunto un nome

la funzione updateGameArea(), utilizzata per gestire il disegno del componente. richiesta di funzione clear(); e update() metodo.

Il risultato è che il componente viene disegnato e cancellato 50 volte al secondo:

istanza

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

Prova tu stesso

Facciamolo muovere

Per dimostrare che il quadrato rosso viene disegnato 50 volte al secondo, ogni volta che aggiorniamo l'area di gioco, spostiamo la posizione x (orizzontale) di un pixel:

istanza

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

Prova tu stesso

Perché pulire l'area di gioco?

Sembra non ci sia bisogno di pulire l'area di gioco ad ogni aggiornamento. Tuttavia, se saltiamo clear(); Il metodo, ogni movimento del componente lascia traccia della sua posizione nell'ultimo fotogramma:

istanza

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

Prova tu stesso

cambia dimensioni

Puoi controllare la larghezza e l'altezza del componente:

istanza

crea un rettangolo di 10x140 pixel:

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

Prova tu stesso

cambia colore

Puoi controllare il colore del componente:

istanza

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

Prova tu stesso

Puoi usare altri valori di colore, come esadecimale, rgb o rgba:

istanza

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

Prova tu stesso

cambia posizione

Usiamo le coordinate x e y per posizionare i componenti nell'area di gioco.

Le coordinate in alto a sinistra del canvas sono (0,0).

Metti il mouse sopra l'area di gioco sottostante per vedere le coordinate x e y:

Puoi posizionare i componenti in qualsiasi posizione nell'area di gioco:

istanza

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

Prova tu stesso

componenti multipli

Puoi posizionare qualsiasi numero di componenti nell'area di gioco:

istanza

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

Prova tu stesso

movimento del componente

movimento dei tre componenti in direzioni diverse contemporaneamente:

istanza

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

Prova tu stesso