Top 5 BEST games to code as a beginner!
Tags: javascript, node, webdev, beginners
Published: 2019-08-17 13:00:32

# Introduction
Coding doesn't get much more fun than coding up a game, there's something so satisfying about making stuff move on the screen, it's just bloody brilliant. 

So if you're completely new to programming or you're a Senior Dev many years into programming enterprising systems this blog should help you along your way into starting out with some game dev, or at the very least motivate you to give it a go. 

Just a quick note, I'm not *actually* a game developer my day-to-day is mainly coding large enterprising Java apps. But it is nice to come home and spend an evening coding something a little more fun. I released a tutorial series which I reference frequently in this blog on my website [codeheir.com](www.codeheir.com) where I go through the evolution of games, so starting with [Pong - 1972](https://codeheir.com/2019/02/04/how-to-code-pong-1972-1/) then [Space Race - 1973](https://codeheir.com/2019/02/10/how-to-code-space-race-1973-2/), etc. It's basically a step by step process of how to code the games using [p5.js](https://p5js.org/). But of course, the language you use to code the games isn't important, It's the concepts you learn from the actual process of doing it.

## Before you start coding
If you already know the basics of programming in a game dev language I'd recommend having a stab at coding up the games before you read any of my step by step processes. If you get stuck then use the blogs as a reference to see if you're taking the same approach to tackling a problem as I did, most likely you'll find a better way 😅.

If you're completely new to programming then I'd recommend having a look at [Daniel Shiffman's - The Coding Train](https://www.youtube.com/user/shiffman) on Youtube, he has a brilliant series for beginners. Then when you begin to understand the basics follow along with my blog for the game you want to code.

![Daniel Shiffman](https://media1.giphy.com/media/l0HlGEX1ZORa0aIvu/giphy.gif?cid=790b7611b3b543f39372b022606cd810930b308db14221bf&rid=giphy.gif)

#1- Pong
If you google “First game created” likely Pong will pop up, It’s not officially the first game to be created, but it is the first commercially successful. It was created in June 1972!

![Pong](https://codeheir.files.wordpress.com/2019/02/finished.gif?w=1060)

Coding pong teaches you a tonne of key concepts for game development, here are a few:

- User input: Playing moving the paddle and/or paddles
- Hit detection: so the ball hitting the paddles and then
- Scoring system: you'll need to track the scores of both players
- Screen constraining: Preventing the paddle from leaving the screen

For a step by step process on how to code pong - [click here!](https://codeheir.com/2019/02/04/how-to-code-pong-1972-1/)

#2 - Space Race
One year on from pong came Space Race (also made by Atari). Space Race is very simple, it’s a two-player game, each player controls a rocket. The idea is to get to the top of the map having avoided the space debris to gain a point. The bar in the middle represents the time left of the game, the player with the most points at the end of the game wins!

![Space Race](https://codeheir.files.wordpress.com/2019/02/end-game.gif?w=1060)

Coding Space Race teaches you some key concepts whilst also solidifying some concepts you learnt earlier from coding pong:

- Using arrays: To hold the debris you'll likely use an array to iterate over them and determine if they have collided with the rockets
- Timers: Using some kind of timer to determine when the game ends

For a step by step process on how to code Space Race - [click here!](https://codeheir.com/2019/02/10/how-to-code-space-race-1973-2/)

# 3 - Jet Fighter
Jet Fighter is a brilliant game released in 1975. It's pretty simple there's a black jet and a white jet the black jet shoots black bullets and the white jet shoots white bullets. The goal is to shoot the other player and gain a point.

![Jet Fighter](https://codeheir.files.wordpress.com/2019/02/scoring2.gif?w=1060)

Key concepts from jet fighter:
- Screen wrapping: When bullets/jets go off the screen they wrap and come back on from the other side
- Shooting: Learning the maths behind projecting a bullet from your current angle

Jet Fighter is where I got a lot of inspiration for my multiplayer space game **Spaceheir**. The idea was to create a mashup of Asteroids and Jet Fighter. Taking the Player vs environment aspects of Asteroids; shooting asteroids to gain levels. And the player vs player combat system of Jet Fighter.

![Spaceheir](https://github.com/LukeGarrigan/spaceheir/raw/master/stream-royale2.gif)

The game is completely opensource, here's the [github](https://github.com/LukeGarrigan/spaceheir)
For a step by step process on how to code Jet Fighter - [click here!](https://codeheir.com/2019/02/24/how-to-code-jet-fighter-1975-4/)

# 4 - Space Invaders
By far the most popular game released in 1978 was Space Invaders. In just 4 years it had grossed 3.8 billion, and it needs no introduction.

![Space invaders](https://codeheir.files.wordpress.com/2019/03/done.gif?w=1060)

Key concepts from coding up space invaders:
- Array removal: Removal or hiding of the aliens when you shoot them
- Array selection: Ensuring that only the bottom aliens are shooting
- Difficulty: The longer you play the game the faster the aliens get
- Random: Giving the aliens a random chance to shoot

For a step by step process on how to code Space Invaders- [click here!](https://codeheir.com/2019/03/17/how-to-code-space-invaders-1978-7/)

# 5 - Monaco GP
Monaco GP is an endless racer game released in 1979. This is a real fun one to code up, the seamless wrapping is what makes this game so important so it feels as though you are racing on an endless track. Note, the actual game doesn't look all that similar to my implementation.

![Monaco GP](https://codeheir.files.wordpress.com/2019/03/collision.gif?w=1060)

Key concepts from coding up Monaco GP
- Never-ending game: Making the track go on and on and on with a cool game dev trick!
- AI: Coding up the behavior of the other cars and also making them wrap too.


# Some honourable mentions:

## Blockade
Blockade is a bloody brilliant game released in 1976 by Gremlin, it is basically PVP snake, but released a good 21 years before!

It involves coding up a snake AI which is really fun, and also quite difficult.

![blockade](https://codeheir.files.wordpress.com/2019/02/finished-2.gif?w=1060)

## Canyon Bomber
Canyon Bomber is a funny old game. It's not the most exciting but it has some fun coding features like making the blocks fall if a block underneath has been hit, and then subsequently making that block alter colour the match the level it's now at.

![canyon bomber](https://codeheir.files.wordpress.com/2019/03/finished.gif?w=1060)


# Then what?
When you feel comfortable coding any of the above games I'd recommend having a go at creating a simple multiplayer/online game. It's fun playing games you've created, it's even more fun inviting your friends and family to your server so you can own them 🤣. I have created a quick-starter Github repo for anyone who wants to code a multiplayer p5js game and node, just so you don't have to repeat a tonne of boilerplate: [p5-multiplayer-game-starter](https://github.com/LukeGarrigan/p5-multiplayer-game-starter)

![P5 repo](https://i.imgur.com/vAHPUf9.png)

# Thank you
I hope you've enjoyed this blog and I hope maybe it's helped a few of you. Get yourself involved in some game dev, it's very, very fun.  

Follow me on twitter if you don't want to miss out on absolutely brilliant programming insight: 🤣 [@luke_garrigan](https://twitter.com/luke_garrigan)

Thank you, if you like my rambling check out my personal blogging site at https://codeheir.com/

## This blog is sponsored by <a href="https://www.codecanvases.com">Code Canvases</a>

Make your room come alive  with the coolest programming/coding canvases on the market.<a href="https://www.w3schools.com"> codecanvases.com</a> is the number 1 seller for programming prints with 100% exclusively designed canvases. Get them now whilst they're **20% off!!**
![[https://codecanvases.com/](https://codecanvases.com/)](https://cdn.shopify.com/s/files/1/0311/0151/7955/products/jqbr8djyof6ktl8qopmkpvy4_480x480.png?v=1585483987)