Scoring, Persistence, and the HUD

The Score class

A score is just a number with a couple of operations. The game wraps that in a small class:

class Score {
  constructor() {
    this.total = 0;        // coins (countable)
    this.score = 0;        // the running "score" you see on screen
  }

  addCoin() {
    this.total += 1;
    this.score += 100;     // each coin is worth 100 points
  }
}

The reason this is a class, not just a variable, is state plus behaviour (the Classes lesson). Every coin the player touches calls this.score.addCoin(), and the number goes up by exactly 100, in one place, so it's easy to tune.

The running score also grows over time. The game keeps a small timer and adds a little every tenth of a second, so running longer earns more even without collecting coins:

update(dt) {
  this.score += 10 * dt;   // 10 points per second, forever
}

• total counts coins; score is the big number.
• addCoin is a method, the behaviour lives with the data.

Saving the high score with localStorage

A game that forgets your best score every time you close the tab feels broken. localStorage is a tiny browser database that stores text and survives tab reloads.

class Score {
  constructor() {
    this.total = 0;
    this.score = 0;
    this.high = 0;
    this._load();
  }

  _load() {
    const saved = localStorage.getItem('high_score');
    this.high = saved ? parseInt(saved, 10) : 0;
  }

  _save() {
    localStorage.setItem('high_score', String(this.score));
  }

  addCoin() {
    this.total += 1;
    this.score += 100;
    if (this.score > this.high) {
      this.high = this.score;
      this._save();     // persist the new record
    }
  }
}

• localStorage.getItem('high_score'): read a value by name (returns a string, or null if never set).
• localStorage.setItem('high_score', value): write a value (the browser turns it into a string).
• parseInt(saved, 10): the stored value came back as a string ("4200"); convert it to a number.

The _ prefix on _load/_save is a convention meaning "this method is private, don't call it from elsewhere." The game only calls them itself.

Drawing score, then game over with a record

The HUD is just a couple of fillText calls. The game draws the current score and the saved best:

// HUD, drawn every frame during play.
ctx.fillStyle = COLORS.text;
ctx.font = '24px sans-serif';
ctx.textAlign = 'left';
ctx.fillText('Score: ' + Math.floor(score.score), 20, 34);
ctx.fillText('Coins: ' + score.total, 20, 64);
ctx.textAlign = 'right';
ctx.fillText('Best: ' + Math.floor(score.high), width - 20, 34);

• Math.floor(score.score): the score is a floating-point float; Math.floor makes it a clean integer to read.
• ctx.textAlign: 'left' for the score, 'right' for the best, both pinned to the screen edges.

When the player dies, the game over screen compares the final score to the stored best:

function gameOver(ctx, score, high) {
  ctx.fillText('GAME OVER', width / 2, height / 2 - 40);
  if (score.score >= high) {
    ctx.fillStyle = COLORS.accent;
    ctx.fillText('NEW BEST: ' + Math.floor(score.score), width / 2, height / 2 + 10);
  } else {
    ctx.fillText('Best: ' + Math.floor(high), width / 2, height / 2 + 10);
  }
}

The score >= high check, the game only flashes "NEW BEST" when you actually broke the record. this._save() (from the earlier lesson) already wrote the new record the instant the score first passed it.