kgames

game.js (15435B)

---

 const COLORS = ['#E63946', '#1D7CF2', '#FFD23F', '#2EC4B6'];
 const GOAL   = 10;
 const CDN    = 'https://cdn.jsdelivr.net/gh/jdecked/twemoji@15.1.0/assets/svg/';
 
 // ~1-minute song: 32-step sections (eighth notes at 128 BPM) concatenated so
 // the loop is long enough not to grate. 'A' is the original circus fanfare;
 // B–D are new sections in the same F-major character. '.' = rest. Harmony is
 // a diatonic third above the melody (it plays during the success jingle).
 const N = s => s.trim().split(/\s+/).map(t => (t === '.' ? null : t));
 
 const MEL = {
   A: N(`F4 C5 F5 C5  F4 A4 C5 A4   Bb4 D5 F5 Bb5  F5 D5 Bb4 F4
        C5 E5 G5 C6  G5 E5 C5 E5   F5 D5 Bb4 F4   C5 F5 A5 F5`),
   B: N(`F5 E5 D5 C5  D5 E5 F5 A5   G5 F5 E5 D5    C5 D5 E5 C5
        A5 G5 F5 G5  A5 C6 A5 F5   G5 E5 C5 E5    F5 A5 G5 F5`),
   C: N(`D5 F5 A5 D6  A5 F5 D5 F5   C5 E5 G5 C6    G5 E5 C5 E5
        Bb4 D5 F5 Bb5  F5 D5 Bb4 D5   C5 F5 A5 C6  A5 G5 F5 F5`),
   D: N(`A4 Bb4 C5 D5  C5 Bb4 A4 F4   G4 A4 Bb4 C5  Bb4 A4 G4 E4
        F4 A4 C5 F5   E5 C5 A4 C5    D5 C5 Bb4 A4  G4 C5 E5 F5`),
 };
 const HAR = {
   A: N(`A4 E5 A5 E5  A4 C5 E5 C5   D5 F5 A5 D6    A5 F5 D5 A4
        E5 G5 Bb5 E6  Bb5 G5 E5 G5  A5 F5 D5 A4    E5 A5 C6 A5`),
   B: N(`A5 G5 F5 E5  F5 G5 A5 C6   Bb5 A5 G5 F5   E5 F5 G5 E5
        C6 Bb5 A5 Bb5  C6 E6 C6 A5  Bb5 G5 E5 G5   A5 C6 Bb5 A5`),
   C: N(`F5 A5 C6 F6  C6 A5 F5 A5   E5 G5 Bb5 E6   Bb5 G5 E5 G5
        D5 F5 A5 D6  A5 F5 D5 F5   E5 A5 C6 E6    C6 Bb5 A5 A5`),
   D: N(`C5 D5 E5 F5  E5 D5 C5 A4   Bb4 C5 D5 E5   D5 C5 Bb4 G4
        A4 C5 E5 A5  G5 E5 C5 E5   F5 E5 D5 C5    Bb4 E5 G5 A5`),
 };
 const BAS = {
   A: N(`F2 . . . . . . .  Bb2 . . . C3 . . .   F2 . . . . . . .  Bb2 . . . C3 . . .`),
   B: N(`F2 . . . . . . .  C3 . . . . . . .    F2 . . . . . . .  C3 . . . F2 . . .`),
   C: N(`D3 . . . . . . .  C3 . . . . . . .    Bb2 . . . . . . . C3 . . . F2 . . .`),
   D: N(`F2 . . . . . . .  C3 . . . . . . .    F2 . . . . . . .  Bb2 . . . C3 . . .`),
 };
 const ORDER   = ['A','B','A','C','D','B','C','A'];
 const MELODY  = ORDER.flatMap(k => MEL[k]);
 const HARMONY = ORDER.flatMap(k => HAR[k]);
 const BASS    = ORDER.flatMap(k => BAS[k]);
 
 class AnimalSpellScene extends Phaser.Scene {
   constructor() {
     super({ key: 'AnimalSpellScene' });
     this.audio         = null;
     this.currentAnimal = null;
     this.roundColor    = null;
     this.wordLetters   = [];
     this.letterIndex   = 0;
     this.wrongCount    = 0;
     this.accepting     = false;
     this.wordsSpelled  = 0;
     this.winShowing    = false;
     this.progressGfx   = null;
     this.winElements   = [];
     this.guessTexts    = [];
     this.animalImg     = null;
     this.instrText     = null;
     this.hintText      = null;
     this._imgScale     = 1;
     this._idleTweens   = [];
     this._deck         = [];
     this._slotTexts    = [];
     this._slotGfx      = null;
   }
 
   preload() {
     KGames.bakeFireworksAtlas(this);
     AnimalSpellLib.ANIMALS.forEach(a => {
       this.load.svg(a.key, CDN + a.codepoint + '.svg', { width: 256, height: 256 });
     });
   }
 
   create() {
     window.__AS_SCENE__ = this;
     const W = this.scale.width;
     const H = this.scale.height;
 
     this.audio       = new KGames.AudioSystem({ melody: MELODY, harmony: HARMONY, bass: BASS });
     this.progressGfx = this.add.graphics();
     this._slotGfx    = this.add.graphics();
 
     this.instrText = this.add.text(W / 2, H * 0.14, '', {
       fontFamily: 'Fredoka, sans-serif',
       color:      '#888888',
     }).setOrigin(0.5, 0.5);
 
     this.animalImg = this.add.image(W / 2, H * 0.36, '__DEFAULT').setVisible(false);
 
     this.hintText = this.add.text(W / 2, H * 0.80, '', {
       fontFamily: 'Fredoka, sans-serif',
       fontStyle:  'bold',
     }).setOrigin(0.5, 0.5).setVisible(false);
 
     this.scale.on('resize', this.onResize, this);
     this.input.keyboard.on('keydown', this.onKey, this);
 
     document.getElementById('btn-music').addEventListener('click', () => this.audio.toggleMusic());
     document.getElementById('btn-sfx').addEventListener('click', () => this.audio.toggleSfx());
 
     this.newRound();
     this.applyLayout(W, H);
   }
 
   applyLayout(W, H) {
     const instrSize = Math.max(16, Math.floor(H * 0.055));
     const hintSize  = Math.max(40, Math.floor(H * 0.12));
     const imgSize   = Math.max(80, Math.floor(H * 0.32));
 
     this.instrText.setStyle({ fontSize: instrSize + 'px' }).setPosition(W / 2, H * 0.14);
 
     const wasAccepting = this.accepting;
     this._stopIdleAnimation();
 
     this._imgScale = imgSize / 256;
     if (this.animalImg.visible) {
       this.animalImg.setPosition(W / 2, H * 0.36).setScale(this._imgScale);
     }
 
     if (wasAccepting) this._startIdleAnimation();
 
     this.hintText.setStyle({ fontSize: hintSize + 'px' }).setPosition(W / 2, H * 0.80);
 
     KGames.drawProgressBar(this.progressGfx, W, H, this.wordsSpelled, GOAL);
     this._redrawSlots(W, H);
     this.reflowGuesses(W, H);
   }
 
   onResize(gameSize) {
     this.applyLayout(gameSize.width, gameSize.height);
   }
 
   _slotMetrics(W, H) {
     const n = this.wordLetters.length;
     if (n === 0) return { startX: 0, slotW: 40, y: H * 0.67, fontSize: 24 };
     const maxSlotW = Math.floor(W / (n + 1));
     const slotW    = Math.min(maxSlotW, Math.floor(H * 0.09));
     const startX   = (W - slotW * n) / 2 + slotW / 2;
     const y        = H * 0.67;
     const fontSize = Math.max(20, Math.min(Math.floor(slotW * 0.75), Math.floor(H * 0.07)));
     return { startX, slotW, y, fontSize };
   }
 
   _buildSlots(W, H) {
     this._slotTexts.forEach(t => { if (t.active) t.destroy(); });
     this._slotTexts = [];
 
     const { startX, slotW, y, fontSize } = this._slotMetrics(W, H);
     this.wordLetters.forEach((_, i) => {
       const x = startX + i * slotW;
       const t = this.add.text(x, y, '', {
         fontFamily: 'Fredoka, sans-serif',
         fontSize:   fontSize + 'px',
         fontStyle:  'bold',
         color:      '#ffffff',
       }).setOrigin(0.5, 0.5).setVisible(false);
       this._slotTexts.push(t);
     });
   }
 
   _redrawSlots(W, H) {
     if (this._slotTexts.length === 0) return;
     const { startX, slotW, y, fontSize } = this._slotMetrics(W, H);
     const underY  = y + Math.floor(fontSize * 0.6);
     const lineLen = Math.floor(slotW * 0.72);
     const lineW   = Math.max(2, Math.floor(fontSize * 0.07));
 
     this._slotGfx.clear();
     this._slotGfx.lineStyle(lineW, 0x555577, 1);
 
     this._slotTexts.forEach((t, i) => {
       const x = startX + i * slotW;
       t.setPosition(x, y).setStyle({ fontSize: fontSize + 'px' });
 
       if (i < this.letterIndex) {
         t.setText(this.wordLetters[i]).setColor('#ffffff').setVisible(true);
       } else if (i === this.letterIndex) {
         if (this.wrongCount === 0) {
           t.setVisible(false);
           this._slotGfx.beginPath();
           this._slotGfx.moveTo(x - lineLen / 2, underY);
           this._slotGfx.lineTo(x + lineLen / 2, underY);
           this._slotGfx.strokePath();
         } else {
           // Hint: show letter in muted color, underline disappears
           t.setText(this.wordLetters[i]).setColor('#888888').setVisible(true);
         }
       } else {
         t.setVisible(false);
         this._slotGfx.beginPath();
         this._slotGfx.moveTo(x - lineLen / 2, underY);
         this._slotGfx.lineTo(x + lineLen / 2, underY);
         this._slotGfx.strokePath();
       }
     });
   }
 
   _startIdleAnimation() {
     const { width: W } = this.scale;
     const swayAmt = Math.max(6, Math.floor(W * 0.012));
     this._idleTweens = [
       this.tweens.add({
         targets:  this.animalImg,
         x:        this.animalImg.x + swayAmt,
         ease:     'Sine.InOut',
         duration: 1600,
         yoyo:     true,
         repeat:   -1,
       }),
       this.tweens.add({
         targets:  this.animalImg,
         scaleX:   this._imgScale * 1.06,
         scaleY:   this._imgScale * 1.06,
         ease:     'Sine.InOut',
         duration: 1100,
         yoyo:     true,
         repeat:   -1,
       }),
     ];
   }
 
   _stopIdleAnimation() {
     this._idleTweens.forEach(t => { try { t.destroy(); } catch (_) {} });
     this._idleTweens = [];
   }
 
   newRound() {
     this._stopIdleAnimation();
 
     if (this._deck.length === 0) {
       this._deck = AnimalSpellLib.shuffleAnimals(Math.random);
     }
     this.currentAnimal = this._deck.pop();
     this.wordLetters   = AnimalSpellLib.getWordLetters(this.currentAnimal);
     this.letterIndex   = 0;
     this.wrongCount    = 0;
 
     const available = COLORS.filter(c => c !== this.roundColor);
     this.roundColor = available[Math.floor(Math.random() * available.length)];
 
     this.hintText.setVisible(false);
     this.instrText.setText('Spell the animal!').setColor('#888888');
 
     const { width: W, height: H } = this.scale;
     const imgSize = Math.max(80, Math.floor(H * 0.32));
     this._imgScale = imgSize / 256;
 
     this._buildSlots(W, H);
     this._redrawSlots(W, H);
 
     if (this.textures.exists(this.currentAnimal.key)) {
       this.animalImg
         .setTexture(this.currentAnimal.key)
         .setPosition(W / 2, H * 0.36)
         .setScale(this._imgScale * 0.3)
         .setVisible(true);
       this.tweens.add({
         targets:  this.animalImg,
         scaleX:   this._imgScale,
         scaleY:   this._imgScale,
         ease:     'Back.Out',
         duration: 250,
         onComplete: () => {
           this.accepting = true;
           this._startIdleAnimation();
         },
       });
     } else {
       this.animalImg.setVisible(false);
       this.accepting = true;
     }
 
     this.audio.speak(this.currentAnimal.name);
   }
 
   onKey(event) {
     if (this.winShowing) return;
     if (!this.accepting) return;
     if (event.key.length !== 1 || !/[a-z]/i.test(event.key)) return;
 
     this.audio.initMusic();
 
     const pressed = event.key.toUpperCase();
     if (pressed === this.wordLetters[this.letterIndex]) {
       this.onLetterCorrect();
     } else {
       this.onLetterWrong(pressed);
     }
   }
 
   onLetterCorrect() {
     this.accepting = false;
     this.audio.playPing();
 
     this.hintText.setVisible(false);
     this.instrText.setText('Spell the animal!').setColor('#888888');
     this.wrongCount = 0;
 
     const { width: W, height: H } = this.scale;
     const { startX, slotW, y } = this._slotMetrics(W, H);
     const slotX = startX + this.letterIndex * slotW;
 
     // Pop the confirmed letter into the slot
     const slot = this._slotTexts[this.letterIndex];
     slot.setText(this.wordLetters[this.letterIndex])
       .setColor('#ffffff')
       .setVisible(true)
       .setScale(0.3)
       .setAlpha(0);
     this.tweens.add({
       targets: slot,
       scaleX: 1, scaleY: 1, alpha: 1,
       ease:    'Back.Out',
       duration: 180,
     });
 
     KGames.burstConfetti(this, slotX, y);
 
     this.letterIndex++;
     this._redrawSlots(W, H);
 
     this.guessTexts.forEach(obj => { this.tweens.killTweensOf(obj); obj.destroy(); });
     this.guessTexts = [];
 
     if (this.letterIndex >= this.wordLetters.length) {
       this.time.delayedCall(400, () => this.onWordComplete());
     } else {
       this.time.delayedCall(200, () => { this.accepting = true; });
     }
   }
 
   onWordComplete() {
     this._stopIdleAnimation();
     this.audio.playSuccess();
     this.audio.playSuccessJingle();
 
     const { width: W, height: H } = this.scale;
     KGames.burstConfetti(this, W / 2, H * 0.36);
 
     // Flash all slots in the round color
     this._slotTexts.forEach(t => t.setColor(this.roundColor));
     this.audio.speak(this.currentAnimal.name);
 
     this.wordsSpelled++;
     KGames.drawProgressBar(this.progressGfx, W, H, this.wordsSpelled, GOAL);
 
     if (this.wordsSpelled >= GOAL) {
       this.time.delayedCall(1500, () => {
         this.winShowing = true;
         this.accepting  = false;
         this.winElements = KGames.showWinScreen(this, {
           title:       'Amazing!',
           subtitle:    'You can spell all the animals!',
           audio:       this.audio,
           onPlayAgain: () => this.resetGame(),
         });
       });
     } else {
       this.time.delayedCall(1500, () => {
         this.newRound();
         this.applyLayout(this.scale.width, this.scale.height);
       });
     }
   }
 
   onLetterWrong(pressed) {
     this.audio.playBong();
     this.audio.playFailLick();
     this.wrongCount++;
     this.updateHints();
     this.addGuessLetter(pressed);
   }
 
   updateHints() {
     const { width: W, height: H } = this.scale;
     const hintSize      = Math.max(40, Math.floor(H * 0.12));
     const currentLetter = this.wordLetters[this.letterIndex];
 
     if (this.wrongCount === 1) {
       // Reveal the current letter in the slot as a hint
       this._redrawSlots(W, H);
       this.audio.speak(this.currentAnimal.name);
     } else if (this.wrongCount >= 2) {
       // Big letter hint below + instruction update
       this.hintText
         .setText(currentLetter)
         .setStyle({ fontSize: hintSize + 'px', color: this.roundColor })
         .setPosition(W / 2, H * 0.80)
         .setVisible(true);
       this.instrText.setText('Press  ' + currentLetter).setColor(this.roundColor);
       this.audio.speak(currentLetter);
     }
   }
 
   addGuessLetter(char) {
     const { width: W, height: H } = this.scale;
     const size = Math.max(20, Math.floor(H * 0.10));
 
     const text = this.add.text(W / 2, H * 0.88, char, {
       fontFamily: 'Fredoka, sans-serif',
       fontSize:   size + 'px',
       fontStyle:  'bold',
       color:      '#cc4444',
     }).setOrigin(0.5).setAlpha(0).setScale(0.3);
 
     this.tweens.add({
       targets: text,
       scaleX: 1, scaleY: 1, alpha: 1,
       ease:   'Back.Out',
       duration: 150,
     });
 
     this.guessTexts.push(text);
     this.reflowGuesses(W, H);
 
     this.time.delayedCall(1200, () => {
       if (!text.active) return;
       this.tweens.add({
         targets: text,
         alpha: 0, scaleX: 0.2, scaleY: 0.2,
         duration: 200,
         onComplete: () => {
           text.destroy();
           this.guessTexts = this.guessTexts.filter(t => t !== text);
           this.reflowGuesses(this.scale.width, this.scale.height);
         },
       });
     });
   }
 
   reflowGuesses(W, H) {
     const n = this.guessTexts.length;
     if (n === 0) return;
     const size    = Math.max(20, Math.floor(H * 0.10));
     const spacing = size * 1.15;
     const startX  = W / 2 - ((n - 1) * spacing) / 2;
     this.guessTexts.forEach((obj, i) => {
       obj.setPosition(startX + i * spacing, H * 0.88);
       obj.setStyle({ fontSize: size + 'px' });
     });
   }
 
   resetGame() {
     this._stopIdleAnimation();
 
     this.winElements.forEach(el => { if (el.active) el.destroy(); });
     this.winElements = [];
     this.winShowing  = false;
 
     this._slotTexts.forEach(t => { if (t.active) t.destroy(); });
     this._slotTexts = [];
 
     this.guessTexts.forEach(obj => { if (obj.active) obj.destroy(); });
     this.guessTexts = [];
 
     this.wordsSpelled  = 0;
     this.currentAnimal = null;
     this.roundColor    = null;
     this.letterIndex   = 0;
     this.wrongCount    = 0;
     this._deck         = [];
 
     const { width: W, height: H } = this.scale;
     KGames.drawProgressBar(this.progressGfx, W, H, this.wordsSpelled, GOAL);
     this.newRound();
     this.applyLayout(W, H);
   }
 }
 
 window.__KG_GAME__ = new Phaser.Game({
   type:   Phaser.AUTO,
   parent: 'game-container',
   backgroundColor: '#1A1A2E',
   scene:  AnimalSpellScene,
   scale: {
     mode:   Phaser.Scale.RESIZE,
     width:  '100%',
     height: '100%',
   },
   render: { preserveDrawingBuffer: true },
 });