IT’S DEVLOG TIMEE :»>

It’s been a tough few days trying to figure out how to fix the MAZE, but I finally figured out how to do it through A* pathfinding. Fixed all the maps. Which took me so longggg.

Also, Fixed speed inconsistency bugs and collision detection to eliminate Pac-Man getting stuck at maze tiles - movement now uses tile-based physics that checks every frame with no edge-case stalls, plus input buffering lets players queue moves ahead for responsive controls. Implemented proper ghost freeze behavior where frozen ghosts stop completely for 5 seconds, stay visible, and remain killable while frozen.

Made the Extra Life now work on the screen when you get an Extra life it will update in the UI top middle and see a new Pac-man face get added.

On the side of the Maps you can see there is no wall blocking, because now I made it a teleport to the other side.

Fixed all six power-up behaviours this session. Speed boost and double points were already working. The main rework was on shield, freeze, and slow.

Shield now stays active until a ghost physically touches the player, when that happens, the ghost turns scared/blue instead of the player dying, and the shield remains active for future hits on a 15-second timer. Freeze keeps ghosts in their normal colour but completely stops their movement for 3 seconds - they’re still killable while frozen. Slow keeps ghosts at their normal appearance but skips movement every other frame, effectively halving their speed for 5 seconds.

Also implemented proper ghost spawn behavior. Ghosts now spawn at the center of the maze (on or near the ghost house tiles) and release one by one first ghost after 2 seconds, then one every 3 seconds. While waiting to release they bob up and down inside the house. After death, the release sequence resets so ghosts trickle out again rather than all rushing at once.

Pac-Man now spawns at a random open tile at least a third of the maze width away from the centre, so every life and every game starts from a different position.

Maze connectivity fix was attempted this session but not completed - some maps still have corridors that can trap the player. Carrying this into the next session

I fixed up my previous issues with lives resetting to 3 for each level completed as well as start Game taking you back to level 1 rather than starting at the highest level you’ve unlocked. The ghost speed has been halved (from 2px to 1px/frame) which makes everything seem much more balanced with me running around at 60fps!

I’ve added a proper pause menu overlay along with options to toggle Music & SFX - I had previously run into an issue where if you paused the game then played again the menu music would keep playing. To fix this I’m keeping track of all active WebAudio Oscillators and automatically stop them whenever we begin gameplay.

We’ve added some really nice little touches too! For example, when you die Pac-Man will close his mouth, spin twice and slowly shrink away over 80 frames before disappearing completely. You’ll also get a sweet animation when you spawn growing up from 0 to full size over 40 frames. We originally couldn’t get the death animation working because we’d set our global variable gameActive = false during dying which turned off the entire update loop so I’ve updated Pac-Man’s update method to continue updating even when he’s dying / spawning. Finally, I made sure to make Pac-Man disappear once he dies to ensure no weird visuals happen after respawning.

We added a yellow flash on finishing a level.

Floating score popups show up every time you eat a ghost. Now there’s an animated HUD that shows your current score.

Previously, canvas animations were off due to transform translation applied twice (once during animation and once more when drawing). Now we translate to our sprite’s center before applying any additional transformation.

DEVLOG TIME:>

During this session, I incorporated complete mobile compatibility. The directional pad appears automatically on touch devices through (pointer:coarse) through CSS thus eliminating the need for any device detection as it will be shown as soon as the browser detects a device with touch input. Each button utilizes touchstart instead of click, so there is no 300ms tap delay that would make the controls slow or laggy.

I also introduced swipe detection on the canvas as a substitute for the directional pad. The minimum distance for swipe detection is 30px, filtering unintended touches and also utilizing the main axis (horizontal or vertical) in order to identify the direction even in case of diagonal swipes.

I added responsive CSS for screens smaller than 480px thus allowing the fonts, buttons, and HUD to resize, so no overflowing occurs on small screens. I verified this by checking the local network IP through my mobile, as both devices were connected to the same Wi-Fi network.

The InputManager is now capable of working with three types of input in one place - keyboard, touch directional pad, and swipe, all of them leading to a single nextDirection property, which is accessed by the main game loop.

Added an audio system using the WebAudio API. No external sound files everything is generated programmatically using oscillators and gain nodes. Each game event has its sound: a short square wave blip for eating dots a sawtooth drop for eating pellets, a triangle tone for eating ghosts a descending three-note jingle for death and a rising three-note fanfare for level complete.

