🎮 Subway Surfers Challenge

Problem Description

In this challenge, you'll create a simple endless runner 2D game inspired by Subway Surfers. The player character will be moving in a 2D world and will be able to move up and down between lanes (or tracks). The main objective is to avoid obstacles to stay alive as long as possible.

The game will feature:

• 🏃‍♂️ A character that can move between multiple lanes
• 🚧 Randomly generated obstacles that the player must avoid
• 📈 Increasing difficulty over time

The player controls the character by pressing keys to move between lanes. The game ends when the player collides with an obstacle.

What You Will Learn

You will have fun while learning:

• ⚡ Game Loop : Making your game run smoothly at 60 FPS and managing the game state

• 🎯 Entity Management : Handling repawning multiple game objects (obstacles, coins)

• Object-Oriented Programming (OOP)

• ⌨️ Controls : Making the game respond quickly to player inputs

• 🎯 Game States : Switching between playing, game over, and restart

• 💥 Collision Detection : Making sure collisions feel fair and fun

• 🎨 Animations : Making characters and objects move smoothly

• 📈 Difficulty Scaling : Making the game get harder over time in a balanced way

• 🎵 Sound Effects : Adding fun sound effects to enhance gameplay

• 📊 Score System : Implementing and displaying player progress

• 🎨 Game Design : Creating an engaging and visually appealing game experience

Requirements

Create a 2D endless runner game with:

• 🏃‍♂️ A character that can move between lanes (minimum 3 lanes)
• 🚧 Randomly generated obstacles that appear at different lanes
• 💥 Collision detection between the player and obstacles
• ⚠️ Game over screen when player collides with an obstacle

Basic controls:

• ⬆️⬇️ Up/Down arrow keys to move between lanes

Game mechanics:

• 📈 The game speed should gradually increase over time
• 🛡️ Obstacles should appear at random positions with safe paths always available

Visual and user experience:

• 🎨 Simple but clear graphics for the player character and obstacles

Technology

Use any technology you want, I recommend using Kaboom.js which handles sprites, animations, physics, etc. Kaboom.js is particularly well-suited for 2D games like this as it provides built-in functionality for:

• 🖼️ Sprite rendering and animation
• 💥 Collision detection
• ⌨️ Input handling
• ⚙️ Game loop management

Other alternative technologies:

• Phaser.js
• HTML5 Canvas directly
• Unity (WebGL export)

Bonus

For an enhanced version of the game, consider adding these bonus features:

• 🏆 A scoring system based on distance/time survived and should be visible to the player
• 💰 Collectible coins which will give you more score
• ✨ Animated coins that spin or glitter
• 🎵 Sound effects when the player collects a coin
• 🌤️ Sky and ground background
• ☁️ Decorative clouds that move in the background
• ❤️ Health bar that will decrease when the player collides with an obstacle
• 📊 FPS counter display (it indicates the performance of the game, slow or fast)
• 🎮 Game over screen with final score and option to restart the game
• 💡 Use your imagination to add other features

Getting Started

You can create a new project or use our CLI tool to use the starter template.

First Time Setup

Start Working

Solution

To view the reference solution:

How to Review Your Solution

• axe-core is pre-integrated in the starter template. To use it:

1. Open your browser's Developer Tools (F12)
2. Check the Console tab while using your app
3. Review and fix accessibility errors that appear (ignore minor errors)

• Test your app with keyboard to ensure full keyboard navigation (if applicable)

• Add ARIA labels to make your app understandable by screen readers

• Use Claude for a final accessibility & quality check.

  Example Prompt for Claude:

  Then paste your code..

How to Share Your Solution

If you used the CLI tool

1. Fork the frontend-challenges repository
2. Add your fork as a new remote to your existing solution:

3. Open a pull request (PR) from your fork to the main repository.

If you started from scratch

1. Fork the frontend-challenges repository and clone it
2. Navigate to the solution directory:

3. Add your solution files in this directory
4. Push your changes to your fork
5. Open a pull request (PR) to contribute your solution

Need help?

• Follow this guide to making a pull request to an open-source project
• OR, create an issue at frontend-challenges

Credits

• Special thanks to Ayoub, Oumoussa, and Mouad for their review and help.