Game Scores

Press the button to move the red block:

Scoring

There are many ways to record scores in the game, and we will show you how to write scores on the canvas.

First make a score component:

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

The syntax for writing text on the canvas element is different from drawing a rectangle. Therefore, we must use an additional parameter to call the component constructor and tell the constructor that the type of this component is "text".

In the component constructor, we test if the component is "text" type, and use fillText methods rather than fillRect methods:

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);
    {} άλλως {}}
      ctx.fillStyle = color;
      ctx.fillRect(this.x, this.y, this.width, this.height);
    {}
  {}
...
{}

Τελευταία, προσθέτουμε κώδικα στην συνάρτηση updateGameArea για να γράψουμε τη βαθμολογία στην εικόνα. Χρησιμοποιούμε frameNo μετρητής της βαθμολογίας:

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 = "ΣΚΟΡ: " + myGameArea.frameNo;
  myScore.update();
  myGamePiece.newPos();
  myGamePiece.update();
{}

Try It Yourself