The Anatomy of a Game: Sprites, Loops & Collision
What happens 60 times per second
What happens 60 times per second
Every game runs one loop, forever: read input, update the world, draw everything, repeat. This loop runs 60 times per second. Watch the steps highlight in real time as the game below runs.
Use arrow keys or WASD to move the green square. The loop steps highlight in real time.
A sprite is any visual object in the game: the player, enemies, coins, bullets. Each sprite has a position (x, y), a size, a velocity, and an image. Moving a sprite just means changing its x and y every frame.
Click anywhere to spawn a sprite. Each one has random velocity.
How does the game know when two objects touch? It checks if their bounding shapes overlap. The simplest check: do two rectangles overlap? Watch the collision boxes light up when objects intersect.
Use arrow keys to move the green box. Collisions turn red.
Axis-Aligned Bounding Box. Check if two rectangles overlap by comparing edges. Fast and simple. Used for most 2D games.
Check if the distance between centers is less than the sum of radii. Perfect for balls, bullets, and round objects.
Check individual pixels for overlap. Most accurate but slowest. Only used when precision matters more than performance.
From Pong to open-world RPGs, every game is built on the same foundation you just explored.
Game loop + gravity (update y velocity each frame) + ground collision (stop falling when touching floor) + input (jump on spacebar).
Sprites for bullets (spawn on click, move each frame) + enemy sprites + circle collision (bullet hits enemy when distance < radius).
Grid-based sprites + input to move pieces + collision to check valid placement + state update to check win conditions.
Sprite for car + input for steering + velocity/acceleration physics in update + track boundary collision.
The original Pac-Man runs at 60.6 fps on a 3 MHz processor. The entire game logic, ghost AI, input, rendering, and sound fit in 24 KB of ROM. Every modern game framework gives you more power in a single function call.
You've seen the engine behind every game: a loop that reads input, updates the world, and draws the result, 60 times per second. Sprites, physics, and collision detection are just the pieces inside that loop.
Every game runs a loop: read input, update game state, draw everything, repeat. This loop runs 30-60+ times per second. Everything you see is just one frame of this loop.
A sprite is a 2D image that represents a game object: a character, enemy, bullet, or background tile. Moving a sprite means changing its x,y position each frame.
The game loop checks keyboard, mouse, or controller state every frame. Pressed keys set velocity. Released keys stop movement. Input is just data.
Two objects collide when their bounding boxes or circles overlap. Check every pair every frame. When they overlap, trigger the response: bounce, damage, collect, or block.
Put your new knowledge into practice!