Spelcomponenten
Voeg een rood vierkant toe aan het spelgebied:
Een component toevoegen
Maak een componentconstructor, waarmee je componenten aan het gamegebied kunt toevoegen.
De objectconstructor heet
component, en we maken onze eerste component, 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);
}
De componenten hebben eigenschappen en methoden om hun uiterlijk en bewegingen te beheersen.
Kaders
Om de game klaar te maken voor actie, updaten we het scherm 50 keer per seconde, wat veel lijkt op frames in een film.
Maak eerst een nieuwe functie met de naam updateGameArea().
Voeg in het myGameAreaobject een interval toe waarmee de updateGameArea()functie elke 20e milliseconde (50 keer per seconde) wordt uitgevoerd. Voeg ook een functie toe met de naam clear(), die het hele canvas wist.
Voeg in de componentconstructor een functie toe met de naam
update(), om de tekening van de component af te handelen.
De updateGameArea()functie roept de clear()en de update()methode aan.
Het resultaat is dat het onderdeel 50 keer per seconde wordt getekend en gewist:
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();
}
Laat het bewegen
Om te bewijzen dat het rode vierkant 50 keer per seconde wordt getekend, veranderen we de x-positie (horizontaal) met één pixel elke keer dat we het spelgebied bijwerken:
Voorbeeld
function updateGameArea() {
myGameArea.clear();
myGamePiece.x += 1;
myGamePiece.update();
}
Waarom het spelgebied wissen?
Het lijkt misschien niet nodig om het spelgebied bij elke update te wissen. Als we de
clear()methode echter weglaten, laten alle bewegingen van het onderdeel een spoor achter van waar het in het laatste frame was gepositioneerd:
Voorbeeld
function updateGameArea() {
// myGameArea.clear();
myGamePiece.x += 1;
myGamePiece.update();
}
Verander de maat
U kunt de breedte en hoogte van het onderdeel bepalen:
Voorbeeld
Maak een rechthoek van 10x140 pixels:
function startGame() {
myGameArea.start();
myGamePiece = new component(140, 10, "red", 10, 120);
}
Verander de kleur
U kunt de kleur van het onderdeel bepalen:
Voorbeeld
function startGame() {
myGameArea.start();
myGamePiece = new component(30, 30, "blue", 10, 120);
}
U kunt ook andere kleurwaarden gebruiken, zoals hex, rgb of rgba:
Voorbeeld
function startGame() {
myGameArea.start();
myGamePiece = new component(30, 30, "rgba(0, 0, 255, 0.5)", 10, 120);
}
Verander de positie
We gebruiken x- en y-coördinaten om componenten op het spelgebied te positioneren.
De linkerbovenhoek van het canvas heeft de coördinaten (0,0)
Beweeg de muis over het spelgebied hieronder om de x- en y-coördinaten te zien:
U kunt de componenten op het speelveld plaatsen waar u maar wilt:
Voorbeeld
function startGame() {
myGameArea.start();
myGamePiece = new component(30, 30, "red", 2, 2);
}
Veel componenten
Je kunt zoveel onderdelen op het speelveld plaatsen als je wilt:
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();
}
Bewegende onderdelen
Laat alle drie de componenten 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();
}