Browser-Based games - Micro Teach presentation

1. Browser-Based Games
Dr. Matthew Leach

2. thoughtfulmonkey.com/
westnotts

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

4. JSFiddle
• Rapid prototyping platform
• HTML, CSS, JavaScript
• Look for // *** TODO

5. 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();

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

7. Script Structure
Variables
Game Setup
levelSetup()
update()
keyHandler( e )
gameOver()

8. Call the Setup Function
// *** TODO: Perform level setup
levelSetup();

9. Starting a Main Game Loop
// *** TODO: Start game loop
intervalID = setInterval(update, 1000 / 16);

10. Starting a Main Game Loop
// *** TODO: Start game loop
intervalID = setInterval(update, 1000 / 16);
Built-in JavaScript
function
Function to act
as game loop
Interval between
game loops
Reference to the
timer

11. Stopping the Game Loop
// *** TODO: Stop the game loop
clearInterval(intervalID);

12. User Input
// *** TODO: Add keyboard listener
document.addEventListener(
"keydown",
keyHandler,
false);

13. Test the Game
• What’s broken?
• Where’s the challenge?

14. Design Improvements
• Work in pairs
• Design 2 improvements
–One scalable challenge
–One new feature

15. Summary
• Key JavaScript:
–setInterval
–clearInterval
–addEventListener
• Identify opportunities to add
challenge