Spel poäng

Tryck på knappen för att flytta den röda kuben:

Poäng

Det finns många sätt att registrera poäng i spelet, vi kommer att visa hur du skriver ut poängen på canvas.

Först skapa en poängkomponent:

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

Sättet att skriva ut text på canvas-elementet är annorlunda än att ritas en rektangel. Därför måste vi använda en extra parameter för att anropa komponentens konstruktör och tala om för konstruktören att komponentens typ är "text".

I komponentens konstruktör testar vi om komponenten är "text" Typ, och använd fillText Metod istället för fillRect Metod:

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.fyllfärg = färg;
      ctx.fillText(this.text, this.x, this.y);
    } annars {}}}
      ctx.fyllfärg = färg;
      ctx.fillRect(this.x, this.y, this.bredd, this.höjd);
    }
  }
...
}

Till slut lägger vi till något kod i updateGameArea-funktionen för att skriva poängen på canvas. Vi använder frameNo egenskaper för att beräkna poäng:

function uppdateraSpelområde() {
  var x, höjd, avstånd, minHöjd, maxHöjd, minAvstånd, maxAvstånd;
  för (i = 0; i < myObstacles.length; i += 1) {
    om (myGamePiece.kolliderarMed(myObstacles[i])) {
      myGameArea.stoppa();
      return;
    }
  }
  myGameArea.töm();
  myGameArea.frameNo += 1;
  om (myGameArea.frameNo == 1 || varjeIntervall(150)) {
    x = myGameArea.canvas.bredd;
    minHöjd = 20;
    maxHöjd = 200;
    höjd = Math.floor(Math.random()*(maxHöjd-minHöjd+1)+minHöjd);
    minAvstånd = 50;
    maxAvstånd = 200;
    avstånd = Math.floor(Math.random()*(maxAvstånd-minAvstånd+1)+minAvstånd);
    myObstacles.push(new component(10, höjd, "grön", x, 0));
    myObstacles.push(new component(10, x - höjd - avstånd, "grön", x, höjd + avstånd));
  }
  för (i = 0; i < myObstacles.length; i += 1) {
    myObstacles[i].hastighetX = -1;
    myObstacles[i].nyPosition();
    myObstacles[i].uppdatera();
  }
  myScore.text = "POÄNG: " + myGameArea.frameNo;
  myScore.update();
  myGamePiece.newPos();
  myGamePiece.update();
}

Prova själv