Web API Development

[pkdev0101]

🎮 Timer + Highscore Leaderboard System
📌 Description

To make the Peppa Pig game more competitive, we will add a timer-based highscore and leaderboard system.

A timer starts when a level begins. When the level is completed, the timer stops and the score is recorded.

If the player fails, the timer pauses and resumes when they retry. This ensures only active gameplay time is counted.

A backend API will store scores and rank them on a leaderboard. The current highscore will be displayed on the level screen.

If a player beats the fastest time, an animation will appear showing a new high score.

🔊 Music Impact

This system affects how background music behaves during gameplay:

Music should play continuously while the timer is running
When the player fails (timer pauses), music should pause or fade out
When the player retries, music should resume smoothly
On level completion, music should transition to a victory sound
If a new highscore is achieved, a special sound effect should play

This keeps audio synced with gameplay states and improves immersion.

✅ Deliverables
Timer displayed on screen
Current highscore displayed
Timer stops on level completion
Timer pauses/resumes on retry
Backend API for leaderboard
New highscore animation + sound

%%js

// GAME_RUNNER: Peppa Pig Boss Battle + Music API

import GameControl from '/assets/js/GameEnginev1.1/essentials/GameControl.js';
import PeppaLevel1 from '/assets/js/projects/PeppaPigGame/levels/PeppaLevel1.js';
import PeppaLevel2 from '/assets/js/projects/PeppaPigGame/levels/PeppaLevel2.js';
import PeppaPowerUpMenu from '/assets/js/projects/PeppaPigGame/levels/PeppaPowerUpMenu.js';
import PeppaLevel3 from '/assets/js/projects/PeppaPigGame/levels/PeppaLevel3.js';

/*
class PeppaMusicApiController {
  constructor() {
    this.audio = null;
    this.started = false;
    this.endpoint = 'https://itunes.apple.com/search?term=peppa%20pig%20theme&entity=song&limit=10';
    this.userActivated = false;
    this.activateFromUserGesture = this.activateFromUserGesture.bind(this);
  }

  async fetchPreviewUrl() {
    const response = await fetch(this.endpoint);
    if (!response.ok) {
      throw new Error('API request failed (' + response.status + ')');
    }

    const data = await response.json();
    const tracks = (data && Array.isArray(data.results)) ? data.results : [];
    const track = tracks.find(item => item && item.previewUrl);

    if (!track || !track.previewUrl) {
      throw new Error('No playable preview URL found');
    }

    return track.previewUrl;
  }

  async startMusic() {
    if (this.started || !this.userActivated) return;

    try {
      const previewUrl = await this.fetchPreviewUrl();
      this.audio = new Audio(previewUrl);
      this.audio.volume = 0.35;
      this.audio.loop = true;
      await this.audio.play();
      this.started = true;
      this.removeGestureListeners();
    } catch (error) {
      console.warn('Music failed', error);
    }
  }

  activateFromUserGesture() {
    this.userActivated = true;
    this.startMusic();
  }

  addGestureListeners() {
    window.addEventListener('click', this.activateFromUserGesture, { once: true });
    window.addEventListener('keydown', this.activateFromUserGesture, { once: true });
    window.addEventListener('touchstart', this.activateFromUserGesture, { once: true });
  }

  removeGestureListeners() {
    window.removeEventListener('click', this.activateFromUserGesture);
    window.removeEventListener('keydown', this.activateFromUserGesture);
    window.removeEventListener('touchstart', this.activateFromUserGesture);
  }
}

const peppaMusicApi = new PeppaMusicApiController();
peppaMusicApi.addGestureListeners();
*/

export const gameLevelClasses = [
  PeppaLevel1,
  PeppaLevel2,
  PeppaPowerUpMenu,
  PeppaLevel3
];

export { GameControl };