Coding · ·

Retro game project

You will be working in teams of 2 on a <canvas> web-based retro game over 2 lessons, presenting your games at the end of the 2nd lesson. Here are the games to chose from, in rough order of difficulty from easier to harder:

Memory pairs: Cards are face down in a grid; flip cards to find pairs
Whack a mole: 'Moles' appear and need to be whacked/clicked before they disappear
Pong: The classic tennis game
Snake: The Nokia 3210 classic where a snake grows by eating fruit
Typing of the dead: Type words before they kill you
Flappy bird: Flap your way through those pipes
Space invaders: Shoot the aliens before they reach you
Breakout: Shoot blocks but don't let the ball past you
Asteroids: Asteroids are hurtling towards your spaseship and must be destroyed

Presenting your work

You will have ~5mins to present your game in the last 30mins of the 2nd lesson. You need to demonstrate your game, and talk through the code, debugging, troubleshooting, decisions etc.

Requirements

All games must be in a single HTML file in which the game is in a fixed-size <canvas>. Here's a simple template to get you started:

<!doctype html>
<title>Retro game</title>
<canvas id="canvas" width="600" height="400" style="background: #eee; margin: 50px auto; display: block;"></canvas>
<script>
let ctx = canvas.getContext('2d')
ctx.fillRect(10, 20, 30, 40)
</script>

Games must be online (on either of your websites or elsewhere) before the presentations.

Tips for success

Keep it super simple, then add more features later only if you have time
Start on a whiteboard and bits of paper rather than straight to code
Think of different approaches then compare them and choose the best
Break the problem down into smaller chunks
Work on a single laptop connected to an external monitor

Persisting data (eg high scores)

Some games can do with storing/persisting data (eg high scores) between refreshes, similar to when we used a .json file on the CLI. You can use localStorage to do this as follows:

// get the stored high score
let highScore = localStorage.getItem('highScore') || 0

// whenever you need to store a new high score
localStorage.setItem('highScore', score)

Game details

Your game needs to hit as many of the listed items as possible. These are generally in priority order. Try not to add additional features until all/most from the list are met.

Memory pairs

Some number of cards are shown face down in a grid
Clicking a first card turns it over
Clicking a second card turns it over
If both cards match then a point is scored and the pair are removed
Else both cards are turned face down again after a length of time
Game could have a fixed time or made 2-player with scores
Cards jiggle a little when hovered over
Matching pairs move via animation into a player's pile when found

Whack a mole

There is a grid
Random cells in the grid light up at seemingly random times
A cell is no longer lit up if not hit within a certain time
Hitting a lit cell scores a point and is no longer lit up
A point is scored every time a lit cell is hit
Sometimes cells light up differently and score negative points when hit
The game runs for a fixed length of time
The game tracks the highest score
After a game, the player can compare their score to highest score
After a game, the player can play again
The game looks pretty cool

Pong

A 'paddle' can be controlled vertically
A second paddle can be controlled vertically with different controls
The paddles are to the far left and right of the canvas
There are walls at the top and bottom
There is a square ball that begins at centre and goes right or left
If the ball hits a wall or a paddle it changes direction
If the ball goes behind a paddle, the other player scores a point
After scoring, a new ball appears and goes right or left
The score is shown and the game ends when a player reaches 9
The ball speeds up over time

Snake

The snake moves forwards at all times
The snake changes direction with the arrow keys
The snake is enclosed in a rectangle
The snake dies if hitting the rectangle
The snake eats items that appear randomly
The snake scores a point for each item eaten
The snake gets longer as it eats items
The snake dies if it hits itself
The game looks like it did on the Nokia 3210

Typing of the dead

A word (or string of random characters) appears on the screen
The word moves steadily downwards
Game starts with 3 lives
A word that reaches the bottom causes player to lose a life
As player types on keyboard those characters appear
A string of consecutive typed characters fully matching a word kills the word
Killed words score points
There can be multiple words to kill on the screen at once
Colours of characters within words indicate success/failure

Flappy bird

There is a bird
The bird is affected by gravity
The bird can accelerate upwards by flapping its wings
Near the bottom of the screen is the ground
If the bird hits the ground: game over
There are pairs of pipes with vertical gaps between them
Those gaps are equal in size but at different heights
The pipes move from right to left
If the bird hits a pipe: game over
Every pipe passed scores a point
High score is tracked
Current score and high score are shown at all times
Game restarts after game over

Space invaders

A spaceship is at the bottom of the screen looking up
The spaceship can move horizontally
The spaceship can fire bullets
There is a grid of aliens, each made of several blocks
Bullets that hit a block of an alien destroy that block
The grid of aliens is always moving from one side to the other
Every so often, the grid of aliens moves downwards
If any alien block reaches as low as the player: game over
If all alien blocks destroyed: win

Breakout

There is a paddle near the bottom that can be controlled horizontally
There is a ball which bounces off top/left/right walls of the screen
If the ball goes below the paddle, player loses a life
If 3 lives lost: game over
There are blocks in a grid near the top of the screen
Blocks hit by the ball are destroyed
If all blocks are destroyed: player wins

Asteroids

For this one, I strongly recommend starting with a stationary spaceship, and only adding forward movement if other criteria are met.

There is a spaceship (that for now is fixed in the middle of the screen)
The spaceship can shoot forwards
The spaceship can turn in a full circle (but is still fixed in position)
... and bullets still go from the front
The game starts with asteroids and each goes in a straight line
If an asteroid hits the spaceship, a life is lost
Asteroids do not affect each other when colliding
The screen wraps horizontally and vertically
... except for bullets
If all asteroids are destroyed: win
If all lives are lost: game over
The spaceship has a forward accelerator
... and slows down when it is not active