feat: add rhythm game

Co-authored-by: Rob Cohen <rmacohen@users.noreply.github.com>
Co-authored-by: SG-SWE073 <SG-SWE073@users.noreply.github.com>
Co-authored-by: Gina Castromonte <GinaCastromonte@users.noreply.github.com>

https://replit.com/@remarkablemark/Rhythm-Jam-2024

Author: remarkablemark

README.md

@@ -2,7 +2,9 @@
 
 🎶 Rhythmism is a web rhythm game.
 
-The game was made for the [Rhythm Jam 2024](https://itch.io/jam/rhythm-jam-2024), which the theme was `Divergence`.
+The game was made for the [Rhythm Jam 2024](https://itch.io/jam/rhythm-jam-2024), which the theme was `Divergence`:
+
+> a difference between two or more things, attitudes, or opinions.
 
 Play the game on:
 
@@ -25,6 +27,7 @@ Play the game on:
 
 - [Excalidraw](https://excalidraw.com/#json=4xsd2WQeFiejrdBQkalCR,GLv9eoVsLsWhkXYKI1gCLA)
 - [Prototype 1](https://replit.com/@remarkablemark/Rhythm-Game)
+- [Prototype 2](https://replit.com/@remarkablemark/Rhythm-Jam-2024)
 
 ## Stack
 

index.html

@@ -46,6 +46,7 @@
       import kaboom from 'kaboom';
 
       kaboom({
+        background: [255, 255, 255],
         width: 360,
         height: 480,
       });

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "rhythmism",
   "version": "1.0.0-alpha",
-  "description": "A template for building Kaboom games.",
+  "description": "Rhythmism is a web rhythm game.",
   "author": "Mark <mark@remarkablemark.org>",
   "scripts": {
     "build": "npm run clean && vite build",
@@ -23,6 +23,7 @@
     "@commitlint/config-conventional": "18.6.2",
     "@typescript-eslint/eslint-plugin": "7.0.1",
     "@typescript-eslint/parser": "7.0.1",
+    "easytimer.js": "4.6.0",
     "esbuild": "0.20.0",
     "eslint": "8.56.0",
     "eslint-plugin-prettier": "5.1.3",

package.json

@@ -0,0 +1,49 @@
+export enum Direction {
+  left = 'directions/PurpleLeftArrow',
+  down = 'directions/BlueDownArrow',
+  up = 'directions/GreenUpArrow',
+  right = 'directions/RedRightArrow',
+}
+
+export type DirectionKey = 'left' | 'down' | 'up' | 'right';
+
+export const directions = Object.keys(Direction);
+
+export enum Key {
+  left = 'keys/GreyLeftArrow',
+  down = 'keys/GreyDownArrow',
+  up = 'keys/GreyUpArrow',
+  right = 'keys/GreyRightArrow',
+}
+
+export enum Scene {
+  game = 'game',
+  load = 'load',
+  pause = 'pause',
+  preload = 'preload',
+  start = 'start',
+}
+
+export enum Sprite {
+  background = 'background',
+}
+
+export enum Sound {
+  score = 'score',
+  music = 'music',
+  longPress = 'longPress',
+}
+
+export enum Tag {
+  left = 'left',
+  down = 'down',
+  up = 'up',
+  right = 'right',
+  direction = 'direction',
+}
+
+export enum accuracyRadii {
+  perfect = 10,
+  excellent = 20,
+  good = 30,
+}

public/sounds/longPress.mp3

@@ -0,0 +1,39 @@
+import type { Vec2 } from 'kaboom';
+
+export function addButton(txt: string, position: Vec2, callback: () => void) {
+  // add a parent background object
+  const button = add([
+    rect(300, 80, { radius: 8 }),
+    pos(position),
+    area(),
+    scale(1),
+    anchor('center'),
+    outline(4),
+    color(),
+  ]);
+
+  // add a child object that displays the text
+  button.add([text(txt), anchor('center'), color(0, 0, 0)]);
+
+  // onHoverUpdate() comes from area() component
+  // it runs every frame when the object is being hovered
+  button.onHoverUpdate(() => {
+    const t = time() * 10;
+    button.color = hsl2rgb((t / 10) % 1, 0.6, 0.7);
+    button.scale = vec2(1.1);
+    setCursor('pointer');
+  });
+
+  // onHoverEnd() comes from area() component
+  // it runs once when the object stopped being hovered
+  button.onHoverEnd(() => {
+    button.scale = vec2(1);
+    button.color = rgb();
+  });
+
+  // onClick() comes from area() component
+  // it runs once when the object is clicked
+  button.onClick(callback);
+
+  return button;
+}

public/sounds/music.mp3 public/sounds/sinbad.mp3

@@ -0,0 +1,5 @@
+export * from './buttons';
+export * from './keys';
+export * from './pause';
+export * from './score';
+export * from './timer';

public/sounds/music.webm public/sounds/sinbad.webm

@@ -0,0 +1,87 @@
+import type { AudioPlay } from 'kaboom';
+
+import { DirectionKey, directions, Key, Sound, Tag } from '../constants';
+import { getPosition } from '../helpers';
+import { addScore } from './score';
+
+const LONG_PRESS_MILLISECONDS = 500;
+
+export function addKeys() {
+  const keyMap = {
+    left: add([
+      sprite(Key.left),
+      getPosition('left'),
+      anchor('center'),
+      area(),
+      opacity(0.5),
+      Tag.left,
+    ]),
+
+    down: add([
+      sprite(Key.down),
+      getPosition('down'),
+      anchor('center'),
+      area(),
+      opacity(0.5),
+      Tag.down,
+    ]),
+
+    up: add([
+      sprite(Key.up),
+      getPosition('up'),
+      anchor('center'),
+      area(),
+      opacity(0.5),
+      Tag.up,
+    ]),
+
+    right: add([
+      sprite(Key.right),
+      getPosition('right'),
+      anchor('center'),
+      area(),
+      opacity(0.5),
+      Tag.right,
+    ]),
+  };
+
+  const incrementScore = addScore();
+  let music: AudioPlay | undefined;
+
+  (directions as DirectionKey[]).forEach((key) => {
+    onCollideUpdate(key, Tag.direction, () => {
+      if (isKeyPressed(key)) {
+        addKaboom(center());
+        incrementScore();
+      }
+    });
+
+    const releaseMap: Record<string, number> = {};
+
+    onKeyPress(key, () => {
+      keyMap[key].opacity = 1;
+
+      releaseMap[key] = Date.now();
+      play(Sound.score, {
+        volume: 0.5,
+      });
+    });
+
+    onKeyDown(key, () => {
+      if (!music && Date.now() - releaseMap[key] > LONG_PRESS_MILLISECONDS) {
+        music = play(Sound.longPress, {
+          volume: 0.5,
+        });
+      }
+    });
+
+    onKeyRelease(key, () => {
+      keyMap[key].opacity = 0.5;
+
+      if (music) {
+        music.paused = true;
+        music = undefined;
+      }
+    });
+  });
+}

public/sounds/tranquil-wave.mp3

@@ -0,0 +1,53 @@
+import type { AudioPlay, GameObj, TimerComp, TweenController } from 'kaboom';
+
+export function addPause(game: GameObj<TimerComp>, music: AudioPlay) {
+  let curTween: TweenController;
+
+  onKeyPress((key) => {
+    if (!['escape', 'p'].includes(key)) {
+      return;
+    }
+
+    music.paused = !music.paused;
+    game.paused = !game.paused;
+
+    if (curTween) {
+      curTween.cancel();
+    }
+
+    curTween = tween(
+      pauseMenu.pos,
+      game.paused ? center() : center().add(0, 700),
+      1,
+      (p) => (pauseMenu.pos = p),
+      easings.easeOutElastic,
+    );
+
+    if (game.paused) {
+      pauseMenu.hidden = false;
+    } else {
+      curTween.onEnd(() => {
+        pauseMenu.hidden = true;
+      });
+    }
+  });
+
+  const pauseMenu = add([
+    rect(300, 400),
+    color(255, 255, 255),
+    outline(4),
+    anchor('center'),
+    pos(center().add(0, 700)),
+  ]);
+
+  pauseMenu.hidden = true;
+
+  pauseMenu.add([
+    text('Paused', {
+      size: 36,
+    }),
+    color(0, 0, 0),
+    center(),
+    anchor('center'),
+  ]);
+}

public/sounds/tranquil-wave.webm

@@ -0,0 +1,11 @@
+export function addScore() {
+  const scoreDisplay = add([
+    text('0', { size: 32 }),
+    pos(center().x, 5),
+    color(255, 255, 255),
+  ]);
+
+  return (incrementBy = 1) => {
+    scoreDisplay.text = String(parseInt(scoreDisplay.text) + incrementBy);
+  };
+}

public/sprites/background/GuitarCity.png

@@ -0,0 +1,40 @@
+import { getTime, startTimer } from '../helpers';
+
+export function addTimer() {
+  const timerDisplay = add([
+    text('00:00:00:0', { size: 16 }),
+    pos(width() - 100, 0),
+    color(255, 255, 255),
+  ]);
+
+  startTimer((time) => {
+    timerDisplay.text = time;
+  });
+
+  const map: Record<
+    string,
+    { direction: string; time: number; duration?: number }
+  > = {};
+
+  onKeyPress((key) => {
+    const direction = {
+      direction: key,
+      time: getTime(),
+    };
+    map[key] = direction;
+  });
+
+  onKeyRelease((key) => {
+    const time = getTime();
+    const direction = {
+      direction: key,
+      time,
+      duration: Number((time - map[key].time).toFixed(1)),
+    };
+
+    if (debug.inspect) {
+      // eslint-disable-next-line no-console
+      console.log(JSON.stringify(direction));
+    }
+  });
+}