1. 1. Browser-Based Games Dr. Matthew Leach
2. 2. thoughtfulmonkey.com/ westnotts
3. 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. 4. JSFiddle Rapid prototyping platform HTML, CSS, JavaScript Look for // *** TODO
5. 5. HTML Canvas (briefly) 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. 6. HTML Canvas (briefly) 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. 7. Script Structure Variables Game Setup levelSetup() update() keyHandler( e ) gameOver()
8. 8. Call the Setup Function // *** TODO: Perform level setup levelSetup();
9. 9. Starting a Main Game Loop // *** TODO: Start game loop intervalID = setInterval(update, 1000 / 16);
10. 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. 11. Stopping the Game Loop // *** TODO: Stop the game loop clearInterval(intervalID);
12. 12. User Input // *** TODO: Add keyboard listener document.addEventListener( "keydown", keyHandler, false);
13. 13. Test the Game Whats broken? Wheres the challenge?
14. 14. Design Improvements Work in pairs Design 2 improvements One scalable challenge One new feature
15. 15. Summary Key JavaScript: setInterval clearInterval addEventListener Identify opportunities to add challenge