Race for Gold: a Physics Racing Game

by ayman_023 in Design > Game Design

602 Views, 0 Favorites, 0 Comments

Race for Gold: a Physics Racing Game

Screenshot 2026-03-17 010733.png
Screenshot 2026-03-17 010418.png
Screenshot 2026-03-17 010454.png

When Erin Jackson steps onto the ice, she isn't just moving mindlessly fast; she's executing a well-rehearsed system of movements. Every adjustment, though unnoticed by nearly every spectator, is a much-needed exercise in discipline and precision.


This project isn't so different; it applies the same mindset, yet with software. Through trial and error, you are able to optimize your system, your vehicle, to properly combat physics, aerodynamics, and player decisions. As a result, a racing game where speed is tuned and refined through choices is created.


Race for Gold is a html (browser-based) racing game coded and structured with JavaScript, though played online. The emphasis of the game was to design your own system that feels fast, engaging, and educational.


The project employs two gameplay modes:

  1. A customizable racing system based on trial and error, with a built-in engineering-level physics engine
  2. Sprinting system built for fun and variety


Furthermore, the game includes a career progression system, allowing players to improve builds, gain expierence, accumulate currency, and shatter records over time, rather than a one-time game.

Supplies

Blog---Internet-101---1.png
61LdecwlWYL.jpg

A computer with a modern web browser and any simple code editor

Internet connection


This project does not require any significant hardware, though stronger and more powerful machines are always more helpful.

Gameplay Preview

Screenshot 2026-03-17 005113.png
Screenshot 2026-03-17 005642.png
Screenshot 2026-03-17 005719.png
Screenshot 2026-03-17 005734.png

Though the finished product is usually never at the forefront of an instruction, this is meant to grab your attention in order to keep you interested.


The game begins with a cinematic, then a menu, where you're given the option to either do a foot race or a drag race.


Drag Race

  1. You are given the option to customize your car, though it affects your speed
  2. The vehicle is then simulated through a physics engine to visualize aerodynamics and speed
  3. As you load in, you hold "W" to go forward, and eventually, you can use a "super boost."


Foot Race

  1. Once you load in, you alternate between the "A" and "L" keys to sprint past your opponents while managing stamina and beating records


Post Race Menu

  1. Showcases time, previous records, XP gained, and gold medallions earned

Play It!

Screenshot 2026-03-17 005356.png
Screenshot 2026-03-17 005424.png

With a similar idea to the step before, this is near the top, so you, the reader, can instantly try the game, see if you are interested, then make it yourself later. Simply click on the link below in a browser to immediately start playing.


LINK TO PLAY THE GAME


https://raceforgold2026.netlify.app/


Source Code (Will be thoroughly explained below)


https://github.com/ayman2303/Race-for-Gold-Source-Code


Game Design

Screenshot 2026-03-17 005307.png
Screenshot 2026-03-17 010037.png

Includes:

  1. Two gamemodes
  2. Physics engine
  3. Career progression
  4. Vehicle customization

Core Principles of Design:

  1. File organization
  2. Coding logic
  3. Tunable performance


The game is a combination of a multitude of systems working together. The racing mode focuses on vehicle precision and optimization, where the physics engine lets you understand what is going wrong and tune performance. In contrast, the sprinting mode is a lighthearted gamemode meant to add variety and entertainment.


The career systems help retain players by giving them something to work for. Rather than losing everything once they leave, the game progresses and upgrades to promote returning users.


Project Structure

FSZOE5SMMTQV5XR.png
Screenshot 2026-03-17 015402.png

To begin, create a new folder for your project. Create the following files in the exact order below.


File Structure


/project

index.html (entry point/launcher)

style.css (ui styling)

-----

scr/

main.js (initializes game)

game.js (game loop)

player.js (car behavior)

physics.js (speed & movement)

input.js (controls)

ui.js (hud + menus)

-------

/assets

car.png

track.png

sounds/


Though the game still runs fine without this file structure, it helps isolate bugs and readability.


Once complete, launch with index.html

Physics Engine

Screenshot 2026-03-17 011248.png
Screenshot 2026-03-17 005531.png
Screenshot 2026-03-17 010108.png

Don't Forget

  1. Physics constants table
  2. Explanation of the movement system

Uses

  1. Acceleration curves
  2. Velocity caps
  3. Resistance

This is undoubtedly the most "engineering" related section of the project. Speed is calculated and controlled using constants such as drag, acceleration, and maximum speed. Organizing these values into a table format allows them to feel structured and easier to handle. Furthermore, it allows users to visualize optimization.


Open "physics.js"

Define your core constants


const MAX_SPEED = 10;

const ACCELERATION = 0.2;

const DRAG = 0.05;


velocity += acceleration;

velocity *= (1 - DRAG);


if (velocity > MAX_SPEED) velocity = MAX_SPEED;

Gameplay & Results

Screenshot 2026-03-17 005812.png
Screenshot 2026-03-17 010127.png

Gameplay is intentionally simple, allowing the game to be easy to play. However, the sprint mechanic has a low enough skill ceiling to be easy to pick up, but still involves a skill component, as rhythm affects speed. Though it's meant to communicate that the physics system is real, and the changes do matter.


The drag race simply uses the "W" and "Space" keys, and the sprinting game uses the "A" and "L" keys.


The results screen shows race completion, score, medallions, and results. Proving the game loop is complete, and that there is progression and outcome.

Deployment

FKV4B70MMTQV5SI.png

How to

  1. Go to app.netlify.com
  2. Click "Import Project"
  3. Select index.html


Now, your game has been published, and any changes you made can be tested immediately.

Conclusion

Building Race for Gold meant more than just creating a video game; it felt like thinking as an engineer. Every system, like the physics engine and the athlete/car tuning mechanics, was a system focused on control and improvement. Speed isn't just a visual aspect; it's something that the player refines, just like athletes in real life.


This project also demonstrated that with organized files and a willingness to fail, even beginners can create a functional, physics-driven game.


Thank you for reading, and I hope you have a nice day.