Free Car Racing Game Source Code in HTML, CSS and JavaScript

Here is free Car Racing Game source code built with HTML, CSS and JavaScript. Learn how to create a simple browser racing game with keyboard and mobile controls

How to Use CAR RACING GAME SOURCE CODE

If you are looking for a simple car racing game that you can build with basic HTML, CSS and JavaScript, this project is a good place to start.

This car racing game is made for the browser and does not need any external library. The player controls a car and tries to avoid the vehicles coming from the opposite direction. The longer you survive, the higher your score becomes.

You can use the source code for learning, practice, or as a starting point for your own HTML5 game project.

What You Will Learn Coding

While working with this project, you can learn how to:

  • Create a simple browser game with HTML
  • Style a game screen using CSS
  • Move objects with JavaScript
  • Detect Errors
  • Keep track of a score
  • Use keyboard controls
  • Create a restart system
  • Make a basic responsive game layout

GAME Code FEATURES

This simple car racing game includes:

  • Player-controlled car
  • Moving road
  • Other cars
  • Collision detection
  • Score counter
  • Increasing difficulty
  • Game over message
  • Restart button
  • Keyboard controls
  • Mobile touch controls
  • No external libraries

CAR RACING GAME SOURCE CODE

The complete game is contained in one HTML file. You do not need separate CSS or JavaScript files for this version.

Copy the code below and save it as:

index.html Car Racing Game

Score: 0Speed: 1

<div class="road-line" style="top: 0;"></div>
<div class="road-line" style="top: 140px;"></div>
<div class="road-line" style="top: 280px;"></div>
<div class="road-line" style="top: 420px;"></div>
<div class="player" id="player"></div>
<div class="enemy" id="enemy"></div>
<div class="game-over" id="gameOver">
  <h2>Game Over</h2>
  <p>
    Your Score:
    <strong id="finalScore">0</strong>
  </p>
  <button class="restart-btn" onclick="restartGame()">
    Play Again
  </button>
</div>
<button class="control-btn" onclick="moveLeft()">
  ◀
</button>
<button class="control-btn" onclick="moveRight()">
  ▶
</button>

Use Arrow Keys or the buttons to move your car.

HOW TO USE THE CAR RACING GAME

  1. Copy the complete code.
  2. Open Notepad, VS Code, or another code editor.
  3. Create a new file.
  4. Paste the code into the file.
  5. Save the file as index.html.
  6. Open index.html in your browser.
  7. Use the Left and Right arrow keys to control the car.

On mobile devices, you can use the left and right buttons displayed below the game.

HOW THE GAME WORKS

The game has a simple road with a player car and an enemy car.

The racing car starts from the top of the road and moves toward the player. Once it reaches the bottom, it starts again from the top at a different position.

Every time the player successfully avoids an other car, the score increases.

The game also becomes faster as the score increases, making it more challenging to keep playing.

COLLISION DETECTION

JavaScript checks the position of the player car and the enemy car while the game is running.

When the two cars overlap, the game recognizes it as a collision and displays the Game Over screen.

This is a useful example of basic collision detection in a browser game.

HOW TO CUSTOMIZE THE GAME

CHANGE THE CAR COLORS

The player car uses a blue background and the enemy car uses a red background.

You can change these colors in the CSS:

.player {
background: #2563eb;
}

.enemy {
background: #ef4444;
}

You can replace these colors with any colors you prefer.

CHANGE THE GAME SPEED

The initial speed is controlled by this JavaScript value:

let speed = 4;

You can increase or decrease this number to change the starting difficulty.

CHANGE THE ROAD SIZE

The game uses a fixed road width and height. You can adjust these values in the CSS to make the game larger or smaller.

ADD MORE ENEMY CARS

The current version uses one enemy car to keep the code simple.

You can expand the project by creating multiple enemy cars and giving each one its own position and movement.

ADD SOUND EFFECTS

You can also add sounds when the player passes an enemy car or when a collision happens.

This can make the game feel more complete and enjoyable.

MOBILE SUPPORT

The game includes simple touch-friendly buttons for mobile users.

On desktop computers, players can use the Left and Right arrow keys.

On mobile phones, players can tap the buttons below the game to move the car.

IDEAS FOR FUTURE UPDATES

If you want to turn this simple project into a bigger game, you can add:

  • Multiple cars
  • Different car designs
  • Road backgrounds
  • Traffic lights
  • Sound effects
  • Background music
  • High score system
  • Start screen
  • Pause button
  • Multiple levels
  • Fuel system
  • Coins and rewards
  • Car selection

WHY THIS PROJECT IS GOOD FOR BEGINNERS

A car racing game is a useful project for learning JavaScript because it combines several concepts in one place.

You can practice keyboard events, animation, DOM manipulation, random numbers, collision detection and game loops.

Instead of only reading about these concepts, you can see them working together inside a real browser game.

Final Discussions

This simple Car Racing Game is a good starting point for anyone who wants to experiment with HTML, CSS and JavaScript game development.

The project is small enough to understand, but it also gives you plenty of opportunities to add new features.

Try changing the car design, increasing the difficulty, adding sounds, or creating multiple enemy vehicles.

With a few changes, you can turn this basic project into your own custom browser racing game.