How to make a character jump and not fall through walls: the whole truth about game physics

When we play our favorite games, we rarely think about what is behind the smooth movement of the character, realistic jumps or collisions with obstacles. But behind all this lies the fascinating world of game physics — a simplified model of the real world that programmers create using mathematics and code.

Basics of movement: speed and position

Any movement in the game is based on two simple concepts: the position of the object and its speed. Imagine that your character has X and Y coordinates on the screen. Each frame of the game (usually 60 times per second) we update these coordinates by adding the speed value to them.

// The simplest movement
player.x += player.velocityX;
player.y += player.velocityY;

But in real games, it's a little more complicated. We need to take into account the time between frames (deltaTime) so that the movement is smooth regardless of the performance of the computer:

player.x += player.velocityX * deltaTime;
player.y += player.velocityY * deltaTime;

Now, if the game runs at 30 or 120 FPS, the character will move at the same speed in real time.

Gravity: what makes everything fall

Gravity in games is a constant downward acceleration. In each frame, we add a small value to the vertical speed of the object, creating a falling effect:

const GRAVITY = 0.5;

// In every frame
player.velocityY += GRAVITY;
player.y += player.velocityY;

// Checking if the character has fallen to the ground
if (player.y >= ground.y) {
    player.y = ground.y;
    player.velocityY = 0;
    player.isOnGround = true;
}

Interestingly, in most games, gravity is much stronger than real physical gravity. This makes the gameplay more dynamic and responsive. Mario, for example, falls four times faster than he would in reality!

Jumping: momentum and control in the air

A jump is just an instantaneous change in vertical velocity in the negative direction (up). When the player presses the jump button, we set velocityY to a negative value, and gravity gradually slows down the ascent, turns the character around, and causes it to fall back.

function jump() {
    if (player.isOnGround) {
        player.velocityY = -12; // Jump power
        player.isOnGround = false;
    }
}

But a simple jump can seem "wooden". Good platformers use additional techniques: a variable height jump (the longer you hold the button, the higher you jump), "coyote time" (you can jump a fraction of a second after you have left the platform) and control in the air (a small opportunity to control the character during the flight).

// Variable height jump
function updateJump() {
    if (!jumpButtonHeld && player.velocityY < 0) {
        player.velocityY *= 0.5; // Stop lifting faster
    }
}

Collisions: How objects learn about a collision

Collisions are a check to see if two objects intersect in space. The easiest way is to use rectangular boundaries (bounding boxes). Two rectangles intersect if their sides overlap:

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

But detecting a collision is only half the battle. You still need to react correctly to it. This is called collision resolution. The easiest way is to move the object back so that it does not intersect with the obstacle:

if (checkCollision(player, wall)) {
    // Determine on which side the collision occurred
    const overlapX = Math.min(
        player.x + player.width - wall.x,
        wall.x + wall.width - player.x
    );
    const overlapY = Math.min(
        player.y + player.height - wall.y,
        wall.y + wall.height - player.y
    );
    
    // Repel along the axis with less overlap
    if (overlapX < overlapY) {
        player.x += player.velocityX > 0 ? -overlapX : overlapX;
        player.velocityX = 0;
    } else {
        player.y += player.velocityY > 0 ? -overlapY : overlapY;
        player.velocityY = 0;
    }
}

Advanced concepts

When you master basic physics, a whole world of possibilities will open up. You can add friction that slows down objects over time. You can implement elastic collisions, where objects bounce off each other taking into account their mass and speed. You can create a particle system for effects like smoke, sparks, or splashes of water.

Many modern engines provide ready-made physical systems: Unity uses PhysX, Godot has a built-in physical engine, and for web development there are Matter.js and Cannon.js. But understanding the basic principles will help you use these tools effectively and solve non-standard problems.

Practical advice

Start simple: create a square that falls and can jump. Then add platforms and collisions. Experiment with constants — change the force of gravity, the height of the jump, and the speed of movement. You will be surprised how much small changes affect the feel of the game.

Game physics doesn't have to be realistic — it should be fun and predictable. Angry Birds, for example, completely ignores air resistance because it's more fun to play. Your task as a developer is to find a balance between credibility and gameplay.

Do you want to dive deeper into game development and learn how to create your own projects from scratch?

In Codice We have prepared practical programming courses, where you will go from the basics to creating full-fledged games. Learn JavaScript, Python, Lua, and more in a convenient format with step-by-step explanations.

And we also have a cool Telegram channel with a friendly developer community! There we discuss interesting technologies, share experiences, help each other with tasks and just communicate on programming topics.

Join us and grow with like-minded people! 🚀