Game design
Cardemo
Overview
Cardemo is a small game were you can choose between two rear wheel drive cars and drive on a road in a big grass field. It is also possible to drift since I try to simulate real life vehicle physics. This project is written (almost) entirely from scratch with JavaScript and WebGL. It does not use any 3D library (like Three.js, Babylon.js) nor any prebuilt physics engine. Further down the page I will do a technical breakdown of how the demo is made.
Technology
- JavaScript
- WebGL API
Screenshots
Technical Breakdown
I will briefly explain each part/idea that was used to make the demo.
Gamepad Input Handling
You are able to control the car with both your keyboard and by connecting a controller. I have only tested with a wired Xbox controller so other controllers might not work or have incorrectly mapped inputs.
Keyboard input is read by detecting keydown and keyup events on the canvas element and updating an object in which every key on the keyboard is set to either true or false based on if it is currently held down or not.
Controller input is a bit harder to read but with the built-in Gamepad API, a snapshot of the state of every input on the controller can be requested when we want to read a certain button or joystick
Physics
The physics simulation is split up in two different "layers". The first layer or the base layer is a 3d rigid body simulator like you would see in any other game engine like Unreal or Unity.
The second layer is built on top of the base layer and simulates the vehicle physics. The car is a rigid body and by applying forces to it, we can simulate suspension, friction, air resistance etc. for the vehicle to actually behave like a real vehicle would.
Suspension
Each wheel simulates suspension forces by casting a ray from it's origin point down towards the ground. If the rays distance is less than the wheels resting length a spring force is applied to the cars rigid body at the contact point of the wheel. A dampening force is also applied at the same point so the vehicle doesn't become unstable and bounces forever.
3D Rendering
Coming soon...
Environment
Coming soon...
Attribution
Car models by Lexyc16 on Sketchfab