The main menu has a looping chiptune melody. 25 Notes scheduled ahead of time using ctx.currentTime, which avoids timing drift that would happen with repeated setTimeout calls. It loops by scheduling the playthrough when the current one ends.

The trickiest part was the browser autoplay policy. Browsers block AudioContext from making sound until the user interacts with the page. The fix was checking ctx.state === suspended on the click and calling ctx.resume() before trying to play anything.

Finished power-up effects. Freeze and slow work via frame timers (_frozenTimer _slowTimer) set directly on each monster. The monster update method checks these at the top before doing anything effectively pausing or slowing it without touching core movement logic.

Known issue: menu music doesn’t stop immediately when the game starts. There’s a 1-2 overlap before it cuts out. Will fix session along with, in-game sound effects not always triggering. Investigating AudioContext state management across the menu-> game transition.

DEVLOG TIME!!!

Added ghosts to the game this session. The ghost AI has 4 behavior types - chaser, ambusher, predictor, and patroller, targeting player based on various positions. Also added A* path finding to have the ghosts go around walls instead of choosing adjacent tiles that are closer to them.

Majority of time in this session was spent debugging the movement. It turned out to be a floating-point problem where, when the ghost speed is not divisible by the tile size (20 px), the pixelX % tileSize is never equal to 0 and therefore the alignment function is never called resulting in the ghost moving for 2 px per frame. Fixed this by making the ghost speed fixed at an integer value (2) that is divisible by 20.

Eating the power pellet causes the ghost to go into the frighten state which makes the ghost turn blue and move randomly. The player receives 200 points and the respawn timer starts when a ghost in the frighten state is eaten.

WHAT’s NEW:>

Devlog Time!!!

Got Pac-Man actually moving through the maze this session. Built the Player class with grid-based movement - Pac-Man only changes direction when pixel position is exactly aligned to a tile, which prevents clipping through walls. Added direction queuing so if you press a turn slightly early it still registers when the next tile is reached, making controls feel responsive instead of stiff.

Also split out InputManager, CollisionSystem, and UIManager into their own modules. Dot collection works - eating a dot removes it from the array, updates the grid, and increments score. Level completes when all dots and pellets are cleared, with a 500 x level bonus.

One thing worth noting from Devlog 2 - the maze connectivity issue. After designing all 10 maze layouts, levels 3-10 had isolated sections where dots were completely unreachable. Wrote a flood-fill validator that BFS traverses from the first dot and counts how many dots are reachable. Then wrote an auto-fixer that finds disconnected sections and carves the shortest Manhattan path between them. All 10 levels now pass with 100% dots reachable.

DEVLOG TIME:> !!

I have improved the maze system used in my game, Pac-Man.

Originally, I thought of not only using one maze and having a full leveling system. In this, I calculated and created 10 mazes with different sizes, difficulties, and complexity levels.

In addition, I modified the class MazeManager in such a way that our game automatically changes levels without requiring a manual change of the mazes.

In testing new mazes, I introduced a checking mechanism so that we will know whether our mazes have any unreachable dots. For some reason, it turned out that some parts of the maze were blocked.

• Maze validation: 195/218 dots reachable
• Blocked sections were identified. Some of the dots can’t be accessed.

Interestingly, the maze looked perfectly okay visually, but the navigation test indicated that some of the areas of my maze were not accessible.

At the moment, I plan on fixing the blocked paths and test out each level.

I might also change some things later once the game is fully playable and I can properly test the difficulty, such as:

• maze layouts
• ghost difficulty
• level progression
• number of ghosts/speed scaling

Right now the goal is getting the core gameplay working first, then balancing everything afterwards.

I’ve been really busy but here is the first DEVLOG for Pac-man:>

I’m planning on doing unique things in this Pac-man it won’t be a normal Pac-man.

What I did:
Built all 5 screens for the game - main menu, level select, how to play, game screen and game over. No gameplay yet, just the full UI shell. Screen switching works by toggling a single. active class, all screens live in the DOM simultaneously. Biggest challenge was the SVG ghosts. Drew them in pure SVG using and so the shape is defined once and reused everywhere with different colors via a CSS variable –gc. Also styled elements in the How to Play screen to look like actual keyboard keys. Ghost bobbing animation on the menu uses staggered animation-delay so they move in a wave instead of all at once.