Spil Komponenter

Tilføj en rød firkant til spilområdet:

Tilføj komponent

Opret en komponentconstructor, der tillader dig at tilføje komponenter til spilområdet.

Denne objektconstructor kaldeskomponent (component)，vi har oprettet den første komponent, navngivet myGamePiece:

eksempel

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

Prøv Selv

Disse komponenter har egenskaber og metoder til at kontrollere deres udseende og bevægelse.

ramme

For at få spillet klar til bevægelse, opdaterer vi visningen 50 gange pr. sekund, hvilket er meget lig filmrammer.

Først, opret en funktion kaldet updateGameArea() ny funktion.

i objektet. i updateGameArea() funktionen (50 gange pr. sekund). Tilføj også en interval, der kører hver 20 millisekund clear() funktionen bruges til at rydde hele canvas.

i component i konstruktøren, tilføjes en funktion kaldet update() funktionen bruges til at håndtere komponentens tegning.

updateGameArea() funktion kald clear() og update() metode.

Resultatet er, at komponenten tegnes og ryddes 50 gange pr. sekund:

eksempel

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

Prøv Selv

Lad det blive i bevægelse

For at bevise, at den røde firkant tegnes 50 gange pr. sekund, ændrer vi x-positionen (horisontal) med en pixel ved hver opdatering af spilområdet:

eksempel

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

Prøv Selv

Hvorfor skulle vi rydde spilområdet?

Det ser ikke ud til at være nødvendigt at rydde spilområdet ved hver opdatering. Men hvis vi udelader clear() Metoder, alle bevægelser af komponenten efterlader spor af dens position på det seneste ramme:

eksempel

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

Prøv Selv

endre størrelse

Du kan kontrollere komponentens bredde og høyde:

eksempel

Opprett et 10x140 pixels rektangel:

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

Prøv Selv

endre farge

Du kan kontrollere komponentens farge:

eksempel

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

Prøv Selv

Du kan også bruke andre fargeverdier, for eksempel hexadesimalt, rgb eller rgba:

eksempel

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

Prøv Selv

endre posisjon

Vi bruker x- og y-koordinater for å plassere komponentene i spillområdet.

Canvas' øvre venstre hjørne er (0,0).

Plasser muspeken over det nederste spillområdet for å se dens x- og y-koordinater:

Du kan plassere komponenter i hvilket som helst punkt i spillområdet:

eksempel

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

Prøv Selv

flere komponenter

Du kan plassere et hvilket som helst antall komponenter i spillområdet:

eksempel

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

Prøv Selv

beveg komponenten

låt tre komponenter bevege seg i forskellige retninger samtidig:

eksempel

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

Prøv Selv