Build HTML5 Games in JavaScript

{Your name and details}

Build HTML5 Games in JavaScript

{Firstname}, {Lastname}, {Conference}, {Location}, {date}

What we are going to cover

Breakout gameplay
  • Drawing on the Canvas
  • Printing out the text
  • Game loop
  • Movement animation
  • Controlling the player
  • Keyboard and mouse input
  • Obstacles and collectibles
  • Collision detection
  • Winning and losing
  • Next steps

Setup

  • Computer (Windows, Mac OS X, Linux)
    • Browser (Firefox, Chrome, Safari, Opera, Internet Explorer)
    • Text editor (Notepad, Sublime Text, Smultron)

Files

  • index.html
  • style.css
  • code.js

HTML structure

        <!DOCTYPE html>
        <html>
        <head>
            <meta charset="utf-8" />
            <title>Gamedev Canvas Workshop</title>
            <style>
              * { padding: 0; margin: 0; }
              canvas { background: #eee; display: block; margin: 0 auto; }
            </style>
        </head>
        <body>
        <canvas id="myCanvas" width="480" height="320"></canvas>
        <script>
          // JavaScript code goes here
        </script>
        </body>
        </html>

Drawing context

        var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext("2d");

Draw on the Canvas

        ctx.beginPath();
        ctx.rect(20, 40, 50, 50);
        ctx.fillStyle = "#FF0000";
        ctx.fill();
        ctx.closePath();

Different draw methods

Screenshot 1
  • Shape (rect, arc)
  • Style (fill, stroke)

Text output

Score, lives, messages

Score and lives

        ctx.fillText("Score: "+myCurrentScore, 10, 10);

Game loop

Loop 
        function draw() {
          // drawing code
        }
        setInterval(draw, 10);

Request Animation Frame

        function draw() {
          // drawing code
          requestAnimationFrame(draw);
        }
        draw();

Redrawing

Breakout ball trail

Clear the Canvas

        function draw() {
          ctx.clearRect(0, 0, canvas.width, canvas.height);
          // drawing code
        }

Movement animation

Moving ball

Delta:
move the ball [x, y]
for dx and dy
on every frame.

Delta

        function draw() {
          ctx.beginPath();
          ctx.arc(x, y, 10, 0, Math.PI*2);
          ctx.fillStyle = "#0095DD";
          ctx.fill();
          ctx.closePath();
          x += dx;
          y += dy;
        }

Create the player

paddle

Keyboard and mouse input

Keyboard and mouse

Control the player

  • Two variables for left and right button presses
  • Two event listeners for keydown and keyup events
  • Two functions handling the keydown and keyup events
  • Ability to actually move the paddle left and right

Keyboard event handler

        var rightPressed = false, leftPressed = false;
        document.addEventListener("keydown", keyDownHandler, false);
        function keyDownHandler(e) {
          if(e.keyCode == 39) {
            rightPressed = true;
          }
          else if(e.keyCode == 37) {
            leftPressed = true;
          }
        }

Move the paddle

paddle moving 
        if(rightPressed) {
          paddleX += 7;
        }
        else if(leftPressed) {
          paddleX -= 7;
        }

Mouse event handler

        document.addEventListener("mousemove", mouseMoveHandler, false);
        function mouseMoveHandler(e) {
          var relativeX = e.clientX - canvas.offsetLeft;
          if(relativeX > 0 && relativeX < canvas.width) {
            paddleX = relativeX - paddleWidth/2;
          }
        }

Obstacles and collectibles

bricks

Collision detection

collision

Bouncing off the walls

        if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
          dx = -dx;
        }
        if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) {
          dy = -dy;
        }

Brick collision logic

  • The x position of the ball plus its radius is greater than the x position of the brick.
  • The x position of the ball plus its radius is less than the x position of the brick minus its width.
  • The y position of the ball plus its radius is greater than the y position of the brick.
  • The y position of the ball plus its radius is less than the y position of the brick minus its width.

Losing

        if(y + dy < ballRadius) {
          dy = -dy;
        } else if(y + dy > canvas.height-ballRadius) {
          if(x > paddleX && x < paddleX + paddleWidth) {
            dy = -dy;
        Screenshot 5
          }
          else {
            alert("GAME OVER");
          }
        }

Winning

        if(score == brickRowCount*brickColumnCount) {
          alert("YOU WIN, CONGRATULATIONS!");
        }

Thanks! Questions?

  • {Your name and details}
  • Slides: {slideurl}