audio, finalize gameplay, wrap around map, stuff

client/css/editor.css

@@ -11,10 +11,13 @@ canvas {
     padding: 1rem;
 }
 
-#mapgen {
+#mapgen, #mapload {
     display: flex;
     flex-direction: column;
-    position: absolute;
+}
+
+#mapload {
+    margin-top: 3rem;
 }
 
 #export {

client/css/main.css

@@ -19,10 +19,16 @@ body {
 #center {
     width: 100vw;
     height: 100vh;
-    display: flex;
+    position: absolute;
+}
+
+#center-inner {
+    width: 100%;
+    height: 100%;
+    position: relative;
     align-items: center;
     justify-content: center;
-    position: absolute;
+    display: flex;
     flex-direction: column;
 }
 

client/index.html

@@ -8,16 +8,18 @@
         <canvas id="canvas" style="display: none;"></canvas>
         <style id="style"></style>
         <div id="center">
-            <form id="join" autocomplete="off">
+            <div id="center-inner">
-                <input type="text" id="room_code" name="room_code" placeholder="Room Code">
+                <form id="join" autocomplete="off">
-                <input type="text" id="player_name" name="name" placeholder="Player Name">
+                    <input type="text" id="room_code" name="room_code" placeholder="Room Code">
-                <input type="submit" value="Join!"/>
+                    <input type="text" id="player_name" name="name" placeholder="Player Name">
-            </form>
+                    <input type="submit" value="Join!"/>
-            <input id="mapeditor" type="button" value="Map Editor">
+                </form>
-            <div id="lobby" style="display: none;">
+                <input id="mapeditor" type="button" value="Map Editor">
-                <span>Players:</span>
+                <div id="lobby" style="display: none;">
-                <div id="players"></div>
+                    <span>Players:</span>
-                <input type="button" id="start" value="Start Game"/>
+                    <div id="players"></div>
+                    <input type="button" id="start" value="Start Game"/>
+                </div>
             </div>
         </div>
         <script src="js/main.js" type="module"></script>

client/mapeditor.html

@@ -10,20 +10,27 @@
         <canvas id="canvas" style="display: none;"></canvas>
         <style id="style"></style>
         <div id="center">
-            <form id="mapgen" autocomplete="off">
+            <div id="center-inner">
-                <input type="text" id="width" name="width" placeholder="Map Width">
+                <form id="mapgen" autocomplete="off">
-                <input type="text" id="height" name="height" placeholder="Map Height">
+                    <input type="text" id="width" name="width" placeholder="Map Width">
-                <input type="submit" value="Create"/>
+                    <input type="text" id="height" name="height" placeholder="Map Height">
-            </form>
+                    <input type="submit" value="Create"/>
-            <div id="popup" style="display: none">
+                </form>
-                <input type="button" id="close" value="x" onclick="document.getElementById('popup').style.display = 'none'">
+                <form id="mapload" autocomplete="off">
-                <textarea id="textarea" disabled='true'></textarea>
+                    <input type="text" id="data" name="data" placeholder="Map Data">
-                <input type="button" id="copy" value="Copy to clipboard">
+                    <input type="submit" value="Load"/>
+                </form>
+                <div id="popup" style="display: none">
+                    <input type="button" id="close" value="x" onclick="document.getElementById('popup').style.display = 'none'">
+                    <textarea id="textarea" disabled='true'></textarea>
+                    <input type="button" id="copy" value="Copy to clipboard">
+                </div>
             </div>
         </div>
         <div id="sidebar" style="display: none;">
             <p>W: Place Wall</p>
-            <p>G: Place Ghost Wall</p>
+            <p>G: Place Ghost Only Wall</p>
+            <p>R: Place Ghost Exit</p>
             <p>H: Place Ghost Spawn</p>
             <p>F: Place Food</p>
             <p>1: Place Pac Spawn 1</p>

client/src/editor.ts

@@ -1,9 +1,10 @@
 import { InitialState } from "./logic/logic.js"
-import { genMap, compressMap, decompressMap } from "./map.js"
+import { genMap, compressMap, decompressMap, checkMap } from "./map.js"
 import { startGraphicsUpdater } from "./renderer.js"
 import { GameState, Vec2, Tile } from "./types.js"
 
 const mapgen = document.getElementById("mapgen")
+const mapload = document.getElementById("mapload")
 const sidebar = document.getElementById("sidebar")
 
 mapgen.onsubmit = async (event) => {
@@ -21,10 +22,30 @@ mapgen.onsubmit = async (event) => {
     }
 
     mapgen.style.display = "none"
+    mapload.style.display = "none"
 
     runMapEditor(width, height)    
 }
 
