A Breakdown of 5 Classic Games into Their Components and What You Will Learn
You love playing games, and now you want to develop your own game. You’re playing all these great games, these massive online games, complex RTSs and epic RPGs, and you have so many ideas of your own. That is great, but you really shouldn’t start with your dream game as your first, not even as your second and third game.
Why not? Because you will be tackling too many problems at once. Even if you are an experienced programmer, learn the fundamentals of game development first and get familiar with your chosen engine or framework. An excellent way to do this is by cloning already existing games. This way, you can focus on learning the fundamentals without worrying about the game’s mechanics.
Here are five classic games, broken down into their core components and an overview of what you will learn by implementing these games:
Game 1: Tic Tac Toe
Tic Tac Toe is perfect to implement as your first game. What you will learn:
- How to implement a basic game loop.
- How to render basic game graphics.
- How to render a text-based UI.
- How to handle player input.
- How to manage game states.
- How to implement turn-based gameplay.
- How to check for win conditions.
- (Optional) How to play sounds.
- (Optional) How to implement AI behaviour.
Gameplay Mechanics
- Two players are taking turns to set a symbol (“X” or “O”) on a 3x3 grid.
- A symbol can only be placed on an empty cell.
- The player who first sets three symbols in a row (horizontally, vertically or diagonally) wins.
- It’s a draw if no player has won and no empty tiles are left.
Graphics and Animation
- Draw a 3x3 grid.
- Draw an “X” or “O” symbol on each tile.
User Interface
- Display the game menu.
- Displaying the current player.
- Display the winner.
Input Handling
- Handle mouse input to select a tile.
- Handle mouse input to select a menu option.
Scoring and Win Conditions
- Check for three symbols in a row (horizontally, vertically or diagonally).
Game State Management
- The Menu State starts, restarts or quits the game.
- The Game State runs the game and keeps track of the board with its occupied and empty tiles and the current player.
Sound and Music
- Sound is not necessary for the game mechanics to work. However, having sound enhances the gameplay experience.
- Sounds can be played when placing a symbol or when a player wins.
AI/Opponent Behaviour
- The opponent can be played by another player (hot-seat multiplayer).
- (Optional) The opponent can be played by an AI.
Game 2: Snake
Snake has slightly more complexity than Tic Tac Toe but is still easy to implement. Depending on your experience level, you might find Tic Tac Toe too trivial. If this is the case, then Snake is a good alternative to start. What you will learn:
- How to implement a game loop with a fixed frame rate.
- How to render basic game graphics.
- How to render animations.
- How to render a text-based UI.
- How to separate updates to your game logic from rendering.
- How to handle player input.
- How to implement collision detection.
- How to manage game states.
- How to check for game over conditions.
- How to save and display high scores.
- (Optional) How to pause the game.
- (Optional) How to play sounds.
Gameplay Mechanics
- The player controls a snake that moves automatically in a specific direction.
- The player can change the snake’s direction by pressing the arrow keys.
- The snake eats food. Eating food raises the score and makes the snake longer.
- The food appears randomly. Only one food is visible at a time.
- The game ends if the snake collides with the wall or its own body.
- (Optional) The snake gets faster with each food it eats.
Graphics and Animation
- Draw a grid and walls around it.
- Draw food on a free tile.
- Draw the snake on the grid and animate the movement. The snake moves one tile per game tick.
- Animate the growth of the snake. The snake grows one tile per food eaten.
User Interface
- Display the score.
- Display the menu.
- Display the game over screen.
- Display the high score.
- (Optional) Display the pause screen.
Input Handling
- Handle keyboard input for snake movement.
- Handle mouse input for menu selection.
- Handle text input for the high score.
Physics and Movement
- The snake’s head moves, and the body follows.
- The snake moves one tile per game tick.
Collision Detection
- Detect collisions between the snake’s head and the wall.
- Detect collisions between the snake’s head and its body.
- Detect collisions between the snake’s head and the food.
Scoring and Game Over Conditions
- The score is raised by eating food.
- The game ends when the snake collides with the wall or its body.
Game State Management
- The Menu State starts, resets or quits the game.
- The Game State runs the game and keeps track of the snake’s position and direction, the food’s location and the score.
- (Optional) the Pause State pauses the Game State.
Sound and Music
- Sound is not necessary for the game mechanics to work. However, having sound enhances the gameplay experience.
- Sounds can be played on eating food and game over.
Game 3: Pong
Pong is another great game to learn from. It teaches a different skill set and is slightly more challenging to implement. What you will learn:
- How to implement a game loop with a fixed frame rate.
- How to render basic game graphics.
- How to render smooth animations.
- How to render a text-based UI.
- How to handle player input.
- How to implement per-pixel collision detection.
- How to implement basic physics.
- How to manage game states.
- How to check for win conditions
- How to implement an AI opponent.
- (Optional) How to pause the game.
- (Optional) How to play sounds.
Gameplay Mechanics
- Two players control a paddle. Each paddle can move vertically along their side of the screen.
- The human player plays against an AI opponent.
- Each player earns points when the opponent fails to return the ball.
- The game continues until one player reaches a set number of points.
- The players can control the angle of the ball’s trajectory based on where it hits their paddle.
- Paddles can’t be moved beyond the top or bottom edges of the screen.
- The player who first scores the most points wins the game.
- (Optional) Another set of keys on the same keyboard may control the second player.
- (Optional) The ball’s speed may increase as the game progresses.
Graphics and Animation
- Draw the playing field.
- Draw and animate the paddles.
- Draw and animate the ball.
User Interface
- Display the scores.
- Display the winner.
- Display the game menu.
- (Optional) Display the pause screen.
Input Handling
- Handle keyboard input for paddle movement.
- Handle mouse input for menu selection.
- (Optional) Handle keyboard input for the second player.
Physics and Movement
- The paddle moves up and down.
- The ball flies on a given trajectory.
- The ball’s trajectory changes on collision and depends on its angle.
Collision Detection
- The ball collides with the upper and bottom walls.
- The ball collides with the paddles.
- Scoring and Win Conditions
- Missing the ball gives one point to the opponent.
- The player who first reaches the maximum points wins.
Game State Management
- The Menu State starts, restarts or quits the game.
- The Game State runs the game and keeps track of the scores, the positions of the paddles, the position of the ball and its trajectory.
- (Optional) The Pause State pauses the Game State.
Sound and Music
- Sound is not necessary for the game mechanics to work. However, having sound enhances the gameplay experience.
- Sounds can be played when the ball collides or the paddle misses the ball.
AI/Opponent Behaviour
- Implement AI behaviour for the second player.
Game 4: Breakout
Breakout builds upon the mechanics and concepts of Pong and is, therefore, an excellent game to expand your knowledge. What you will learn:
- How to implement a game loop with a fixed frame rate.
- How to render basic game graphics.
- How to render smooth animations.
- How to render a text-based UI.
- How to handle player input.
- How to implement per-pixel collision detection.
- How to implement basic physics.
- How to implement player health and power-ups.
- How to load different levels.
- How to design levels.
- How to manage game states.
- How to check for win and game over conditions.
- (Optional) How to pause the game.
- (Optional) How to play sounds.
Gameplay Mechanics
- The player controls a paddle to bounce a ball towards a wall of bricks.
- The player moves the paddle horizontally to hit the ball and control the ball’s direction.
- The player breaks the bricks by hitting them with the ball.
- The player must prevent the ball from falling off the bottom of the screen.
- The player must clear all bricks to advance to the next level.
- If the ball hits the bricks, it bounces back; if it hits the paddle, it continues moving.
- Some bricks may require multiple hits to be destroyed.
- The player scores points for each brick he breaks.
- The player loses a life if the ball falls off the screen.
- The player wins if he destroys all bricks in each level.
- The game is over if the player has no lives remaining.
Graphics and Animation
- Draw bricks as tiles according to a pre-designed level.
- Draw and animate the paddle.
- Draw and animate the ball.
- Animate the destruction of a brick.
- (Optional) Draw and animate power-up effects.
User Interface
- Display the game menu.
- Display available lives.
- Display the score.
- Display the current level.
- Display power-up effects.
- Display the game over screen.
- Display the winning screen.
- Display the pause screen.
Input Handling
- Handle keyboard input to move the paddle.
- Handle mouse input to select the menu options.
Physics and Movement
- The paddle moves to the left and right.
- The ball follows a trajectory. The trajectory changes when the ball collides.
Collision Detection
- The ball collides with the paddle.
- The ball collides with bricks.
- The ball collides with the left, right and upper wall.
Scoring and Win/Game Over Conditions
- The player gets points when breaking bricks.
- Different bricks give different amounts of points.
- Power-ups need to be applied.
- Track and adjust player lives.
- The player advances to the next level when all bricks are destroyed.
- The game is over when the player has no lives left.
- The game is won when the player beats all levels.
Game State Management
- The Menu State starts, restarts or quits the game.
- The Game State runs the game and keeps track of the score, lives, power-ups, paddle position, ball position and trajectory, and current level.
- (Optional) The Pause State pauses the Game States.
Sound and Music
- Sound is not necessary for the game mechanics to work. However, having sound enhances the gameplay experience.
- Sounds can be added to collisions with the ball, breaking bricks, losing a life, getting power-ups, game over and winning.
Game 5: Endless Runner
Endless Runner—Image by author
Finally, Endless Runner is, in my opinion, the most complex game of the five and also has the most room for getting creative and implementing additional features. What you will learn:
- How to implement a game loop with a fixed frame rate.
- How to render more advanced game graphics.
- How to render smooth animations.
- How to render UI.
- How to handle player input.
- How to implement collision detection.
- How to implement player health and collectables.
- How to track the player’s score.
- How to save and display a high score.
- How to procedurally generate a level with rising difficulty.
- How to manage game states.
- How to check for game over conditions.
- (Optional) How to pause the game.
- (Optional) How to play sounds.
Gameplay Mechanics
- The player character automatically moves forward.
- The player can control jump and slide actions.
- Obstacles appear on the path and must be avoided.
- Collectable items appear. They grant score points or power-ups.
- The score is calculated based on the distance run and the collected items.
- The player has lives or a health pool. They decrease when the player collides with an obstacle.
- The game is over if the player runs out of lives or health.
- The level is procedurally generated with increasing difficulty and speed.
Graphics and Animation
- Draw a procedurally generated side-scrolling environment with obstacles and collectables.
- Animate the character in running, jumping and sliding positions.
- (Optional) Use parallax scrolling for nicer visuals.
User Interface
- Display the game menu.
- Display the score.
- Display player health or lives.
- Display the high score.
Input Handling
- Handle keyboard input for controlling character movement.
- Handle mouse input for selecting menu options.
- Handle text input for the high score.
Physics and Movement
- The character moves automatically forward.
- The character can jump over or slide under obstacles.
Collision Detection
- They character collides with collectables.
- The character collides with obstacles.
Scoring and Game Over Conditions
- Collecting collectables increases the score.
- The run distance is used to calculate the score.
- The player loses one life or some health on collision with an obstacle.
- The game is over when the player is out of lives or health.
Game State Management
- The Menu State starts, restarts or quits the game.
- The Game State runs the game and keeps track of the generated level, the score and the player’s lives or health.
Sound and Music
- Sound is not necessary for the game mechanics to work. However, having sound enhances the gameplay experience.
- Sounds can be played on collision and when items are collected.
Conclusion
When breaking down these games, you can see how many components are needed to implement them despite their simplicity.
So when you are learning game development, you want to focus on learning these core concepts, additionally to learning a new engine or framework, without having to worry about the game design of your game.
Additionally, this breakdown represents only the basic mechanics of these classics, and you can always expand on these projects and add your own twist.
So, go and boot up your favourite engine or framework and start coding.
Top comments (6)
Such a nice list! I recently started working on a snake game myself ( ekinkaradag.github.io/snake-vue3 )
I still have some plans for improvement but I'd like to hear people's opinions. So if you have a request or just would like to check out the code, you can visit github.com/ekinkaradag/snake-vue3
All sorts of contributions are welcome :)
It's pretty cool! I'd suggest maybe a light mode, and maybe different fruits. Just so you know, the view source code button (ekinkaradag.github.io/snake-vue3/) doesn't work. It redirects to a nonexistent page.
Wow, thank you. I would have never noticed it if someone didn't tell me. It is a result of fast typing, I guess. But, now it is fixed :)
P.S. I noted your suggestions on my ToDo list. Thanks again!
No problem :)
Nice list! For me it was always Pong 🤣 Whatever Game engine/framework I'd like to try, I start with Pong.
Thank you! And I absolutely agree. Pong is great to start with. Especially if you're not entirely new to game development and know your basics, then it's good to have a few more moving things and skip the slower paced games 😁.