Home > Education > Browser based games

Browser based games

Date post: 14-Aug-2015
Category:
Author: matthew-leach
View: 43 times
Download: 0 times
Share this document with a friend
Embed Size (px)
of 15 /15
Browser-Based Games Dr. Matthew Leach
Transcript
  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

Recommended