Skor Permainan

❮ Sebelumnya Berikutnya ❯

Tekan tombol untuk memindahkan kotak merah:

Hitung Skornya

Ada banyak cara untuk menjaga skor dalam permainan, kami akan menunjukkan cara menulis skor ke kanvas.

Pertama buat komponen skor:

Contoh

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

Sintaks untuk menulis teks pada elemen kanvas berbeda dengan menggambar persegi panjang. Oleh karena itu kita harus memanggil konstruktor komponen menggunakan argumen tambahan, memberitahu konstruktor bahwa komponen ini bertipe "teks".

Dalam konstruktor komponen, kami menguji apakah komponen bertipe "teks", dan menggunakan fillTextmetode sebagai ganti fillRectmetode:

Contoh

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

Terakhir kita tambahkan beberapa kode di fungsi updateGameArea yang menulis skor ke kanvas. Kami menggunakan frameNoproperti untuk menghitung skor:

Contoh

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

❮ Sebelumnya Berikutnya ❯