From a212b9751ac6bba0fb8b617b08b1af034c4cb437 Mon Sep 17 00:00:00 2001
From: Karthikeya1500 <karukarthikeya1111@gmail.com>
Date: Mon, 10 Nov 2025 21:52:55 +0530
Subject: [PATCH 1/2] Add new p5.js example: Survive the Horde

---
 examples/javascript_game/README.md  |  52 +++++++
 examples/javascript_game/game.css   |  34 +++++
 examples/javascript_game/game.js    | 229 ++++++++++++++++++++++++++++
 examples/javascript_game/index.html |  42 +++++
 4 files changed, 357 insertions(+)
 create mode 100644 examples/javascript_game/README.md
 create mode 100644 examples/javascript_game/game.css
 create mode 100644 examples/javascript_game/game.js
 create mode 100644 examples/javascript_game/index.html

diff --git a/examples/javascript_game/README.md b/examples/javascript_game/README.md
new file mode 100644
index 0000000000..c95a8eaca9
--- /dev/null
+++ b/examples/javascript_game/README.md
@@ -0,0 +1,52 @@
+# JavaScript-Game
+# Survive the Horde 🧟‍♂️
+
+A simple JavaScript + p5.js survival shooter game where you must defend yourself from endless waves of enemies approaching from all directions. Use your reflexes to shoot and survive as long as possible!
+
+---
+
+## 🎮 How to Play
+
+- Use **Arrow Keys** to move the player.
+- Press **Spacebar** to shoot bullets in all four directions.
+- Each enemy (zombie) destroyed increases your **score**.
+- The game ends when an enemy touches you.
+- Your final score will be displayed when the game is over.
+
+---
+
+## 🧠 Game Logic Overview
+
+- The player (blue square) stays within the play area.
+- Enemies (green squares) continuously spawn and move toward the player.
+- Bullets (yellow dots) move outward when you press the Spacebar.
+- The game tracks:
+  - Active enemies
+  - Bullets fired
+  - Collision detection (bullet–enemy and enemy–player)
+  - Score updates and game-over logic
+
+---
+
+## 🧩 Technologies Used
+
+- **HTML5** — structure of the game page  
+- **CSS3** — simple dark theme and game layout  
+- **JavaScript (ES6)** — game logic, movement, and collisions  
+- **[p5.js](https://p5js.org/)** — for rendering and animation loop
+
+---
+
+## 🚀 How to Run Locally
+
+### Option 1 — Run with VS Code (Recommended)
+1. Open this folder in VS Code  
+2. Right-click `index.html`  
+3. Choose **“Open with Live Server”**  
+4. Play at `http://127.0.0.1:5500/examples/javascript_game/`
+
+### Option 2 — Run with Node.js
+```bash
+cd examples/javascript_game
+npx serve
+
diff --git a/examples/javascript_game/game.css b/examples/javascript_game/game.css
new file mode 100644
index 0000000000..efc84be694
--- /dev/null
+++ b/examples/javascript_game/game.css
@@ -0,0 +1,34 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    background: black;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    overflow: hidden;
+}
+
+#gameContainer {
+    position: relative;
+}
+
+canvas {
+    background: #222;
+    display: block;
+    border: 2px solid white;
+}
+
+#score {
+    position: absolute;
+    top: 10px;
+    left: 50%;
+    transform: translateX(-50%);
+    font-size: 20px;
+    color: white;
+}
+
diff --git a/examples/javascript_game/game.js b/examples/javascript_game/game.js
new file mode 100644
index 0000000000..2a475054fe
--- /dev/null
+++ b/examples/javascript_game/game.js
@@ -0,0 +1,229 @@
+const canvas = document.getElementById("gameCanvas");
+const ctx = canvas.getContext("2d");
+
+canvas.width = 800;
+canvas.height = 600;
+
+class Player {
+    constructor() {
+        this.reset();
+    }
+
+    reset() {
+        this.x = canvas.width / 2;
+        this.y = canvas.height / 2;
+        this.size = 30;
+        this.color = "cyan";
+        this.speed = 5;
+    }
+
+    draw() {
+        ctx.fillStyle = this.color;
+        ctx.fillRect(this.x, this.y, this.size, this.size);
+    }
+
+    move(dirX, dirY) {
+        if (this.x + dirX >= 0 && this.x + this.size + dirX <= canvas.width) {
+            this.x += dirX;
+        }
+        if (this.y + dirY >= 0 && this.y + this.size + dirY <= canvas.height) {
+            this.y += dirY;
+        }
+    }
+}
+
+class Bullet {
+    constructor(x, y, dirX, dirY) {
+        this.x = x;
+        this.y = y;
+        this.size = 8;
+        this.color = "yellow";
+        this.speed = 15; // ✅ Increased bullet speed
+        this.dirX = dirX;
+        this.dirY = dirY;
+    }
+
+    update() {
+        this.x += this.dirX * this.speed;
+        this.y += this.dirY * this.speed;
+    }
+
+    draw() {
+        ctx.fillStyle = this.color;
+        ctx.fillRect(this.x, this.y, this.size, this.size);
+    }
+}
+
+class Zombie {
+    constructor(x, y) {
+        this.x = x;
+        this.y = y;
+        this.size = 35;
+        this.color = "green";
+        this.speed = 1.5;
+    }
+
+    update(targetX, targetY) {
+        let dx = targetX - this.x;
+        let dy = targetY - this.y;
+        let distance = Math.sqrt(dx * dx + dy * dy);
+
+        if (distance > 0) {
+            this.x += (dx / distance) * this.speed;
+            this.y += (dy / distance) * this.speed;
+        }
+    }
+
+    draw() {
+        ctx.fillStyle = this.color;
+        ctx.fillRect(this.x, this.y, this.size, this.size);
+    }
+}
+
+let player = new Player();
+let bullets = [];
+let zombies = [];
+let score = 0;
+let keys = {};
+let gameRunning = true;
+let zombieSpawnInterval;
+
+function spawnZombie() {
+    let side = Math.floor(Math.random() * 4);
+    let x, y;
+
+    if (side === 0) {
+        x = Math.random() * canvas.width;
+        y = 0;
+    } else if (side === 1) {
+        x = Math.random() * canvas.width;
+        y = canvas.height;
+    } else if (side === 2) {
+        x = 0;
+        y = Math.random() * canvas.height;
+    } else {
+        x = canvas.width;
+        y = Math.random() * canvas.height;
+    }
+
+    zombies.push(new Zombie(x, y));
+}
+
+function startZombieSpawn() {
+    clearInterval(zombieSpawnInterval);
+    zombieSpawnInterval = setInterval(spawnZombie, 1000);
+}
+
+function update() {
+    if (!gameRunning) return;
+
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    if (keys["ArrowLeft"]) player.move(-player.speed, 0);
+    if (keys["ArrowRight"]) player.move(player.speed, 0);
+    if (keys["ArrowUp"]) player.move(0, -player.speed);
+    if (keys["ArrowDown"]) player.move(0, player.speed);
+
+    player.draw();
+
+    bullets.forEach((bullet, bulletIndex) => {
+        bullet.update();
+        bullet.draw();
+
+        if (bullet.x < 0 || bullet.x > canvas.width || bullet.y < 0 || bullet.y > canvas.height) {
+            bullets.splice(bulletIndex, 1);
+        }
+    });
+
+    zombies.forEach((zombie, zombieIndex) => {
+        zombie.update(player.x, player.y);
+        zombie.draw();
+
+        if (
+            player.x < zombie.x + zombie.size &&
+            player.x + player.size > zombie.x &&
+            player.y < zombie.y + zombie.size &&
+            player.y + player.size > zombie.y
+        ) {
+            gameOver();
+        }
+
+        bullets.forEach((bullet, bulletIndex) => {
+            if (
+                bullet.x < zombie.x + zombie.size &&
+                bullet.x + bullet.size > zombie.x &&
+                bullet.y < zombie.y + zombie.size &&
+                bullet.y + bullet.size > zombie.y
+            ) {
+                zombies.splice(zombieIndex, 1);
+                bullets.splice(bulletIndex, 1);
+                score += 10;
+                updateScoreboard();
+            }
+        });
+    });
+
+    requestAnimationFrame(update);
+}
+
+function gameOver() {
+    gameRunning = false;
+    clearInterval(zombieSpawnInterval);
+    setTimeout(() => {
+        alert("Game Over! Your Final Score: " + score);
+        restartGame();
+    }, 100);
+}
+
+function restartGame() {
+    player = new Player();
+    bullets = [];
+    zombies = [];
+    score = 0;
+    updateScoreboard();
+    keys = {};
+    gameRunning = true;
+    startZombieSpawn();
+    update();
+}
+
+function updateScoreboard() {
+    document.getElementById("score").innerText = "Score: " + score;
+}
+
+// Remove old event listeners before adding new ones
+document.removeEventListener("keydown", handleKeyDown);
+document.removeEventListener("keyup", handleKeyUp);
+
+function handleKeyDown(e) {
+    keys[e.key] = true;
+
+    if (e.key === " ") {
+        fireBullets(); // ✅ Fires multiple bullets
+    }
+}
+
+function handleKeyUp(e) {
+    keys[e.key] = false;
+}
+
+// ✅ Shoots 3 bullets in different directions
+function fireBullets() {
+    let directions = [
+        { dx: 1, dy: 0 },  // Right
+        { dx: 0, dy: -1 }, // Up
+        { dx: -1, dy: 0 }, // Left
+        { dx: 0, dy: 1 }   // Down
+    ];
+
+    directions.forEach(dir => {
+        bullets.push(new Bullet(player.x + player.size / 2, player.y + player.size / 2, dir.dx, dir.dy));
+    });
+}
+
+
+document.addEventListener("keydown", handleKeyDown);
+document.addEventListener("keyup", handleKeyUp);
+
+startZombieSpawn();
+update();
diff --git a/examples/javascript_game/index.html b/examples/javascript_game/index.html
new file mode 100644
index 0000000000..e1acb049db
--- /dev/null
+++ b/examples/javascript_game/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Survive the Horde</title>
+    <link rel="stylesheet" href="game.css">
+    <style>
+        #instructions {
+            width: 300px;
+            padding: 15px;
+            background-color: rgba(0, 0, 0, 0.8);
+            color: white;
+            border-radius: 10px;
+            position: absolute;
+            top: 20px;
+            left: 20px;
+            font-family: Arial, sans-serif;
+        }
+    </style>
+</head>
+<body>
+    <div id="gameContainer">
+        <canvas id="gameCanvas"></canvas>
+        <div id="score">Score: 0</div>
+    </div>
+    <div id="instructions">
+        <h2>How to Play</h2>
+        <ul>
+            <li>Use <strong>Arrow Keys</strong> to move the player.</li>
+            <li>Press <strong>Space</strong> to shoot in four directions.</li>
+            <li>Survive as long as possible against incoming zombies.</li>
+            <li>Shooting zombies increases your score.</li>
+            <li>Getting touched by a zombie ends the game.</li>
+        </ul>
+    </div>
+    <script src="game.js"></script>
+</body>
+</html>
+
+
+

From 848619f5a2fa82eb1be41eae59c30f46d953a56c Mon Sep 17 00:00:00 2001
From: Karthikeya1500 <karukarthikeya1111@gmail.com>
Date: Tue, 2 Dec 2025 02:38:22 +0530
Subject: [PATCH 2/2] Implement Survive the Horde example using p5.js

---
 examples/javascript_game/README.md  |  77 ++---
 examples/javascript_game/game.css   |  34 ++-
 examples/javascript_game/game.js    | 437 +++++++++++++++-------------
 examples/javascript_game/index.html |   4 +-
 4 files changed, 289 insertions(+), 263 deletions(-)

diff --git a/examples/javascript_game/README.md b/examples/javascript_game/README.md
index c95a8eaca9..09c0ffe9f6 100644
--- a/examples/javascript_game/README.md
+++ b/examples/javascript_game/README.md
@@ -1,52 +1,25 @@
-# JavaScript-Game
-# Survive the Horde 🧟‍♂️
-
-A simple JavaScript + p5.js survival shooter game where you must defend yourself from endless waves of enemies approaching from all directions. Use your reflexes to shoot and survive as long as possible!
-
----
-
-## 🎮 How to Play
-
-- Use **Arrow Keys** to move the player.
-- Press **Spacebar** to shoot bullets in all four directions.
-- Each enemy (zombie) destroyed increases your **score**.
-- The game ends when an enemy touches you.
-- Your final score will be displayed when the game is over.
-
----
-
-## 🧠 Game Logic Overview
-
-- The player (blue square) stays within the play area.
-- Enemies (green squares) continuously spawn and move toward the player.
-- Bullets (yellow dots) move outward when you press the Spacebar.
-- The game tracks:
-  - Active enemies
-  - Bullets fired
-  - Collision detection (bullet–enemy and enemy–player)
-  - Score updates and game-over logic
-
----
-
-## 🧩 Technologies Used
-
-- **HTML5** — structure of the game page  
-- **CSS3** — simple dark theme and game layout  
-- **JavaScript (ES6)** — game logic, movement, and collisions  
-- **[p5.js](https://p5js.org/)** — for rendering and animation loop
-
----
-
-## 🚀 How to Run Locally
-
-### Option 1 — Run with VS Code (Recommended)
-1. Open this folder in VS Code  
-2. Right-click `index.html`  
-3. Choose **“Open with Live Server”**  
-4. Play at `http://127.0.0.1:5500/examples/javascript_game/`
-
-### Option 2 — Run with Node.js
-```bash
-cd examples/javascript_game
-npx serve
-
+# Survive the Horde
+
+A simple survival game built with **p5.js**.
+
+## Description
+Survive as long as possible against waves of incoming zombies! Use your arrow keys to move and spacebar to shoot.
+
+## Controls
+- **Arrow Keys**: Move Player
+- **Spacebar**: Shoot (in all 4 directions)
+- **R**: Restart Game (when Game Over)
+
+## Features
+- **Player Movement**: Smooth movement using keyboard input.
+- **Shooting**: Fire bullets in four directions simultaneously.
+- **Enemy Spawning**: Zombies spawn from random edges of the screen.
+- **Collision Detection**: 
+  - Bullets kill zombies.
+  - Zombies kill the player.
+- **Scoring**: Earn points for every zombie defeated.
+- **Sound Effects**: Simple synthesized sounds for shooting, hitting, and game over.
+
+## How to Run
+1. Open `index.html` in a modern web browser.
+2. Enjoy!
diff --git a/examples/javascript_game/game.css b/examples/javascript_game/game.css
index efc84be694..58daf3d124 100644
--- a/examples/javascript_game/game.css
+++ b/examples/javascript_game/game.css
@@ -1,11 +1,9 @@
-* {
+body {
     margin: 0;
     padding: 0;
-    box-sizing: border-box;
-}
-
-body {
-    background: black;
+    background-color: #222;
+    color: white;
+    font-family: Arial, sans-serif;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -15,20 +13,34 @@ body {
 
 #gameContainer {
     position: relative;
+    border: 2px solid #555;
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
 }
 
 canvas {
-    background: #222;
     display: block;
-    border: 2px solid white;
 }
 
 #score {
     position: absolute;
     top: 10px;
-    left: 50%;
-    transform: translateX(-50%);
-    font-size: 20px;
+    right: 20px;
+    font-size: 24px;
+    font-weight: bold;
     color: white;
+    text-shadow: 2px 2px 4px black;
+    pointer-events: none;
 }
 
+#instructions {
+    position: absolute;
+    top: 20px;
+    left: 20px;
+    width: 300px;
+    padding: 15px;
+    background-color: rgba(0, 0, 0, 0.8);
+    color: white;
+    border-radius: 10px;
+    font-family: Arial, sans-serif;
+    pointer-events: none;
+}
diff --git a/examples/javascript_game/game.js b/examples/javascript_game/game.js
index 2a475054fe..253a0736f3 100644
--- a/examples/javascript_game/game.js
+++ b/examples/javascript_game/game.js
@@ -1,229 +1,268 @@
-const canvas = document.getElementById("gameCanvas");
-const ctx = canvas.getContext("2d");
-
-canvas.width = 800;
-canvas.height = 600;
-
-class Player {
-    constructor() {
-        this.reset();
-    }
-
-    reset() {
-        this.x = canvas.width / 2;
-        this.y = canvas.height / 2;
-        this.size = 30;
-        this.color = "cyan";
-        this.speed = 5;
-    }
-
-    draw() {
-        ctx.fillStyle = this.color;
-        ctx.fillRect(this.x, this.y, this.size, this.size);
-    }
-
-    move(dirX, dirY) {
-        if (this.x + dirX >= 0 && this.x + this.size + dirX <= canvas.width) {
-            this.x += dirX;
-        }
-        if (this.y + dirY >= 0 && this.y + this.size + dirY <= canvas.height) {
-            this.y += dirY;
-        }
-    }
+let player;
+let bullets = [];
+let zombies = [];
+let score = 0;
+let gameRunning = true;
+let zombieSpawnInterval = 60; // Frames between spawns
+let lastSpawnFrame = 0;
+
+// Sound effects (oscillators)
+let shootOsc;
+let hitOsc;
+let gameOverOsc;
+
+function setup() {
+  let canvas = createCanvas(800, 600);
+  canvas.parent('gameContainer');
+  
+  player = new Player();
+  
+  // Initialize sound oscillators
+  shootOsc = new p5.Oscillator('square');
+  hitOsc = new p5.Oscillator('sawtooth');
+  gameOverOsc = new p5.Oscillator('sine');
 }
 
-class Bullet {
-    constructor(x, y, dirX, dirY) {
-        this.x = x;
-        this.y = y;
-        this.size = 8;
-        this.color = "yellow";
-        this.speed = 15; // ✅ Increased bullet speed
-        this.dirX = dirX;
-        this.dirY = dirY;
-    }
-
-    update() {
-        this.x += this.dirX * this.speed;
-        this.y += this.dirY * this.speed;
+function draw() {
+  background(30);
+  
+  if (gameRunning) {
+    // Player Logic
+    player.update();
+    player.display();
+    
+    // Bullet Logic
+    for (let i = bullets.length - 1; i >= 0; i--) {
+      bullets[i].update();
+      bullets[i].display();
+      if (bullets[i].offscreen()) {
+        bullets.splice(i, 1);
+      }
     }
-
-    draw() {
-        ctx.fillStyle = this.color;
-        ctx.fillRect(this.x, this.y, this.size, this.size);
-    }
-}
-
-class Zombie {
-    constructor(x, y) {
-        this.x = x;
-        this.y = y;
-        this.size = 35;
-        this.color = "green";
-        this.speed = 1.5;
+    
+    // Zombie Logic
+    if (frameCount - lastSpawnFrame > zombieSpawnInterval) {
+      spawnZombie();
+      lastSpawnFrame = frameCount;
+      // Increase difficulty over time
+      if (zombieSpawnInterval > 20) {
+        zombieSpawnInterval -= 0.5;
+      }
     }
-
-    update(targetX, targetY) {
-        let dx = targetX - this.x;
-        let dy = targetY - this.y;
-        let distance = Math.sqrt(dx * dx + dy * dy);
-
-        if (distance > 0) {
-            this.x += (dx / distance) * this.speed;
-            this.y += (dy / distance) * this.speed;
+    
+    for (let i = zombies.length - 1; i >= 0; i--) {
+      zombies[i].update(player.x, player.y);
+      zombies[i].display();
+      
+      // Collision: Zombie hits Player
+      if (player.hits(zombies[i])) {
+        gameOver();
+      }
+      
+      // Collision: Bullet hits Zombie
+      for (let j = bullets.length - 1; j >= 0; j--) {
+        if (bullets[j].hits(zombies[i])) {
+          zombies.splice(i, 1);
+          bullets.splice(j, 1);
+          score += 10;
+          updateScoreboard();
+          playHitSound();
+          break; // Break bullet loop since zombie is gone
         }
+      }
     }
-
-    draw() {
-        ctx.fillStyle = this.color;
-        ctx.fillRect(this.x, this.y, this.size, this.size);
-    }
+  } else {
+    // Game Over Screen
+    fill(255);
+    textAlign(CENTER, CENTER);
+    textSize(50);
+    text("GAME OVER", width / 2, height / 2 - 20);
+    textSize(20);
+    text("Final Score: " + score, width / 2, height / 2 + 40);
+    text("Press 'R' to Restart", width / 2, height / 2 + 80);
+  }
 }
 
-let player = new Player();
-let bullets = [];
-let zombies = [];
-let score = 0;
-let keys = {};
-let gameRunning = true;
-let zombieSpawnInterval;
-
-function spawnZombie() {
-    let side = Math.floor(Math.random() * 4);
-    let x, y;
-
-    if (side === 0) {
-        x = Math.random() * canvas.width;
-        y = 0;
-    } else if (side === 1) {
-        x = Math.random() * canvas.width;
-        y = canvas.height;
-    } else if (side === 2) {
-        x = 0;
-        y = Math.random() * canvas.height;
-    } else {
-        x = canvas.width;
-        y = Math.random() * canvas.height;
+function keyPressed() {
+  if (key === ' ') {
+    if (gameRunning) {
+      player.shoot();
+      playShootSound();
     }
-
-    zombies.push(new Zombie(x, y));
+  }
+  
+  if (!gameRunning && (key === 'r' || key === 'R')) {
+    restartGame();
+  }
 }
 
-function startZombieSpawn() {
-    clearInterval(zombieSpawnInterval);
-    zombieSpawnInterval = setInterval(spawnZombie, 1000);
+function spawnZombie() {
+  let side = floor(random(4));
+  let x, y;
+  
+  if (side === 0) { // Top
+    x = random(width);
+    y = -50;
+  } else if (side === 1) { // Bottom
+    x = random(width);
+    y = height + 50;
+  } else if (side === 2) { // Left
+    x = -50;
+    y = random(height);
+  } else { // Right
+    x = width + 50;
+    y = random(height);
+  }
+  
+  zombies.push(new Zombie(x, y));
 }
 
-function update() {
-    if (!gameRunning) return;
-
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
-
-    if (keys["ArrowLeft"]) player.move(-player.speed, 0);
-    if (keys["ArrowRight"]) player.move(player.speed, 0);
-    if (keys["ArrowUp"]) player.move(0, -player.speed);
-    if (keys["ArrowDown"]) player.move(0, player.speed);
-
-    player.draw();
-
-    bullets.forEach((bullet, bulletIndex) => {
-        bullet.update();
-        bullet.draw();
-
-        if (bullet.x < 0 || bullet.x > canvas.width || bullet.y < 0 || bullet.y > canvas.height) {
-            bullets.splice(bulletIndex, 1);
-        }
-    });
-
-    zombies.forEach((zombie, zombieIndex) => {
-        zombie.update(player.x, player.y);
-        zombie.draw();
-
-        if (
-            player.x < zombie.x + zombie.size &&
-            player.x + player.size > zombie.x &&
-            player.y < zombie.y + zombie.size &&
-            player.y + player.size > zombie.y
-        ) {
-            gameOver();
-        }
-
-        bullets.forEach((bullet, bulletIndex) => {
-            if (
-                bullet.x < zombie.x + zombie.size &&
-                bullet.x + bullet.size > zombie.x &&
-                bullet.y < zombie.y + zombie.size &&
-                bullet.y + bullet.size > zombie.y
-            ) {
-                zombies.splice(zombieIndex, 1);
-                bullets.splice(bulletIndex, 1);
-                score += 10;
-                updateScoreboard();
-            }
-        });
-    });
-
-    requestAnimationFrame(update);
+function updateScoreboard() {
+  let scoreElement = select('#score');
+  if (scoreElement) {
+    scoreElement.html('Score: ' + score);
+  }
 }
 
 function gameOver() {
-    gameRunning = false;
-    clearInterval(zombieSpawnInterval);
-    setTimeout(() => {
-        alert("Game Over! Your Final Score: " + score);
-        restartGame();
-    }, 100);
+  gameRunning = false;
+  playGameOverSound();
 }
 
 function restartGame() {
-    player = new Player();
-    bullets = [];
-    zombies = [];
-    score = 0;
-    updateScoreboard();
-    keys = {};
-    gameRunning = true;
-    startZombieSpawn();
-    update();
+  player = new Player();
+  bullets = [];
+  zombies = [];
+  score = 0;
+  updateScoreboard();
+  gameRunning = true;
+  zombieSpawnInterval = 60;
+  lastSpawnFrame = frameCount;
 }
 
-function updateScoreboard() {
-    document.getElementById("score").innerText = "Score: " + score;
-}
+// --- Classes ---
 
-// Remove old event listeners before adding new ones
-document.removeEventListener("keydown", handleKeyDown);
-document.removeEventListener("keyup", handleKeyUp);
-
-function handleKeyDown(e) {
-    keys[e.key] = true;
-
-    if (e.key === " ") {
-        fireBullets(); // ✅ Fires multiple bullets
-    }
+class Player {
+  constructor() {
+    this.x = width / 2;
+    this.y = height / 2;
+    this.size = 30;
+    this.speed = 5;
+    this.color = color(0, 255, 255); // Cyan
+  }
+  
+  update() {
+    if (keyIsDown(LEFT_ARROW)) this.x -= this.speed;
+    if (keyIsDown(RIGHT_ARROW)) this.x += this.speed;
+    if (keyIsDown(UP_ARROW)) this.y -= this.speed;
+    if (keyIsDown(DOWN_ARROW)) this.y += this.speed;
+    
+    // Constrain to canvas
+    this.x = constrain(this.x, this.size/2, width - this.size/2);
+    this.y = constrain(this.y, this.size/2, height - this.size/2);
+  }
+  
+  display() {
+    fill(this.color);
+    noStroke();
+    rectMode(CENTER);
+    rect(this.x, this.y, this.size, this.size);
+  }
+  
+  shoot() {
+    // Shoot in 4 directions
+    bullets.push(new Bullet(this.x, this.y, 0, -1)); // Up
+    bullets.push(new Bullet(this.x, this.y, 0, 1));  // Down
+    bullets.push(new Bullet(this.x, this.y, -1, 0)); // Left
+    bullets.push(new Bullet(this.x, this.y, 1, 0));  // Right
+  }
+  
+  hits(zombie) {
+    let d = dist(this.x, this.y, zombie.x, zombie.y);
+    return d < (this.size / 2 + zombie.size / 2);
+  }
 }
 
-function handleKeyUp(e) {
-    keys[e.key] = false;
+class Bullet {
+  constructor(x, y, dx, dy) {
+    this.x = x;
+    this.y = y;
+    this.dx = dx;
+    this.dy = dy;
+    this.speed = 10;
+    this.size = 8;
+    this.color = color(255, 255, 0); // Yellow
+  }
+  
+  update() {
+    this.x += this.dx * this.speed;
+    this.y += this.dy * this.speed;
+  }
+  
+  display() {
+    fill(this.color);
+    noStroke();
+    ellipse(this.x, this.y, this.size);
+  }
+  
+  offscreen() {
+    return (this.x < 0 || this.x > width || this.y < 0 || this.y > height);
+  }
+  
+  hits(zombie) {
+    let d = dist(this.x, this.y, zombie.x, zombie.y);
+    return d < (this.size / 2 + zombie.size / 2);
+  }
 }
 
-// ✅ Shoots 3 bullets in different directions
-function fireBullets() {
-    let directions = [
-        { dx: 1, dy: 0 },  // Right
-        { dx: 0, dy: -1 }, // Up
-        { dx: -1, dy: 0 }, // Left
-        { dx: 0, dy: 1 }   // Down
-    ];
-
-    directions.forEach(dir => {
-        bullets.push(new Bullet(player.x + player.size / 2, player.y + player.size / 2, dir.dx, dir.dy));
-    });
+class Zombie {
+  constructor(x, y) {
+    this.x = x;
+    this.y = y;
+    this.size = 30;
+    this.speed = 1.5;
+    this.color = color(0, 255, 0); // Green
+  }
+  
+  update(targetX, targetY) {
+    let angle = atan2(targetY - this.y, targetX - this.x);
+    this.x += cos(angle) * this.speed;
+    this.y += sin(angle) * this.speed;
+  }
+  
+  display() {
+    fill(this.color);
+    noStroke();
+    rectMode(CENTER);
+    rect(this.x, this.y, this.size, this.size);
+  }
 }
 
+// --- Sound Functions ---
 
-document.addEventListener("keydown", handleKeyDown);
-document.addEventListener("keyup", handleKeyUp);
+function playShootSound() {
+  shootOsc.start();
+  shootOsc.freq(880);
+  shootOsc.amp(0.1);
+  shootOsc.freq(440, 0.1);
+  shootOsc.amp(0, 0.1);
+  setTimeout(() => shootOsc.stop(), 100);
+}
 
-startZombieSpawn();
-update();
+function playHitSound() {
+  hitOsc.start();
+  hitOsc.freq(200);
+  hitOsc.amp(0.1);
+  hitOsc.freq(100, 0.1);
+  hitOsc.amp(0, 0.1);
+  setTimeout(() => hitOsc.stop(), 100);
+}
+
+function playGameOverSound() {
+  gameOverOsc.start();
+  gameOverOsc.freq(300);
+  gameOverOsc.amp(0.2);
+  gameOverOsc.freq(50, 1.0);
+  gameOverOsc.amp(0, 1.0);
+  setTimeout(() => gameOverOsc.stop(), 1000);
+}
diff --git a/examples/javascript_game/index.html b/examples/javascript_game/index.html
index e1acb049db..a2e562d311 100644
--- a/examples/javascript_game/index.html
+++ b/examples/javascript_game/index.html
@@ -21,7 +21,7 @@
 </head>
 <body>
     <div id="gameContainer">
-        <canvas id="gameCanvas"></canvas>
+        <!-- Canvas will be created by p5.js -->
         <div id="score">Score: 0</div>
     </div>
     <div id="instructions">
@@ -34,6 +34,8 @@ <h2>How to Play</h2>
             <li>Getting touched by a zombie ends the game.</li>
         </ul>
     </div>
+    <script src="../../lib/p5.js"></script>
+    <script src="../../lib/addons/p5.sound.js"></script>
     <script src="game.js"></script>
 </body>
 </html>