Spelkomponenter

Lägg till en röd rektangel i spelområdet:

Lägg till komponent

Skapa en komponentbyggare som tillåter dig att lägga till komponenter i spelområdet.

Denna objektbyggare kallaskomponent (component)vi skapade den första komponenten, som heter myGamePiece:

exempel

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 själv

Dessa komponenter har egenskaper och metoder för att kontrollera deras utseende och rörelse.

Ram

För att göra spelet redo för rörelse uppdaterar vi skärmen 50 gånger per sekund, vilket liknar ramarna i en film.

Först, skapa en funktion updateGameArea() ny funktion.

i myGameArea objektet, som körs var 20 millisekund updateGameArea() funktionen (50 gånger per sekund). Lägg sedan till en intervall clear() funktionen för att rengöra hela canvasen.

i component Konstruktorn lägger till en funktion update() funktionen används för att hantera komponentens ritning.

updateGameArea() funktion anrop clear() och update() metod.

Resultatet är att komponenten ritas och rengörs 50 gånger per sekund:

exempel

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 själv

Låt den röra sig

För att bevisa att den röda rektangeln ritas 50 gånger per sekund, ändrar vi x-positionen (horisontellt) med en pixel vid varje uppdatering av spelområdet:

exempel

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

Prova själv

Varför rengöra spelområdet?

Det verkar inte nödvändigt att rengöra spelområdet vid varje uppdatering. Men om vi clear() Metod, alla rörelser av komponenten lämnar spår efter sin position på sista ramen:

exempel

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

Prova själv

ändra storlek

du kan styra komponenternas bredd och höjd:

exempel

skapa en 10x140 pixel rektangel:

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

Prova själv

ändra färg

du kan styra komponenternas färg:

exempel

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

Prova själv

du kan använda andra färgvärden, till exempel hexadecimala, rgb eller rgba:

exempel

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

Prova själv

ändra plats

vi använder x- och y-koordinater för att placera komponenterna i spelområdet.

kanvaskedjans övre vänstra hörnkoordinat är (0,0).

du kan se dess x- och y-koordinater genom att hålla muspekaren över spelområdet nedan:

du kan placera komponenter på valfri plats i spelområdet:

exempel

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

Prova själv

flera komponenter

du kan placera hur många komponenter som helst i spelområdet:

exempel

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 själv

komponentrörelse

låt tre komponenter röra sig i olika riktningar samtidigt:

exempel

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 själv