Back to projects

Project case study

Synthwave Space

2D JavaScript game with retro-futuristic visuals, keyboard/touch controls, and adaptive difficulty.

My roleDeveloper
Technologies used
  • JavaScript
  • HTML5 Canvas
  • CSS
  • Web Audio API
Open video
Synthwave Space cover
Project cover

Problem

Build a stable game loop without frameworks.

Keep gameplay smooth across different screen sizes.

Solution

Architecture at a glance
  • Keyboard and touch input for movement and actions.
  • Game state: energy, shield, score, and combo multiplier.
  • Timers for enemy waves, power-ups, and special events.
Technical decisions
  1. HTML5 Canvas rendering with a continuous delta-time game loop.
  2. Entity-based structure (ship, enemies, shots, power-ups) for maintainability.
  3. Adaptive difficulty with wave scaling and hazard pacing.

Result

Consolidated core game-development fundamentals in vanilla JavaScript.

  • Canvas game loop, collision, and state management.
  • Gameplay design with progression and balancing.
  • Audio and visual effect integration for player feedback.
  • Modular front-end architecture without heavy dependencies.

More about the project

Full case details, collapsed for optional reading.

Full description

Built to practice 2D game architecture in vanilla JavaScript, with focus on performance, visual feedback, and desktop/mobile UX.

2D game built with JavaScript + HTML5 Canvas, real-time HUD, progressive difficulty, and a synthwave atmosphere with audio and particle effects.

Delivered a consistent experience across desktop and mobile.

Left an extensible base for new modes and content.

Problem

  • Create difficulty progression without harming readability.
  • Add visual and audio effects while preserving performance.
Features and highlights
  • Keyboard controls on desktop and touch controls on mobile.
  • Energy/shield system, boss fights, and score multiplier.
  • Power-ups, particle effects, camera shake, and visual feedback.
  • High-score persistence to track progression.
  • Consistent retro-futuristic visual direction.
  • Experience adapted for both desktop and mobile.
  • Lightweight and responsive game loop in vanilla JavaScript.
  • Foundation ready for new stages, enemies, and mechanics.
Technical architecture and data
  • Synthwave audio-visual layer with effects powered by Web Audio API.

Technical architecture

How the case was designed as a product

2D JavaScript game with retro-futuristic visuals, keyboard/touch controls, and adaptive difficulty.

JavaScriptLanguageHTML5 CanvasWeb platformCSSWeb platformWeb Audio APIWeb platform

Data used

  • Keyboard and touch input for movement and actions.
  • Game state: energy, shield, score, and combo multiplier.
  • Timers for enemy waves, power-ups, and special events.
  • Scene entities (ship, enemies, projectiles, particles, HUD).

Core components

  • Keyboard controls on desktop and touch controls on mobile.
  • Energy/shield system, boss fights, and score multiplier.
  • Power-ups, particle effects, camera shake, and visual feedback.
  • High-score persistence to track progression.

Technical decisions

  • Canvas game loop, collision, and state management.
  • Gameplay design with progression and balancing.
  • Audio and visual effect integration for player feedback.
  • Modular front-end architecture without heavy dependencies.
How to run
  1. Clone the repository.
  2. Open index.html in a browser.
  3. Optional: serve with python -m http.server 8000.
  4. Open http://localhost:8000 and start playing.
Additional media
Gameplay featuring progressive waves, visual effects, and neon atmosphere.
Credits

Developed by Matheus Siqueira.

Next projectAd Performance Intelligence

Next.js BI dashboard comparing Google Ads and Meta Ads on simulated data: KPIs, funnel and ROAS.

View full case