From Vectors to Velocity: Unlocking Acceleration and Collision in Game Worlds!

Ryan Flynn (Falcon)
3 min readJan 9, 2024

--

Hey fellow game dev enthusiasts, Ryan here again! After delving into the world of vectors and their pivotal role in character movement in my last blog, today we’re going to elevate our game with the introduction of acceleration and collision detection. This is where our simple vector concepts start interacting with the real-world principles of physics, adding a whole new layer of realism to our games.

An image of a spaceship flying over a cyber planet.

Acceleration: Adding Realism to Movement

First up, let’s talk acceleration. In real life, objects don’t instantly reach their top speed — they accelerate over time. This concept is crucial in game development for creating realistic movement.

JavaScript Implementation of Acceleration

Let’s enhance our previous ‘Asteroids’ example with acceleration:

let position = { x: 50, y: 50 };
let velocity = { x: 0, y: 0 };
let acceleration = { x: 0.1, y: 0.05 };

function updatePosition() {
velocity.x += acceleration.x;
velocity.y += acceleration.y;
position.x += velocity.x;
position.y += velocity.y;
}

In this snippet, each time updatePosition() is called, the velocity increases slightly due to acceleration, before updating the position. This creates a more natural, gradual build-up of speed.

Collision Detection: Interacting with the Game World

Next, let’s tackle collision detection. This is the process of detecting when two or more objects in a game touch each other, which is essential for everything from character-environment interactions to triggering events.

Basic Collision Detection in JavaScript

Imagine our spaceship needs to avoid asteroids. Here’s how we might handle a simple collision detection:

function checkCollision(object1, object2) {
return (object1.x < object2.x + object2.width &&
object1.x + object1.width > object2.x &&
object1.y < object2.y + object2.height &&
object1.y + object1.height > object2.y);
}

This function checks if two rectangular objects overlap. If they do, it’s a collision!

The Math Behind the Scenes

Understanding vectors was just the beginning. Now, we’re seeing how basic physics and geometry come into play. Acceleration involves calculus concepts, while collision detection relies on geometry to calculate object boundaries and intersections.

What’s Next?

As we continue our journey, we’ll dive deeper into these topics and explore how to implement more complex physics like gravity and friction. We’ll also look at optimising our collision detection for better performance — a must-know as our games grow more complex.

Join the Adventure

I hope you’re as excited as I am to continue this journey. Let’s keep pushing the boundaries of what we can achieve with math and physics in our games. Join the conversation on Discord, share your progress, and let’s learn from each other.

Stay inspired, keep experimenting, and remember: every line of code is a step towards mastering the art of game development. See you in the next one!

If you’re enjoying this journey, don’t forget to like, subscribe, and follow along. Together, let’s make our game development dreams a reality!

--

--

Ryan Flynn (Falcon)

Live and learn - Currently on a journey of self education.