Game Componenten

Voeg een rode方块toe aan het spelgebied:

Voeg component toe

Maak een componentconstructiefunctie die het mogelijk maakt om componenten toe te voegen aan het spelgebied.

Deze objectconstructiefunctie wordtcomponent（component），we hebben de eerste component gecreëerd, genaamd myGamePiece:

voorbeeld

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

Probeer het zelf

Deze componenten hebben eigenschappen en methoden die hun uiterlijk en beweging beheersen.

Frame

Om ervoor te zorgen dat het spel klaar is om actie te ondernemen, updaten we de weergave 50 keer per seconde, wat erg lijkt op de frames in een film.

First, create a named updateGameArea() new function.

in myGameArea object, add an interval that runs every 20 milliseconds updateGameArea() function (50 times per second). Then add a named clear(); function, used to clear the entire canvas.

in component In the constructor, a function named update() function, used to handle the drawing of the component.

updateGameArea() function call clear(); and update() method.

The result is that the component is drawn and cleared 50 times per second:

voorbeeld

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

Probeer het zelf

Let it move

To prove that the red square is drawn 50 times per second, we change the x position (horizontal) by one pixel every time the game area is updated:

voorbeeld

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

Probeer het zelf

Why clear the game area?

It seems unnecessary to clear the game area with every update. However, if we omit clear(); Method, every movement of the component leaves a trace of its position on the last frame:

voorbeeld

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

Probeer het zelf

wijzig maat

Je kunt de breedte en hoogte van de component controleren:

voorbeeld

Maak een 10x140 pixels rechthoek aan:

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

Probeer het zelf

verander kleur

Je kunt de kleur van de component controleren:

voorbeeld

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

Probeer het zelf

Je kunt ook andere kleurwaarden gebruiken, zoals hexadecimaal, rgb of rgba:

voorbeeld

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

Probeer het zelf

verander positie

We gebruiken x- en y-coördinaten om componenten te positioneren in het spelgebied.

De linkerbovenhoek van het canvas is (0,0).

Zet de muispijl op het onderste spelgebied om de x- en y-coördinaten te zien:

Je kunt componenten op willekeurige posities in het spelgebied plaatsen:

voorbeeld

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

Probeer het zelf

meerdere componenten

Je kunt een willekeurig aantal componenten in het spelgebied plaatsen:

voorbeeld

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

Probeer het zelf

beweeg component

laat drie componenten tegelijkertijd in verschillende richtingen bewegen:

voorbeeld

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

Probeer het zelf