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
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:
- A customizable racing system based on trial and error, with a built-in engineering-level physics engine
- 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
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
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
- You are given the option to customize your car, though it affects your speed
- The vehicle is then simulated through a physics engine to visualize aerodynamics and speed
- As you load in, you hold "W" to go forward, and eventually, you can use a "super boost."
Foot Race
- 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
- Showcases time, previous records, XP gained, and gold medallions earned
Play It!
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
Includes:
- Two gamemodes
- Physics engine
- Career progression
- Vehicle customization
Core Principles of Design:
- File organization
- Coding logic
- 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
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
Don't Forget
- Physics constants table
- Explanation of the movement system
Uses
- Acceleration curves
- Velocity caps
- 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
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
How to
- Go to app.netlify.com
- Click "Import Project"
- 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.