Speltelling
Druk die knoppies om die rooi vierkant te skuif:
Tel die telling
Daar is baie maniere om die telling in 'n speletjie te hou, ons sal jou wys hoe om 'n telling op die doek te skryf.
Maak eers 'n telling komponent:
Voorbeeld
var myGamePiece;
var myObstacles = [];
var myScore;
function startGame() {
myGamePiece = new component(30, 30, "red", 10, 160);
myScore = new component("30px", "Consolas", "black", 280, 40, "text");
myGameArea.start();
}
Die sintaksis vir die skryf van teks op 'n doekelement is anders as om 'n reghoek te teken. Daarom moet ons die komponentkonstruktor noem deur 'n addisionele argument te gebruik, wat die konstruktor vertel dat hierdie komponent van die tipe "teks" is.
In die komponentkonstruktor toets ons of die komponent van die tipe "teks" is, en gebruik die
fillTextmetode in plaas van die fillRectmetode:
Voorbeeld
function component(width, height, color, x, y, type) {
this.type = type;
this.width = width;
this.height = height;
this.speedX = 0;
this.speedY = 0;
this.x = x;
this.y = y;
this.update = function() {
ctx = myGameArea.context;
if (this.type == "text") {
ctx.font = this.width + " " + this.height;
ctx.fillStyle = color;
ctx.fillText(this.text, this.x, this.y);
} else {
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
}
...
}
Uiteindelik voeg ons 'n paar kode by in die updateGameArea-funksie wat die partituur op die doek skryf. Ons gebruik die frameNoeiendom om die telling te tel:
Voorbeeld
function updateGameArea() {
var x, height, gap, minHeight, maxHeight, minGap, maxGap;
for (i = 0; i < myObstacles.length; i += 1) {
if (myGamePiece.crashWith(myObstacles[i])) {
myGameArea.stop();
return;
}
}
myGameArea.clear();
myGameArea.frameNo += 1;
if (myGameArea.frameNo == 1 || everyinterval(150)) {
x = myGameArea.canvas.width;
minHeight = 20;
maxHeight = 200;
height = Math.floor(Math.random()*(maxHeight-minHeight+1)+minHeight);
minGap = 50;
maxGap = 200;
gap = Math.floor(Math.random()*(maxGap-minGap+1)+minGap);
myObstacles.push(new component(10, height, "green", x, 0));
myObstacles.push(new component(10, x - height - gap, "green", x, height + gap));
}
for (i = 0; i < myObstacles.length; i += 1) {
myObstacles[i].speedX = -1;
myObstacles[i].newPos();
myObstacles[i].update();
}
myScore.text = "SCORE: " + myGameArea.frameNo;
myScore.update();
myGamePiece.newPos();
myGamePiece.update();
}