+mapload.onsubmit = async (event) => {
+    event.preventDefault()
+
+    const data_str = (<HTMLInputElement>document.getElementById("data")).value
+    const {width, height, data} = decompressMap(data_str)
+    const map = genMap(width, height, data, 0)
+    const [success, result] = checkMap(map)
+    
+    if (!success) {
+        alert(result as String)
+        return
+    }
+    
+    mapgen.style.display = "none"
+    mapload.style.display = "none"
+
+    runMapEditor(width, height, data)    
+}
+
 const startKeyListener = () => {
 
     let keys = {}
@@ -93,6 +114,8 @@ const checkInputs = (pressed: {[key: string]: boolean}): [Tile, boolean] => {
         return [Tile.WALL, false]
     } else if (pressed["KeyG"]) {
         return [Tile.GHOST_WALL, false]
+    } else if (pressed["KeyR"]) {
+        return [Tile.GHOST_EXIT, true]
     } else if (pressed["KeyH"]) {
         return [Tile.GHOST_SPAWN, true]
     } else if (pressed["KeyF"]) {
@@ -121,12 +144,11 @@ const checkBounds = (tilePos: Vec2, width: number, height: number) => {
     return true
 }
 
-const runMapEditor = (width: number, height: number) => {
+const runMapEditor = (width: number, height: number, map_data: number[] = undefined) => {
 
     sidebar.style.display = ""
 
-    let data: number[] = new Array(width * height).fill(0)
+    let data: number[] = map_data ? map_data : new Array(width * height).fill(0)
-
     let map = genMap(width, height, data, Tile.EMPTY)
 
     let state: GameState = structuredClone(InitialState);
@@ -168,6 +190,13 @@ const runMapEditor = (width: number, height: number) => {
     requestAnimationFrame(loop)
 
     document.getElementById("export").onclick = () => {
+
+        let [success, status] = checkMap(map)
+        if (!success) {
+            alert(status)
+            return
+        }
+
         let encoded = compressMap(map)
         document.getElementById("textarea").textContent = encoded
         document.getElementById("popup").style.display = 'flex'

client/src/logic/ai.ts

@@ -1,7 +1,73 @@
 import { getMap } from "../map.js";
 import { Map, Vec2, GhostType, GameState, SpawnIndex, Player, Rotation, GhostState, Tile, Ghost } from "../types.js";
 import { random } from "./logic.js";
-import { MOVE_SPEED, roundPos, isStablePos, getTile, getTileFrontWithRot, incrementPos } from "./movement.js";
+import { MOVE_SPEED, roundPos, isStablePos, getTile, getTileFrontWithRot, incrementPos, wrapPos } from "./movement.js";
+
+const vec2eq = (a: Vec2, b: Vec2): boolean => {
+    return a.x == b.x && a.y == b.y
+}
+
+const canPath = (tile: Tile): boolean => tile != Tile.WALL
+const canCollide = (tile: Tile, isPathing: boolean): boolean => tile != Tile.WALL && (isPathing ? true : tile != Tile.GHOST_EXIT)
+
+const path = (start: Vec2, end: Vec2, map: Map) => {
+    let mask: Vec2[] = new Array(map.width * map.height)
+    let queue: Vec2[] = []
+    queue.push(start)
+
+    while (true) {
+
+        let next: Vec2 = queue.shift()
+        if (!next) {
+            console.log('failed')
+            return undefined
+        }
+        if (vec2eq(next, end)) break
+
+        let north = canPath(getTile(map, next, 0, -1))
+        let south = canPath(getTile(map, next, 0, 1))
+        let east = canPath(getTile(map, next, 1, 0))
+        let west = canPath(getTile(map, next, -1, 0))
+    
+        if (north && !mask[(next.y - 1) * map.width + (next.x)]) {
+            queue.push({x: next.x, y: next.y - 1})
+            mask[(next.y - 1) * map.width + (next.x)] = next
+        }
+        
+        if (south && !mask[(next.y + 1) * map.width + (next.x)]) {
+            queue.push({x: next.x, y: next.y + 1})
+            mask[(next.y + 1) * map.width + (next.x)] = next
+        }
+        
+        if (east && !mask[(next.y) * map.width + (next.x + 1)]) {
+            queue.push({x: next.x + 1, y: next.y})
+            mask[(next.y) * map.width + (next.x + 1)] = next
+        }
+        
+        if (west && !mask[(next.y) * map.width + (next.x - 1)]) {
+            queue.push({x: next.x - 1, y: next.y})
+            mask[(next.y) * map.width + (next.x - 1)] = next
+        }
+    }
+
+    let solution = []
+
+    let next = end
+    while (true) {
+        solution.push(structuredClone(next))
+        if (vec2eq(next, start)) {
+            break
+        } else {
+            next = mask[next.y * map.width + next.x]
+        }
+    }
+
+    solution = solution.reverse()
+    solution.shift()
+
+    return solution
+
+}
 
 const diff = (a: Vec2, b:Vec2): Vec2 => {
     return {x: a.x - b.x, y: a.y - b.y}
@@ -80,6 +146,12 @@ const pickTargetChase = (state: GameState, type: GhostType): Vec2 => {
 
 const pickTarget = (state: GameState, map: Map, type: GhostType): Vec2 => {
     let ghost: Ghost = state.ghosts[type]
+
+    let target = ghost.targetQueue.shift()
+    if (target) {
+        return target
+    }
+
     switch (ghost.state) {
         case GhostState.SCATTER:
             return pickTargetScatter(state, type)
@@ -95,17 +167,105 @@ const pickTarget = (state: GameState, map: Map, type: GhostType): Vec2 => {
     }
 }
 
-const flipRot = (rot: Rotation) => {
+const checkIfEaten = (ghost: Ghost, state: GameState): boolean => {
-    switch (rot) {
+
-        case Rotation.NORTH:
+    if (ghost.state != GhostState.SCARED) {
-            return Rotation.SOUTH
+        return false
-        case Rotation.SOUTH:
-            return Rotation.NORTH
-        case Rotation.EAST:
-            return Rotation.WEST
-        case Rotation.WEST:
-            return Rotation.EAST
     }
+
+    for (let id in state.players) {
+        let player = state.players[id]
+
+        if (player.thiccLeft > 0 && dist(player.pos, ghost.pos) <= 1) {
+            return true
+        }
+    }
+
+    return false
+}
+
+const updateKilled = (ghost: Ghost, state: GameState) => {
+   
+    if (ghost.state == GhostState.EATEN) {
+        return
+    }
+
+    for (let id in state.players) {
+        let player = state.players[id]
+
+        if (dist(player.pos, ghost.pos) > 1) {
+            continue
+        }
+
+        if (ghost.state != GhostState.SCARED || player.thiccLeft < 1) {
+            player.dead = true
+            player.framesDead = 0
+        } 
+    }
+
+}
+
+const getGhostState = (ghost: Ghost, state: GameState): GhostState => {
+
+    if (ghost.state == GhostState.EATEN || checkIfEaten(ghost, state)) {
+        ghost.hasRespawned = false
+        return GhostState.EATEN
+    }
+
+    if (Object.values(state.players).filter((p: Player) => p.thiccLeft > 0).length > 0) {
+        if (!ghost.hasRespawned) {
+            return GhostState.SCARED
+        }
+    } else {
+        ghost.hasRespawned = false
+    }
+
+    return (Object.keys(state.items).length % 100 < 10 ? GhostState.SCATTER : GhostState.CHASE)
+}
+
+const getGhostPath = (ghost: Ghost, map: Map): Vec2[] => {
+
+    if (ghost.targetQueue.length > 0) { // already pathing
+        return undefined
+    }
+
+    if (ghost.state == GhostState.EATEN) { // dead go back to spawn
+        if (vec2eq(ghost.pos, map.spawns[SpawnIndex.GHOST_SPAWN])) { // returned to spawn, exit the box
+            ghost.state = GhostState.CHASE
+            ghost.hasRespawned = true
+            return path(ghost.pos, map.spawns[SpawnIndex.GHOST_EXIT], map)
+        } else { // go to the box still dead
+            return path(ghost.pos, map.spawns[SpawnIndex.GHOST_SPAWN], map)
+        }
+    }
+
+    let tile = getTile(map, ghost.pos, 0, 0)
+    if (tile != Tile.GHOST_WALL && tile != Tile.GHOST_SPAWN) { // not in the box
+        return undefined
+    }
+
+    let threshold = 0
+    switch (ghost.type) {
+        case GhostType.BLINKY:
+            threshold = 60 * 5
+            break
+        case GhostType.PINKY:
+            threshold = 60 * 10
+            break
+        case GhostType.INKY:
+            threshold = 60 * 15
+            break
+        case GhostType.CLYDE:
+            threshold = 60 * 20
+            break
+    }
+
+    if (ghost.framesInBox < threshold) {
+        return undefined
+    }
+
+    return path(ghost.pos, map.spawns[SpawnIndex.GHOST_EXIT], map)
+    
 }
 
 const updateGhost = (state: GameState, map: Map, type: GhostType) => {
@@ -115,22 +275,45 @@ const updateGhost = (state: GameState, map: Map, type: GhostType) => {
         ghost = {
             pos: structuredClone(map.spawns[SpawnIndex.GHOST_SPAWN]),
             target: structuredClone(map.spawns[SpawnIndex.GHOST_SPAWN]),
+            targetQueue: [],
             type,
-            state: GhostState.SCARED,
+            state: GhostState.SCATTER,
             currentDirection: Rotation.EAST,
+            hasRespawned: false,
+            framesInBox: 0,
         }
         state.ghosts[type] = ghost
     }
+    
+    let tile = getTile(map, ghost.pos, 0, 0)
+    if (tile == Tile.GHOST_WALL || tile == Tile.GHOST_SPAWN) {
+        ghost.framesInBox++
+    }
+
+    ghost.state = getGhostState(ghost, state)
 
     if (isStablePos(ghost.pos)) {
 
         ghost.pos = roundPos(ghost.pos)
+    
+        let newPath = getGhostPath(ghost, map)
+        if (newPath) {
+            ghost.targetQueue = newPath
+        }
 
-        let front = getTileFrontWithRot(map, ghost.pos, ghost.currentDirection) == Tile.WALL
+        let frontTile = getTileFrontWithRot(map, ghost.pos, ghost.currentDirection)
-        let north = getTile(map, ghost.pos, 0, -1) != Tile.WALL
+        let northTile = getTile(map, ghost.pos, 0, -1)
-        let east = getTile(map, ghost.pos, 1, 0) != Tile.WALL
+        let eastTile = getTile(map, ghost.pos, 1, 0) 
-        let south = getTile(map, ghost.pos, 0, 1) != Tile.WALL
+        let southTile = getTile(map, ghost.pos, 0, 1)
-        let west = getTile(map, ghost.pos, -1, 0) != Tile.WALL
+        let westTile = getTile(map, ghost.pos, -1, 0)
+
+        let isPathing = ghost.targetQueue.length > 0
+
+        let front = canCollide(frontTile, isPathing) 
+        let north = canCollide(northTile, isPathing) 
+        let east = canCollide(eastTile, isPathing) 
+        let south = canCollide(southTile, isPathing) 
+        let west = canCollide(westTile, isPathing)
 
         let isIntersection = 
             (north && east) ||
@@ -138,18 +321,20 @@ const updateGhost = (state: GameState, map: Map, type: GhostType) => {
             (south && west) ||
             (west && north)
 
-        if (!isIntersection && front) {
+        if (isIntersection || !front || (isPathing && vec2eq(ghost.pos, ghost.target))) {
-            ghost.currentDirection = flipRot(ghost.currentDirection)
-        } else if (isIntersection) {
             let target = pickTarget(state, map, type)
             ghost.target = target
+
+            if ((!isIntersection && !front) || isPathing) {
+                ghost.currentDirection = undefined
+            }
             
             let newRot = ghost.currentDirection
             let min = undefined
 
             if (north && ghost.currentDirection !== Rotation.SOUTH) {
                 let d = dist({x: ghost.pos.x, y: ghost.pos.y - 1}, target)
-                if (!min || min > d) {
+                if (min === undefined || min > d) {
                     min = d
                     newRot = Rotation.NORTH
                 }
@@ -157,7 +342,7 @@ const updateGhost = (state: GameState, map: Map, type: GhostType) => {
 
             if (east && ghost.currentDirection !== Rotation.WEST) {
                 let d = dist({x: ghost.pos.x + 1, y: ghost.pos.y}, target)
-                if (!min || min > d) {
+                if (min === undefined || min > d) {
                     min = d
                     newRot = Rotation.EAST
                 }
@@ -165,7 +350,7 @@ const updateGhost = (state: GameState, map: Map, type: GhostType) => {
 
             if (south && ghost.currentDirection !== Rotation.NORTH) {
                 let d = dist({x: ghost.pos.x, y: ghost.pos.y + 1}, target)
-                if (!min || min > d) {
+                if (min === undefined || min > d) {
                     min = d
                     newRot = Rotation.SOUTH
                 }
@@ -173,7 +358,7 @@ const updateGhost = (state: GameState, map: Map, type: GhostType) => {
 
             if (west && ghost.currentDirection !== Rotation.EAST) {
                 let d = dist({x: ghost.pos.x - 1, y: ghost.pos.y}, target)
-                if (!min || min > d) {
+                if (min === undefined || min > d) {
                     min = d
                     newRot = Rotation.WEST
                 }
@@ -183,7 +368,9 @@ const updateGhost = (state: GameState, map: Map, type: GhostType) => {
         }
     }
 
-    incrementPos(ghost.pos, ghost.currentDirection, MOVE_SPEED) 
+    incrementPos(ghost.pos, ghost.currentDirection, MOVE_SPEED)
+    wrapPos(ghost.pos, map)
+    updateKilled(ghost, state)
 }
 
 export const updateGhosts = (state: GameState) => {

client/src/logic/items.ts

@@ -1,5 +1,5 @@
 import { getMap, getItemKey } from "../map.js"
-import { GameState, Map, Player } from "../types.js"
+import { GameState, ItemType, Map, Player } from "../types.js"
 
 const ceilHalf = (n: number): number => {
     return Math.ceil(n*2)/2
@@ -12,10 +12,24 @@ const floorHalf = (n: number): number => {
 const eatItems = (data: GameState, map: Map, player: Player) => {
 
     let pos = player.pos
+
+    player.atePellets = Math.max(player.atePellets - 1, 0)
     
     for (let x = ceilHalf(pos.x-.5); x <= floorHalf(pos.x+.5); x += .5) {
         for (let y = ceilHalf(pos.y-.5); y <= floorHalf(pos.y+.5); y += .5) {
             let item_key = getItemKey(x, y, map.width)
+
+            let item = data.items[item_key]
+            if (!item) {
+                continue
+            }
+
+            player.atePellets = 30
+
+            if (item.type == ItemType.THICC_DOT) {
+                player.thiccLeft += 60 * 10
+            }
+
             delete data.items[item_key]
         }
     }

client/src/logic/logic.ts

@@ -3,7 +3,7 @@ import { updatePlayers } from "./players.js"
 import { updateUI } from "./ui.js"
 import { updateMovement } from "./movement.js"
 import { updateItems } from "./items.js" 
-import { GameState, Input } from "../types.js";
+import { GameState, Input, Rotation, SpawnIndex } from "../types.js";
 import { updateGhosts } from "./ai.js";
 
 export const InitialState: GameState = {
@@ -14,7 +14,9 @@ export const InitialState: GameState = {
     items: {},
     mapId: undefined,
     frame: 0,
-    rng: 0
+    rng: 0,
+    roundTimer: 0,
+    endRoundTimer: undefined
 }
 
 export const random = (state: GameState): number => {
@@ -32,36 +34,85 @@ export const onLogic = (
     random(data)
     
     let startPressed = updatePlayers(data, input);
+    let playersLeft = 0
+    for (let id in data.players) {
+        let player = data.players[id]
+        if (player.dead) {
+            player.framesDead++
+        } else {
+            playersLeft++
+        }
+    }
 
     if (data.started) {
-        updateMovement(data)
+        data.roundTimer++
-        updateItems(data)
+        if (data.roundTimer < 60 * 5) {
-        updateGhosts(data)
+            // uh do nothing just draw shit
+        } else if (playersLeft > 1) {
+            updateMovement(data)
+            updateItems(data)
+            updateGhosts(data)
+        } else {
+            if (data.endRoundTimer === undefined) {
+                data.endRoundTimer = 60 * 5
+            }
+            data.endRoundTimer--
+            if (data.endRoundTimer < 1) {
+                nextMap(data)
+            }
+        }
     } else {
         updateUI(data)
     }
     
-    if (startPressed && !data.started) {
+    if (startPressed && !data.started && Object.values(data.players).length > 1) {
-        initMap(data, 0)
+        nextMap(data)
-        data.started = true;	
+        data.started = true;
+    }
+
+    let map = getMap(data.mapId)
+    if (map && Object.keys(data.items).length < 1) {
+        data.items = genItems(map, false)
     }
 
     return data
 
 }
 
-const initMap = (gameData: GameState, mapId: number) => {
+const nextMap = (gameData: GameState) => {
 
-    document.getElementById("lobby").style.display = "none"
+    if (gameData.mapId === undefined) {
+        gameData.mapId = 0
+    } else {
+        gameData.mapId++
+    }
 
-    gameData.mapId = mapId
+    if (gameData.mapId > 3) {
+        gameData.mapId = undefined
+        gameData.started = false
+        return
+    }
 
-    let map = getMap(mapId)
+    gameData.ghosts = [undefined, undefined, undefined, undefined]
-    // if (!map) {
+
-    //     let {width, height, data} = decompressMap(maps[mapId])
+    let map = getMap(gameData.mapId)
-    //     map = genMap(width, height, data, mapId)
-    // }
     
+    let index = SpawnIndex.PAC_SPAWN_1
+    for (let id in gameData.players) {
+        let player = gameData.players[id]
+        player.pos = structuredClone(map.spawns[index++])
+        player.dead = false
+        player.framesDead = 0
+        player.thiccLeft = 0
+        player.atePellets = 0
+        player.moving = false
+        player.moveRotation = Rotation.NOTHING
+        player.inputRotation = Rotation.NOTHING
+        player.velocityRotation = Rotation.NOTHING
+    }
+
     gameData.items = genItems(map)
+    gameData.roundTimer = 0
+    gameData.endRoundTimer = undefined
 }
 

client/src/logic/movement.ts

@@ -1,5 +1,5 @@
 import { getMap } from "../map.js"
-import { Vec2, Map, Rotation, Key, Player, GameState, Tile } from "../types.js"
+import { Vec2, Map, Rotation, Key, Player, GameState, Tile, BoundingBox } from "../types.js"
 
 export const MOVE_SPEED = .08333
 
@@ -20,10 +20,18 @@ export const getTile = (
 ): number => {
     let x = Math.round(pos.x + ox)
     let y = Math.round(pos.y + oy)
-    if (x < 0 || x >= map.width || y < 0 || y >= map.height) return Tile.WALL
+    
+    x = (x + map.width) % map.width
+    y = (y + map.height) % map.height
+
     return map.data[y * map.width + x]
 }
 
+export const wrapPos = (pos: Vec2, map: Map) => {
+    pos.x = (pos.x + map.width) % map.width
+    pos.y = (pos.y + map.height) % map.height
+}
+
 export const getTileFrontWithRot = (
     map: Map, 
     pos: Vec2, 
@@ -86,10 +94,11 @@ const updateMovementForPlayer = (
     
     let inputRot = getRot(inputKey)
     let moveRot = player.moveRotation
+    let speed = MOVE_SPEED
     let currentPosition = player.pos
 
     let turningFrontTile = getTileFrontWithRot(map, currentPosition, inputRot) 
-    if (turningFrontTile == Tile.WALL || turningFrontTile == Tile.GHOST_WALL) {
+    if (turningFrontTile == Tile.WALL || turningFrontTile == Tile.GHOST_WALL || turningFrontTile == Tile.GHOST_EXIT) {
         inputRot = Rotation.NOTHING
     }
 
@@ -97,24 +106,110 @@ const updateMovementForPlayer = (
     
     player.inputRotation = inputRot
 
-    if (turning && isStablePos(currentPosition)) {
+    if (player.velocityRotation != Rotation.NOTHING) {
+        moveRot = player.velocityRotation
+        speed *= 1.5
+    } else if (turning && isStablePos(currentPosition)) {
         currentPosition = roundPos(currentPosition)
         player.moveRotation = inputRot
         moveRot = inputRot
     }
 
     let movePos = structuredClone(currentPosition)
-    incrementPos(movePos, moveRot, MOVE_SPEED)
+    incrementPos(movePos, moveRot, speed)
+    wrapPos(movePos, map)
     
     let frontTile = getTileFrontWithRot(map, currentPosition, moveRot)
-    if (frontTile != Tile.WALL && frontTile != Tile.GHOST_WALL) {
+    if (frontTile != Tile.WALL && frontTile != Tile.GHOST_WALL && frontTile != Tile.GHOST_EXIT) {
         player.pos = movePos
         player.moving = true
     } else {
         player.pos = roundPos(currentPosition)
         player.moving = false
+        player.velocityRotation = Rotation.NOTHING
     }
 
+}
+
+const createBoundingBox = (player: Player): BoundingBox => {
+    let pos = player.pos
+    let width = player.thiccLeft > 0 ? 2 : 1
+    return {
+        x: pos.x - width/2,
+        y: pos.y - width/2,
+        w: width,
+        h: width
+    }
+}
+
+const checkBoundingBox = (aBB: BoundingBox, bBB: BoundingBox): Rotation => {
+    if (
+        aBB.x < bBB.x + bBB.w &&
+        aBB.x + aBB.w > bBB.x &&
+        aBB.y < bBB.y + bBB.h &&
+        aBB.y + aBB.h > bBB.y
+    ) {
+        let diff = {x: aBB.x - bBB.x, y: aBB.y - bBB.y}
+    
+        if (Math.abs(diff.x) > Math.abs(diff.y)) {
+            if (diff.x > 0) {
+                return Rotation.EAST
+            } else {
+                return Rotation.WEST
+            }
+        } else {
+            if (diff.y < 0) {
+                return Rotation.NORTH
+            } else {
+                return Rotation.SOUTH
+            }
+        }
+
+    } else {
+        return Rotation.NOTHING
+    }
+}
+
+const flipRotation = (rot: Rotation): Rotation => {
+    switch (rot) {
+        case Rotation.NOTHING:
+            return Rotation.NOTHING
+        case Rotation.NORTH:
+            return Rotation.SOUTH
+        case Rotation.SOUTH:
+            return Rotation.NORTH
+        case Rotation.EAST:
+            return Rotation.WEST
+        case Rotation.WEST:
+            return Rotation.EAST
+    }
+}
+
+const updateCollision = (data: GameState) => {
+
+    let players: Player[] = Object.values(data.players).filter(p => p != null && p !== undefined)
+    let bb = structuredClone(players).map(p => createBoundingBox(p))
+    let num = players.length
+
+    for (let i = 0; i < num - 1; i++) {
+        for (let j = i + 1; j < num; j++) {
+            let rot = checkBoundingBox(bb[i], bb[j])
+            if (rot == Rotation.NOTHING) {
+                continue
+            }
+
+            if (players[i].thiccLeft > 0 && players[j].thiccLeft == 0) {
+                players[j].dead = true
+                players[i].framesDead = 0
+            } else if (players[j].thiccLeft > 0 && players[i].thiccLeft == 0) {
+                players[i].dead = true
+                players[i].framesDead = 0
+            } else {
+                players[i].velocityRotation = rot
+                players[j].velocityRotation = flipRotation(rot)
+            }
+        }
+    }
 
 }
 
@@ -123,9 +218,15 @@ export const updateMovement = (data: GameState) => {
     let map = getMap(data.mapId)
     if (!map) return
 
+    updateCollision(data)
+
 	for (const id in data.players) {
 
         const player = data.players[id]
+
+        if (player.thiccLeft > 0) {
+            player.thiccLeft--
+        }
 	    
         if(!player) {
 		    continue

client/src/logic/players.ts

@@ -34,7 +34,12 @@ export const updatePlayers = (data: GameState, input: Input) => {
 			pos: {x: 1, y: 1},
             inputRotation: Rotation.EAST,
             moveRotation: Rotation.NOTHING,
+            velocityRotation: Rotation.NOTHING,
             moving: false,
+            thiccLeft: 0,
+            dead: false,
+            framesDead: 0,
+            atePellets: 0
 		};
 
 	}

client/src/main.ts

@@ -9,7 +9,7 @@ const lobby = document.getElementById("lobby")
 const mapeditor = document.getElementById("mapeditor")
 
 const maps = {
-    [0]: 'EwRgPqYgNDew+TEuW6AGT2u59mPI/PeLZclSys1AhSgThJcJb2bdq7p5rupV2DYaVFCKI9HwFDiWACyxyK5WpCqArOPSCeuqfUnzDwaGbMyT3FAGZT0ABznD9ybWv0LLq61kz4S0M9WRMANnVVDUi1AHYdQxt+dyNEhJNiNk8A3npkiVSmcUEM6E5C/wL86rlivLqxaVymltggA='
+    [0]: 'MwRgPgTOIDS/dEOU1L1sxgDDX+9CDijSTyzLcFrVabN7EnYXCUnaBOK31xCMyEUSPfg3FZ20trTlTJnPpX4iV6tRLpCOC7bslbVvNQBY41SxesBWE/bYHpTnFPkZjFResG/hpb003RGBEMR0YQQAOSIjYcNDDRntAgNi/Txl/L2CkozgXfWdgtTUANmsQKyrrAHYHFLiI2T1870KgkkzS7N6CLUdmpvbipyV4hv7pQVSe8PGittHllo7J9Z7N5Y9W3Z39uCA'
 }
 
 join.onsubmit = async function(event) {

client/src/map.ts

@@ -91,9 +91,9 @@ const genWalls = (
     return walls
 }
 
-const canItem = (tile: Tile): boolean => tile != Tile.WALL && tile != Tile.GHOST_WALL && tile != Tile.GHOST_SPAWN
+const canItem = (initial: boolean, tile: Tile): boolean => tile != Tile.WALL && tile != Tile.GHOST_WALL && tile != Tile.GHOST_SPAWN && tile != Tile.GHOST_EXIT && (initial ? tile == Tile.INITIAL_DOT : true)
 
-export const genItems = (map: Map): Items => {
+export const genItems = (map: Map, initial: boolean = true): Items => {
 
     let width = map.width
     let height = map.height
@@ -104,7 +104,7 @@ export const genItems = (map: Map): Items => {
     for (let y = 0; y < height; y++) {
         for (let x = 0; x < width; x++) {
             let tile = getPoint(width, height, data, x, y)
-            if (!canItem(tile)) continue
+            if (!canItem(initial, tile)) continue
 
             let item_key = getItemKey(x, y, width)
 
@@ -123,13 +123,13 @@ export const genItems = (map: Map): Items => {
                 type = ItemType.DOT
 
                 let tile_south = getPoint(width, height, data, x, y + 1)
-                if (canItem(tile_south) && tile_south != Tile.FOOD) {
+                if (canItem(initial, tile_south) && tile_south != Tile.FOOD) {
                     item_key = getItemKey(x, y + .5, width)
                     items[item_key] = {type, pos: {x, y: y + .5}}
                 }
 
                 let tile_east = getPoint(width, height, data, x + 1, y)
-                if (canItem(tile_east) && tile_east != Tile.FOOD) {
+                if (canItem(initial, tile_east) && tile_east != Tile.FOOD) {
                     item_key = getItemKey(x + .5, y, width)
                     items[item_key] = {type, pos: {x: x + .5, y}}
                 }
@@ -166,7 +166,7 @@ export const getMap = (mapId: number): Map | undefined => {
 }
 
 export const checkMap = (map: Map): [boolean, string | Vec2[]] => {
-    let spawns = new Array(5).fill(undefined)
+    let spawns = new Array(6).fill(undefined)
     let hasFood = false
     let hasThicc = false
     let hasInitial = false
@@ -215,6 +215,11 @@ export const checkMap = (map: Map): [boolean, string | Vec2[]] => {
                         return [false, "Map cannot have duplicate spawns"]
                     spawns[SpawnIndex.GHOST_SPAWN] = {x, y}
                     break
+                case Tile.GHOST_EXIT:
+                    if (spawns[SpawnIndex.GHOST_EXIT])
+                        return [false, "Map cannot have duplicate spawns"]
+                    spawns[SpawnIndex.GHOST_EXIT] = {x, y}
+                    break
             }
 
         }

client/src/renderer.ts

@@ -1,5 +1,5 @@
 import { getMap } from "./map.js";
-import { Items, Players, Rotation, ItemType, Map, Wall, GameState, Tile, ATLAS_TILE_WIDTH, Ghosts, Ghost, GhostType, GhostState } from "./types.js";
+import { Items, Players, Rotation, ItemType, Map, Wall, GameState, Tile, ATLAS_TILE_WIDTH, Ghosts, Ghost, GhostType, GhostState, INTRO_AUDIO, DEATH_AUDIO, MOVE_AUDIO, GHOST_AUDIO } from "./types.js";
 
 const updateStyle = (width: number, height: number) => {
 
@@ -114,32 +114,77 @@ const drawPlayers = (
     ctx: CanvasRenderingContext2D,
     atlas: CanvasImageSource,
     players: Players, 
-    frame: number
+    frame: number,
+    map: Map,
+    drawBig: boolean
 ) => {
 
-    let atlas_frames: [number, number][] = [
+    const defaultFrame: [number, number] = [0, 3]
-        [0, 2],
+
-        [1, 2],
+    const movingFrames: [number, number][] = [
-        [2, 2],
         [0, 3],
         [1, 3],
-        [0, 3],
+        [2, 3],
-        [2, 2],
+        [3, 3],
-        [1, 2],
+        [4, 3],
+        [3, 3],
+        [2, 3],
+        [1, 3],
     ]
 
+    const deathFrames: [number, number][] = [
+        [0, 3],
+        [4, 2],
+        [3, 2],
+        [2, 2],
+        [1, 2],
+        [0, 2],
+    ]
+
+    const playerHues: string[] = [
+        '#d93030',
+        '#e6c147',
+        '#eb42d4',
+        '#425eeb'
+    ]
+
+    let hueIndex = 0
     for (let id in players) {
     
         let player = players[id] 
         if (!player) continue
 
-        let atlasIndex = atlas_frames[0]
+        if (
-        if (player.moving) {
+            drawBig && player.thiccLeft == 0 || 
-            atlasIndex = atlas_frames[Math.floor(frame / 2) % atlas_frames.length]
+            !drawBig && player.thiccLeft > 0
+        ) {
+            hueIndex++
+            continue
+        }
+
+        let atlasIndex = defaultFrame
+        if (player.dead) {
+            atlasIndex = deathFrames[Math.floor(player.framesDead / 20)]
+        } else if (player.moving) {
+            atlasIndex = movingFrames[Math.floor(frame / 2) % movingFrames.length]
+        }
+
+        if (!atlasIndex) {
+            hueIndex++
+            continue
+        }
+
+        let rot = player.moveRotation
+        if (rot == Rotation.NOTHING) {
+            if (player.pos.x < map.width / 2) {
+                rot = Rotation.EAST
+            } else {
+                rot = Rotation.WEST
+            }
         }
 
         let rotation: number
-        switch (player.moveRotation) {
+        switch (rot) {
             case Rotation.NORTH:
                 rotation = 270
                 break
@@ -150,21 +195,23 @@ const drawPlayers = (
                 rotation = 180
                 break
             case Rotation.EAST:
-            default:
                 rotation = 0
                 break
         }
 
-        drawSprite (
+        drawSpriteHue (
             ctx,
             player.pos.x,
             player.pos.y,
-            1,
+            player.thiccLeft > 0 ? 2 : 1,
             atlas,
             atlasIndex,
             ATLAS_TILE_WIDTH,
-            rotation
+            rotation,
+            playerHues[hueIndex]
         )
+
+        hueIndex++
     }  
 }
 
@@ -244,7 +291,7 @@ const drawGhosts = (
                 ghost.pos.y,
                 1,
                 atlas,
-                [4, 3],
+                [3, 1],
                 ATLAS_TILE_WIDTH,
                 0
             )
@@ -280,15 +327,15 @@ const drawItems = (
         switch (item.type) {
             case ItemType.DOT:
                 width = .2
-                atlasIndex = [2, 3]
+                atlasIndex = [4, 3]
                 break
             case ItemType.THICC_DOT:
                 width = .4
-                atlasIndex = [2, 3]
+                atlasIndex = [4, 3]
                 break
             case ItemType.FOOD:
                 width = 1
-                atlasIndex = [3, 3]
+                atlasIndex = [4, 1]
                 break
             default:
                 continue
@@ -405,7 +452,7 @@ const drawMapCanvas = (
 
 }
 
-const draw_debug_sprites = ( 
+const drawDebugSprites = ( 
     ctx: CanvasRenderingContext2D, 
     atlas: CanvasImageSource, 
     map: Map
@@ -429,27 +476,30 @@ const draw_debug_sprites = (
                 case Tile.GHOST_SPAWN: 
                     atlasIndex = [3, 0]
                     break
+                case Tile.GHOST_EXIT:
+                    atlasIndex = [5, 0]
+                    break
                 case Tile.FOOD:
-                    atlasIndex = [3, 3]
-                    break
-                case Tile.PLAYER_SPAWN_1:
-                    atlasIndex = [3, 1]
-                    break
-                case Tile.PLAYER_SPAWN_2:
                     atlasIndex = [4, 1]
                     break
+                case Tile.PLAYER_SPAWN_1:
+                    atlasIndex = [5, 1]
+                    break
+                case Tile.PLAYER_SPAWN_2:
+                    atlasIndex = [5, 2]
+                    break
                 case Tile.PLAYER_SPAWN_3:
-                    atlasIndex = [3, 2]
+                    atlasIndex = [5, 3]
                     break
                 case Tile.PLAYER_SPAWN_4:
-                    atlasIndex = [4, 2]
+                    atlasIndex = [5, 4]
                     break
                 case Tile.THICC_DOT:
-                    atlasIndex = [2, 3]
+                    atlasIndex = [4, 3]
                     size = .4
                     break
                 case Tile.INITIAL_DOT:
-                    atlasIndex = [2, 3]
+                    atlasIndex = [4, 3]
                     size = .2
                     break
             }
@@ -483,9 +533,10 @@ const drawMap = (
         mapCanvas.height = map.height * ATLAS_TILE_WIDTH
         
         let map_ctx = mapCanvas.getContext("2d")
+        map_ctx.imageSmoothingEnabled = false
         drawMapCanvas(map_ctx, atlas, map)
         if (editor) {
-            draw_debug_sprites(map_ctx, atlas, map)
+            drawDebugSprites(map_ctx, atlas, map)
         }
     }
 
@@ -497,17 +548,73 @@ const drawMap = (
 
 }
 
+const updateAudio = (state: GameState) => {
+    if (state.roundTimer < 60 * 5) {
+        if (!INTRO_AUDIO.getPlaying()) {
+            INTRO_AUDIO.play(false)
+        }
+    } else {
+        if (INTRO_AUDIO.getPlaying()) {
+            INTRO_AUDIO.stop()
+        }
+    }
+
+    let moving = false
+    for (let id in state.players) {
+        let player = state.players[id]
+
+        if (player.dead && player.framesDead == 0) {
+            DEATH_AUDIO.play(false)
+        }
+    
+        moving ||= player.atePellets > 0
+
+    }
+
+    if (moving && state.endRoundTimer === undefined) {
+        if (!MOVE_AUDIO.getPlaying()) {
+            MOVE_AUDIO.play(true)
+        }
+    } else {
+        if (MOVE_AUDIO.getPlaying()) {
+            MOVE_AUDIO.stop()
+        }
+    }
+
+    if (state.roundTimer > 60 * 5 && state.endRoundTimer === undefined) {
+        if (!GHOST_AUDIO.getPlaying()) {
+            GHOST_AUDIO.play(true)
+        }
+    } else {
+        if (GHOST_AUDIO.getPlaying()) {
+            GHOST_AUDIO.stop()
+        }
+    }
+} 
+
 let lastMapDrawn: number | undefined
 export const startGraphicsUpdater = () => {
 
     let canvas = document.getElementById("canvas") as HTMLCanvasElement
     let atlas = document.getElementById("atlas") as HTMLImageElement
+    let lobby = document.getElementById("lobby")
 
     return (
         data: GameState, 
         frame: number,
         editor: boolean = false
     ) => {
+
+        if (!data.started) {
+            canvas.style.display = 'none'
+            if (lobby)
+                lobby.style.display = ''
+            return
+        } else {
+            canvas.style.display = ''
+            if (lobby)
+                lobby.style.display = 'none'
+        }
         
         let map = getMap(data.mapId)
 
@@ -520,14 +627,20 @@ export const startGraphicsUpdater = () => {
         }
 
         let ctx = canvas.getContext("2d")
+        ctx.imageSmoothingEnabled = false
         ctx.clearRect(0, 0, canvas.width, canvas.height)
         
         drawMap(ctx, atlas, map, lastMapDrawn, editor)
         drawItems(ctx, atlas, data.items)
         drawGhosts(ctx, atlas, data.ghosts)
-        drawPlayers(ctx, atlas, data.players, frame)
+        drawPlayers(ctx, atlas, data.players, frame, map, false)
+        drawPlayers(ctx, atlas, data.players, frame, map, true)
         updateStyle(map.width, map.height)
 
+        if (!editor) {
+            updateAudio(data)
+        }
+
         lastMapDrawn = map.id
 
     }

client/src/types.ts

@@ -2,10 +2,84 @@
 export const ATLAS_TILE_WIDTH = 32
 export const GAME_MAP_COUNT = 4
 
+const loadAudio = (src: string, callback: (node: GameAudio) => void) => {
+
+    let actx = new AudioContext()
+
+    fetch(src, {mode: "cors"})
+        .then((resp) => {
+            return resp.arrayBuffer()
+        })
+        .then((ebuf) => {
+            actx.decodeAudioData(ebuf, (abuf) => {
+
+                var sourceNode = null,
+                    startedAt = 0,
+                    pausedAt = 0,
+                    playing = false
+
+                var play = (loop: boolean) => {
+                    var offset = pausedAt
+    
+                    sourceNode = actx.createBufferSource()
+                    sourceNode.connect(actx.destination)
+                    sourceNode.buffer = abuf
+                    sourceNode.start(0, offset)
+                    sourceNode.loop = loop
+
+                    startedAt = actx.currentTime - offset
+                    pausedAt = 0
+                    playing = true
+                }
+
+                var pause = () => {
+                    var elapsed = actx.currentTime - startedAt
+                    stop()
+                    pausedAt = elapsed
+                };
+
+                var stop = () => {
+                    if (sourceNode) {          
+                        sourceNode.disconnect()
+                        sourceNode.stop(0)
+                        sourceNode = null
+                    }
+                    pausedAt = 0
+                    startedAt = 0
+                    playing = false
+                }
+
+                var getPlaying = (): boolean => {
+                    return playing
+                }
+
+                callback({play, pause, stop, getPlaying})
+            })
+        })
+}
+
+let EMPTY_AUDIO: GameAudio = {
+    play: (_loop: boolean) => {},
+    pause: () => {},
+    stop: () => {},
+    getPlaying: () => true,
+}
+
+export var INTRO_AUDIO = EMPTY_AUDIO
+export var DEATH_AUDIO = EMPTY_AUDIO
+export var MOVE_AUDIO = EMPTY_AUDIO
+export var GHOST_AUDIO = EMPTY_AUDIO
+
+loadAudio('sfx/intro.mp3', (node) => INTRO_AUDIO = node)
+loadAudio('sfx/death.mp3', (node) => DEATH_AUDIO = node)
+loadAudio('sfx/move.wav', (node) => MOVE_AUDIO = node)
+loadAudio('sfx/ghost.wav', (node) => GHOST_AUDIO = node)
+
 export enum Tile {
     EMPTY = 0,
     WALL = 1,
     GHOST_WALL = 2,
+    GHOST_EXIT = 11,
     FOOD = 3,
     PLAYER_SPAWN_1 = 4,
     PLAYER_SPAWN_2 = 5,
@@ -68,8 +142,11 @@ export type Ghost = {
     pos: Vec2,
     type: GhostType,
     target: Vec2,
+    targetQueue: Vec2[],
     state: GhostState,
     currentDirection: Rotation,
+    hasRespawned: boolean,
+    framesInBox: number,
 }
 
 export type KeyMap = {
@@ -104,8 +181,14 @@ export type Player = {
     pos: Vec2,
     moveRotation: Rotation,
     inputRotation: Rotation,
+    velocityRotation: Rotation,
     moving: boolean,
-    name?: string
+    thiccLeft: number,
+    name?: string,
+    dead: boolean,
+    framesDead: number,
+    atePellets: number,
+    
 }
 
 export type PlayerInput = {
@@ -151,7 +234,8 @@ export enum SpawnIndex {
     PAC_SPAWN_2 = 2,
     PAC_SPAWN_3 = 3,
     PAC_SPAWN_4 = 4,
-    GHOST_SPAWN = 0
+    GHOST_SPAWN = 0,
+    GHOST_EXIT = 5
 }
 
 export type Map = {
@@ -177,10 +261,26 @@ export type GameState = {
     items: Items,
     frame: number,
     rng: number,
-    mapId: number | undefined
+    mapId: number | undefined,
+    roundTimer: number,
+    endRoundTimer: number
 }
 
 export type Frame = {
     data: GameState,
     input: Input
 }
+
+export type GameAudio = {
+    getPlaying: () => boolean,
+    play: (loop: boolean) => void,
+    pause: () => void,
+    stop: () => void
+}
+
+export type BoundingBox = {
+    x: number,
+    y: number,
+    w: number,
+    h: number
+}