tutorial pengembangan web terbaru
 

Permainan Skor HTML


Menekan tombol untuk memindahkan kotak merah:








Menghitung Skor

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

Pertama membuat 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 dari menggambar persegi panjang. Oleh karena itu kita harus memanggil konstruktor komponen menggunakan argumen tambahan, mengatakan konstruktor bahwa komponen ini adalah tipe "text" .

Dalam konstruktor komponen kami menguji apakah komponen adalah jenis "text" , dan menggunakan fillText metode bukan fillRect metode:

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

Akhirnya kami menambahkan beberapa kode dalam fungsi updateGameArea yang menulis skor ke kanvas. Kami menggunakan frameNo properti 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();
}
Cobalah sendiri "