Creating a classic game using HTML5 and JavaScript

Slides Link

echo `whoami`

Ahsan Ayaz

Software Architect

Workshop Rules

  • git clone
  • git checkout <step-branch>
  • Open index.html into the browser
  • Uncomment code and refresh to see changes
  • git checkout .

What do you need to know?

A bit of Maths

HTML5, JS and a bit of CSS

Step 1

Base Architecture - Game Screen

git checkout step-1

HTML5 Canvas

Canvas Grid

Drawing a Rectangle

  const gameCanvas = document.getElementById('gameCanvas');
  const screen = canvas.getContext('2d');  
  screen.fillStyle = "some-color";
  screen.fillRect(XPosition, YPosition, Width, Height);

The game's screen is just a rectangle covering whole canvas


gameCanvas = document.getElementById('gameCanvas');
// get canvas context
screen = gameCanvas.getContext('2d');


function gameLoop() {
    // game screen background
    screen.fillStyle = '#000';
    screen.fillRect(0, 0, gameCanvas.width, gameCanvas.height);


Step 2

Placing the Snake and Apple

git checkout step-2
git checkout .

We will add two rectangles on the screen. One as the snake and one as the apple


Step 3

Adding Keyboard Interaction

git checkout step-3
git checkout .

We'll handle the arrow keys to move the snake/player


Step 4

Continuous snake movement

git checkout step-4
git checkout .

The snake should just keep moving and you will just give it a direction using arrow keys.


Step 5

Walls Collision - Keeping Snake on the screen

git checkout step-5
git checkout .

If the snake collides with a wall, it will appear at the opposite end going in the same direction as before.


Step 6

Collision With Apple - Generating Apple Randomly

git checkout step-6
git checkout .

Whenever the snake eats the apple, we re-generate the apple at a new random position on the screen.


Step 7

Creating the snake trail - Following the player

git checkout step-7
git checkout .

We can create the snake trail by painting every step the snake takes on the screen.


Step 8

Keeping the snake's tail on view

git checkout step-8
git checkout .

Also, increasing the tail length when snake eats an apple

To maintain a tail of fixed length, we will discard older painted pixels in the snake trail.


Step 9

End the game if the snake eats its tail

git checkout step-9


Step 10

Showing Score

git checkout .

git checkout step-10

Adding text to the canvas


var gameCanvas = document.getElementById('gameCanvas');
// get canvas context
var screen = gameCanvas.getContext('2d');


screen.font="14px TimesNewRoman";
screen.strokeStyle = 'white';
screen.strokeText(`Score: ${score}`, 10, 20);


I challenge you!

  • The person with the highest snake score gets a CODER GIRL sticker
  • The person who can spot a bug in the game and fix it as well gets a JS sticker AND a CODER GIRL sticker
  • The person who implements this in Angular gets an ANGULAR sticker

Show me your skills


Thank You !

Software Architect

Modus Create

Creating a classic game using HTML5 and JS

By Muhammad Ahsan Ayaz

Creating a classic game using HTML5 and JS

A workshop given at ngGirls Karachi's Workshop2 demonstrating the usage of Canvas to create a game.

  • 1,031
Loading comments...

More from Muhammad Ahsan Ayaz