Score du jeu
Appuyez sur les boutons pour déplacer le carré rouge :
Compter le score
Il existe de nombreuses façons de conserver le score dans un jeu, nous allons vous montrer comment écrire un score sur la toile.
Commencez par créer un composant de partition :
Exemple
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();
}
La syntaxe pour écrire du texte sur un élément canvas est différente de dessiner un rectangle. Nous devons donc appeler le constructeur du composant en utilisant un argument supplémentaire, indiquant au constructeur que ce composant est de type "texte".
Dans le constructeur du composant, nous testons si le composant est de type "texte", et utilisons la
fillTextméthode au lieu de la fillRectméthode :
Exemple
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);
}
}
...
}
Enfin, nous ajoutons du code dans la fonction updateGameArea qui écrit le score sur le canevas. Nous utilisons la frameNopropriété pour compter le score :
Exemple
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();
}