Back to projects

Project case study

Subway Surfers

Game inspired by Subway Surfers built to practice game logic and development.

My roleDeveloper
Technologies used
  • JavaScript
  • HTML5
  • Canvas
  • CSS
Open video
Cover of Subway Surfers
Project cover

Problem

Build a smooth browser-based game loop.

Handle collisions and obstacles in real time.

Solution

Architecture at a glance
  • Keyboard input for movement.
  • Game state (speed, score, collisions).
  • Obstacle spawn timers.
Technical decisions
  1. Canvas rendering with a continuous update loop.
  2. Simple collision system and obstacle reset.
  3. Gradual speed increase for challenge.

Result

Consolidated JS game loop fundamentals.

  • Game loop and Canvas rendering.
  • Collision logic and state handling.
  • Modular front-end structure.
  • Rapid 2D game prototyping.

More about the project

Full case details, collapsed for optional reading.

Full description

Project created to practice game loop, collision, and character control in a 2D environment.

JavaScript and HTML5 Canvas for rendering, with CSS for layout and HUD.

Implemented real-time collision and scoring.

Built an extensible base for future mechanics.

Problem

  • Scale difficulty without breaking gameplay.
  • Organize code for new levels and assets.
Features and highlights
  • Smooth character movement.
  • Dynamic obstacles with collision detection.
  • Real-time score tracking.
  • Base ready for new levels and skins.
  • Responsive gameplay with solid performance.
  • Consistent controls and collisions.
  • Clear structure for project evolution.
  • Hands-on game design practice.
Technical architecture and data
  • Modular structure for game logic and UI.

Technical architecture

How the case was designed as a product

Game inspired by Subway Surfers built to practice game logic and development.

JavaScriptLanguageHTML5Web platformCanvasWeb platformCSSWeb platform

Data used

  • Keyboard input for movement.
  • Game state (speed, score, collisions).
  • Obstacle spawn timers.
  • Sprite positions on screen.

Core components

  • Smooth character movement.
  • Dynamic obstacles with collision detection.
  • Real-time score tracking.
  • Base ready for new levels and skins.

Technical decisions

  • Game loop and Canvas rendering.
  • Collision logic and state handling.
  • Modular front-end structure.
  • Rapid 2D game prototyping.
How to run
  1. Clone the repository.
  2. Open index.html in a browser.
  3. Use the keyboard to control the character.
  4. Track the score and avoid obstacles.
Additional media
Gameplay from the Subway Surfers-inspired prototype.
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