diff options
Diffstat (limited to 'client/src/renderer.ts')
| -rw-r--r-- | client/src/renderer.ts | 169 |
1 files changed, 141 insertions, 28 deletions
diff --git a/client/src/renderer.ts b/client/src/renderer.ts index cf3189a..3c27297 100644 --- a/client/src/renderer.ts +++ b/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][] = [ - [0, 2], - [1, 2], - [2, 2], + const defaultFrame: [number, number] = [0, 3] + + const movingFrames: [number, number][] = [ [0, 3], [1, 3], + [2, 3], + [3, 3], + [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 (player.moving) { - atlasIndex = atlas_frames[Math.floor(frame / 2) % atlas_frames.length] + if ( + drawBig && player.thiccLeft == 0 || + !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] + atlasIndex = [4, 1] break case Tile.PLAYER_SPAWN_1: - atlasIndex = [3, 1] + atlasIndex = [5, 1] break case Tile.PLAYER_SPAWN_2: - atlasIndex = [4, 1] + 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 } |