Creating a classic game using HTML5 and JavaScript

Slides Link

echo `whoami`

Ahsan Ayaz

Software Architect

Workshop Rules

  • git clone https://github.com/AhsanAyaz/html5-canvas-snake-game
  • 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);
}

Target

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

Target

Step 3

Adding Keyboard Interaction

git checkout step-3
git checkout .

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

Target

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.

Target

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.

Target

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.

Target

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.

Target

Step 8

Keep the tail on view excluding extra pixels. Increasing the tail when the snake eats an apple

git checkout step-8

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

Target

Step 9

End the game if the snake eats its tail

git checkout step-9

Target

Step 10

Showing Score

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);

Target

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

Questions?

Thank You !

Software Architect

Modus Create

Creating a classic game using HTML5 and JS

By 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.

  • 409
Loading comments...

More from Ahsan Ayaz