browser based games
TRANSCRIPT
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