Browser-Based Games

Dr. Matthew Leach

thoughtfulmonkey.com/westnotts

Learning Outcomes

• Learn the main code needed to run a browser-based game.

• Gain experience in rapid prototyping a game to provide scalable challenge.

• BTEC: Unit 39: LO1.1 / 2.1 / 2.3

JSFiddle

• Rapid prototyping platform

• HTML, CSS, JavaScript

• Look for // *** TODO

HTML Canvas (briefly)

<canvas id="gamebox" width=500 height=400></canvas>

gamebox = document.getElementById("gamebox");

ctx = gamebox.getContext("2d");

ctx.beginPath();

ctx.arc(x, y, 3, 0, 2 * Math.PI, false);

ctx.fillStyle = '#00DD00';

ctx.fill();

HTML Canvas (briefly)

<canvas id="gamebox" width=500 height=400></canvas>

gamebox = document.getElementById("gamebox");

ctx = gamebox.getContext("2d");

ctx.beginPath();

ctx.arc(x, y, 3, 0, 2 * Math.PI, false);

ctx.fillStyle = '#00DD00';

ctx.fill();

Get reference to do 2D drawing

Draw something

HTML element on the page

Script Structure

Variables

Game Setup

levelSetup()

update()

keyHandler( e )

gameOver()

Call the Setup Function

// *** TODO: Perform level setup

levelSetup();

Starting a Main Game Loop

// *** TODO: Start game loopintervalID = setInterval(update, 1000 / 16);

Starting a Main Game Loop

// *** TODO: Start game loopintervalID = setInterval(update, 1000 / 16);

Built-in JavaScript function

Function to act as game loop

Interval between game loops

Reference to the timer

Stopping the Game Loop

// *** TODO: Stop the game loopclearInterval(intervalID);

User Input

// *** TODO: Add keyboard listenerdocument.addEventListener(

"keydown", keyHandler, false);

Test the Game

• What’s broken?

• Where’s the challenge?

Design Improvements

• Work in pairs

• Design 2 improvements–One scalable challenge–One new feature

Summary

• Key JavaScript:–setInterval–clearInterval–addEventListener

• Identify opportunities to add challenge