Spelkomponente
Voeg 'n rooi vierkant by die spelarea:
Voeg 'n komponent by
Maak 'n komponentkonstruktor waarmee jy komponente by die spelarea kan voeg.
Die objekkonstruktor word genoem
component, en ons maak ons eerste komponent, 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);
}
Die komponente het eienskappe en metodes om hul voorkoms en bewegings te beheer.
Rame
Om die speletjie gereed te maak vir aksie, sal ons die skerm 50 keer per sekonde opdateer, wat baie soos rame in 'n fliek is.
Skep eers 'n nuwe funksie genaamd updateGameArea().
Voeg in die myGameAreavoorwerp 'n interval by wat die updateGameArea()funksie elke 20ste millisekonde (50 keer per sekonde) sal laat loop. Voeg ook 'n funksie genaamd clear(), by wat die hele doek uitvee.
Voeg in die componentkonstruktor 'n funksie genaamd
update(), by om die tekening van die komponent te hanteer.
Die updateGameArea()funksie roep die clear()en die update()metode.
Die resultaat is dat die komponent 50 keer per sekonde geteken en skoongemaak word:
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 dit beweeg
Om te bewys dat die rooi vierkant 50 keer per sekonde geteken word, sal ons die x-posisie (horisontaal) met een pixel verander elke keer as ons die spelarea opdateer:
Voorbeeld
function updateGameArea() {
myGameArea.clear();
myGamePiece.x += 1;
myGamePiece.update();
}
Waarom die wildsarea skoonmaak?
Dit lyk dalk onnodig om die spelarea by elke opdatering skoon te maak. As ons egter die
clear()metode uitlaat, sal alle bewegings van die komponent 'n spoor laat van waar dit in die laaste raam geposisioneer is:
Voorbeeld
function updateGameArea() {
// myGameArea.clear();
myGamePiece.x += 1;
myGamePiece.update();
}
Verander die grootte
U kan die breedte en hoogte van die komponent beheer:
Voorbeeld
Skep 'n 10x140 piksels reghoek:
function startGame() {
myGameArea.start();
myGamePiece = new component(140, 10, "red", 10, 120);
}
Verander die kleur
U kan die kleur van die komponent beheer:
Voorbeeld
function startGame() {
myGameArea.start();
myGamePiece = new component(30, 30, "blue", 10, 120);
}
Jy kan ook ander kleurwaardes soos hex, rgb of rgba gebruik:
Voorbeeld
function startGame() {
myGameArea.start();
myGamePiece = new component(30, 30, "rgba(0, 0, 255, 0.5)", 10, 120);
}
Verander die posisie
Ons gebruik x- en y-koördinate om komponente op die spelarea te plaas.
Die boonste linkerhoek van die doek het die koördinate (0,0)
Beweeg oor die spelarea hieronder om sy x- en y-koördinate te sien:
Jy kan die komponente plaas waar jy wil op die speletjie area:
Voorbeeld
function startGame() {
myGameArea.start();
myGamePiece = new component(30, 30, "red", 2, 2);
}
Baie komponente
Jy kan soveel komponente as wat jy wil op die speletjie plaas:
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 komponente
Laat al drie komponente in verskillende rigtings beweeg:
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();
}