NeoCade Devlog #4: ui improvements and debugging

Before moving on to the third game in the Neocade (which is probably going to be Asteroids), I needed to take a step back. I decided to dedicate this entire session to improving the UI I already have and doing some debugging. Here is a summary of the changes I made:

Change 1: UI Improvements

I realized the arcade monitor was looking a bit too clean. I used CSS linear gradients to add a half transparent scanline effect across the entire screen. It instantly gave the game a genuine 1980s retro texture.
In Snake, the flat colored blocks for the body and apple looked kind of boring. So, i used html canvas shadowBlur and shadowColor to give the snake and apples like this glowing effect. I also swapped the apple to appear as a circle so it looks better and is easier to distinguish from the snake.
To make the game more fun and realistic, I implemented a high score system for Snake using localStorage. So, instead of wiping the browser’s memory every time the game ends, the high score is stored locally so the user can try to beat it later. I also added a “Press Space to Play Again” listener to make restarting much smoother.

Change 2: Debugging

Bug 1:

I found a bug in Pong where, if the ball traveled right against the edge, it sometimes vibrated and never bounced off. My original logic essentially said, “If the ball goes past the wall, reverse its speed.” However, at high speeds (in harder modes), the ball would go so deep into the wall that reversing it once didn’t push it completely out. On the next frame, it was still in the wall, so it reversed again and again, creating this vibration.

To fix this, i changed the code to teleport the ball back onto the exact edge of the canvas. i then used Math.abs() to force the velocity in the correct direction (e.g., forcing a positive downward speed when hitting the ceiling) rather than blindly flipping the sign.

Bug 2:

When the snake collided with a wall or itself, its head went past the wall before the Game Over triggered. The problem was i was updating the snake’s coordinates first, then checking for a crash. Because the head existed outside the canvas before the game froze, it disappeared on the Game Over screen.

To fix this, i rewrote the movement function to calculate the nextX and nextY coordinates, checking them against the boundaries before actually moving the array. Now, the game freezes with the head pressed against the wall.

Bug 3:

There was a small bug in Pong where the computer’s paddle crossed the border of the screen when the ball was close to the floor or ceiling. Because the ai’s paddle follows the ball’s center, the top or bottom half of the paddle would move off-screen.

To fix this, i added a hard limit on the top and bottom of the canvas that completely stops the paddle from moving past the edges.

Bug 4:

The Snake game field itself was too small, leaving a ton of empty space on the arcade monitor (visible in my previous devlog’s screenshot). So, I expanded the size of the Snake game field to take up a much larger portion of the pink box’s space.

Bug 5:

My Pong difficulty logic was a mess. The ball speeds for different levels were handled in button clicks, and the computer ai speed was handled by a bunch of if/else blocks. Also, my “Easy” mode nerfed the player’s paddle speed so badly it made catching fast, steep angles physically impossible.

To fix this, i centralized all difficulty variables. I added an aiSpeed parameter directly to my startGame() function so every speed value is now controlled from one single place, which made everything so much easier. I also buffed the player paddle on Easy mode so the game always feels fun and doable, instead relying on the ai’s speed to adjust the difficulty.