Star Collector

Star Collector is a small 2D browser game I created to demonstrate how much can be built with standard browser technologies without using a game engine or external framework.

The goal is simple: collect 10 yellow stars before the 30-second timer reaches zero while avoiding the red obstacles placed around the arena.

Gameplay

Click the game area to give it focus, then move the player with either the WASD keys or the arrow keys.

Each collected star increases the score and causes another star to appear at a safe location. Touching a red obstacle ends the round, and failing to collect all 10 stars before the timer expires results in a loss.

A Restart Game control resets the arena so another round can begin immediately.

Technical implementation

The game is built entirely with:

• HTML
• CSS
• JavaScript
• HTML Canvas
• requestAnimationFrame
• Keyboard and pointer events
• Custom collision detection

There are no third-party libraries, game engines, external graphics, packages, or build commands.

The complete game is contained in a single index.html file.

Game systems

Star Collector includes:

• Canvas-based 2D rendering
• WASD and arrow-key movement
• Frame-time-based player movement
• Diagonal movement normalization
• Axis-aligned collision detection
• Random collectible placement
• Obstacle avoidance when spawning stars
• Score tracking
• 30-second countdown
• Win and loss states
• Restart support
• Focus-aware pause behavior
• Keyboard focus management
• Accessible status messaging
• Game loop

The game uses requestAnimationFrame() for its animation loop.

Instead of moving the player a fixed distance on every frame, movement is calculated using elapsed time. This makes player movement more consistent across displays running at different refresh rates.

The game separates input, state updates, collision checks, and rendering so each part of the project can be extended independently.

Collision system

The player, obstacles, and collectible locations are represented using rectangular coordinates.

A reusable overlap function determines whether two game objects intersect. The same system is used to detect:

• player collisions with obstacles;
• player collisions with stars; and
• invalid collectible spawn locations.

Focus and pause behavior

Star Collector pauses gameplay when the browser window or game canvas loses focus.

This prevents the countdown from continuing while the player is using another tab or interacting elsewhere on the page. Keyboard state is also cleared when focus changes so movement cannot remain stuck after returning to the game.

Current version

This version is designed primarily for desktop browsers and uses keyboard controls.

Touch controls are not currently included.

Future ideas

Possible future improvements include:

• multiple levels;
• difficulty settings;
• touch controls;
• animated sprites;
• sound effects and mute controls;
• moving hazards;
• persistent high scores;
• additional collectible types;
• improved mobile support; and
• a more advanced fixed-step game simulation.

Related tutorial

I also published a full ProfoundSyntax Discussion explaining how Star Collector was built step by step, including the complete source code and explanations of the Canvas system, game loop, movement, collision detection, scoring, timing, pause behavior, and possible extensions.