I decided to change the complete look of this website to something that feels a bit more housy vibe. and made the dark mode into green colored.
fixed a bug for generating because each user has a limit, so this time once you reach your limit you will get a message.
It’s DEVLOG TIME:»
Just pushed a much-needed update to the project! First up, I finally tracked down and killed a frustrating maze error in Level 10 that was completely breaking the game right near the finish line—so the final levels are officially working and playable now. While I was at it, I also took the time to write a proper README. It covers everything from setup instructions to gameplay mechanics, making the codebase a lot more welcoming and less of a black box for anyone who wants to test it out or contribute. Next up is getting some feedback and seeing how quickly people can break it!
Also, when you are shielded for the power up, you can’t eat the ghosts.
Built a browser escape room game - vanilla HTML/CSS/JS, no frameworks, no libraries. Just a single index.html, style.css, and script.js.
You’re trapped inside a failing machine intelligence called NEXUS-09. You’ve got 5 minutes to recover 4 access fragments and get out before containment seals the partition. Cyberpunk/hacker terminal aesthetic - scanlines, glitch text, a particle field background, screen shake, the works.
- Terminal - crack a 4-digit auth code using deduced clues (first digit > 3, second digit = cores online, third = flagged subsystems, last digit = double the first, wrapping past 9).
Once all 4 are collected, the game unlocks a shutdown/escape sequence with a progress bar and a scored results screen (time remaining, mistakes, puzzles completed → rank from Rookie Hacker up to System Breaker), with high score saved locally.
.mp3/.wav anywhere.offsetWidth so it can retrigger), fired on mistakes, fragment pickups, and timer milestones.Everything is organized into small classes - AudioEngine, ParticleField, Telemetry, CountdownTimer, one class per puzzle (TerminalPuzzle, SignalPuzzle, MemoryPuzzle, CorePuzzle), and a top-level Game class that owns state (which fragments are collected, mistakes, current view) and wires everything together. Screens are just <section> elements toggled with an active class — boot log → start screen → game → final access → escape sequence → win/lose.
Spent this session tracking down a login bug that had been bugging me - turns out a security header on my site was quietly blocking the auth popup from talking back to the app, so users had to refresh after signing in for it to actually register. Fixed that, then made the upload box actually prompt you to sign in instead of just… doing nothing when you’re logged out. After that I gave the whole site a real visual identity instead of the generic AI-startup look it had - leaned into a blueprint/drafting theme since it fits an architecture tool, ditched the soft gradient blobs for a grid background, and rebuilt all the buttons with a chunky neo brutalist shadow style. Also added dark mode from scratch - toggle in the navbar, remembers your preference, styled across every page - and caught a dumb bug along the way where one page’s card was using the wrong color variable and turned into an unreadable white blob in dark mode. Fun catch.
What was broken: Login/upload silently failed for signed-out users, and after signing in, the UI wouldn’t reflect it until a manual refresh.
What you found: Console showed Cross-Origin-Opener-Policy policy would block the window.closed call - the site’s COOP header was preventing Puter’s auth popup from reporting back to the app.
The fix: Added vercel.json with Cross-Origin-Opener-Policy: unsafe-none, plus made the upload dropzone and “Get Started” button properly prompt/guard sign-in instead of failing silently.
Verified: Signed in -> UI updated instantly, no refresh -> uploaded a floor plan -> rendered correctly end-to-end.
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.
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.
For VisionArch you can test it/ generate 4-5 times then you hit limit and need to wait for your limit to reset.
Resolved issues regarding the progress bar which was working incorrectly. Introduced a new authorization guard to prevent unauthorized people from causing authentication issues upon webpage loading. Added a silent worker ping to ensure that the Puter worker is awake prior to requests and thereby eliminate cold starts with multiple CORS errors and 404s during access of community pages. Corrected the missing environment variables in local configuration and Vercel dashboard.
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.
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.
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.
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 reachableInterestingly, 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:
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.
TIME FOR DEVLOG> was busy so I slowed down.
Fixed: The Puter consent popup was getting shown to all visitors, instantly Discovered that the getCurrentUser() function is executing puter.auth.getUser() every time the page loads, for every single visitor, including those who haven’t signed in at all. This was triggering the Puter consent modal asking whether the user consents to seeing “this site uses Puter”. Fixed by adding an additional call to puter.auth.isSignedIn(), a synchronous function that doesn’t require network access, which checks if a session already exists. Users who aren’t logged in get directed straight to the homepage now.
Fixed: Regeneration with a different style required a refresh.
This was due to double invocation of the setCurrentImage() method, which overrode the just-completed AI-rendered image with the stored hosted URL. Removed the redundant call, so that the UI respects the freshly generated image. Improved the “no text in renders” requirement.
Some renders featured room labels like “Bathroom” or “Bedroom”. Re-wrote the prompt to the AI, putting text-removal above all other rules, emphasizing that the room label informs furniture choices but should not be present itself, and instructing the AI to include the self-check step in the result.
Added README Credits, features, tech stack, architecture notes, local development instructions, Vercel deployment instructions.
Next: going through the whole app end-to-end once more - code and UI - before calling this fully submitted
WHAT’S NEW
Projects no longer have to stay stuck as “Residence 1239812737128.” Now you can simply click the title in the visualizer, and it becomes editable, just edit and hit enter to save.
I also added a Floor plan template on draw page because not everyone wants to start from a blank canvas, so I added 5 starter templates (Studio, 1-Bedroom, 2-Bedroom, Open Loft, Family Home) built with tldraw’s shape API. One click loads a labeled room layout onto the canvas, which you can edit and all before generating the 3D render. Additionally, I added a hint for new users, so they immediately understand that they need to draw and generate instead of just thinking it’s blank canvas not knowing what to do.
Fixed: logged-out visitors couldn’t see Community at all
This is an issue that had a greater depth than it appeared to be. All calls made through the workers.exec() of Puter’s automatically attach the user’s session to the call. Although, this thoroughly works for authenticated actions, any calls made by un-logged-in users will not execute properly, even on routes that are not required to be authenticated on the server side. The read-only endpoints (public project list, and comments) were switched to plain fetch() calls, as they do not require a user session to execute in any way. Therefore, un-logged-in users can now browse the Community and view designs.
Fixed: voting did nothing when logged out
Similar to the above issue, there were simply no active buttons for guests to ‘vote’ at all. Now, when an un-logged-in visitor clicks on the Upvote / Downvote button (or tries to comment), it now brings up the Puter sign-in pop-up automatically. So, it allows for a real call to action rather than a ‘dead click’.
