Build a game in HTML5

628
-1

Published on

Learn how to build a basic tower defense game, with HTML5

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
628
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
14
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Build a game in HTML5

  1. 1. Build a game in HTML5 by Ben Chong, MarketJS
  2. 2. Goals of this session ● build/understand a complete game ● deploy to server ● test
  3. 3. Recap - Preparation Do you have all this ready? ● Browser: Google Chrome ● Code editor: your favorite text editor, or Sublime Text 2 ● Template: http://bit.ly/diaoyu-defense-basic (File->Save) ● Filesharing/Code Hosting: Google Drive account
  4. 4. Part 1 basics
  5. 5. Unzip the template Place in any folder you like
  6. 6. Run the template open index.html with Chrome Browser
  7. 7. Open the debug console Windows: Options -> Tools -> Javascript Console Mac: View -> Developer -> Javascript console Debug console
  8. 8. I'm stuck! (Windows User)
  9. 9. Why debug console? Errors might occur. You can see what's going on. Tips: ● Refresh the browser again, to reload the game ● Click on the start button, you'll get a red error.
  10. 10. Congrats! Environment set up
  11. 11. Let's analyze code
  12. 12. index.html
  13. 13. style.css
  14. 14. enchant.js
  15. 15. main.js
  16. 16. scenes/gamestart.js
  17. 17. entities/buttons.js
  18. 18. media/
  19. 19. media/ bgm.mp3 explosion.mp3 shoot.mp3 recap on assets pre-loaded
  20. 20. End of Part 1 exercise: ● try to change position of start button tips ● open the code editor, and browser side-by-side ● after a change is made in code, save it, then refresh the browser to see effects. download Part 2 now http://bit.ly/html5-workshop-part2-entities or get the link from the group chat
  21. 21. Part 2 entities
  22. 22. What's an entity? Simply put, it's an object. We place it in a game scene. We might/might not manipulate it. Check your entities folder
  23. 23. entities/island.js
  24. 24. entities/island.js questions: explain initialize explain receiveDamage explain increaseScore
  25. 25. entities/defender.js questions: explain initialize explain animate
  26. 26. entities/cannon-ball.js questions: explain initialize explain update
  27. 27. entities/enemies.js Base class. Why base class?
  28. 28. entities/enemies.js 3 enemy classes. Each has similar behavior, but different graphics, health, etc Lazy programmer says - I'll make a common enemy class, and i will extend those to include all enemies
  29. 29. entities/explosion.js questions explain update
  30. 30. entities/buttons.js questions explain handleTouchControl
  31. 31. entities/buttons.js questions explain touchToRestart wait a sec .... touchToRestart is different from handleTouchControl in previous slide. Does it matter?
  32. 32. scenes/game.js begin adding entities to the game scene test the game
  33. 33. End of Part 2 exercise: ● try to change order of spawning entities (main.js) ● change x,y position of entities ● change direction of defender download Part 3 now bit.ly/html5-workshop-part3 or try Dropbox link https://dl.dropboxusercontent. com/u/29923081/Workshop/diaoyu-defenseenchantjs-part3.zip
  34. 34. Part 3 the game scene
  35. 35. Time to play Tips ● goto the downloaded folder for part 3 ● open index.html with Chrome browser
  36. 36. What's different? ● Enemies moving towards island ● You can shoot at enemy ships ● Your island can be damaged ● The status bar is alive! ● We have a game loop
  37. 37. scenes/game.js questions what's addEventListener? enterframe? handleTouchControl?
  38. 38. scenes/game.js questions play() defender.animate() what's Math.random()?
  39. 39. scenes/game.js questions what does update() do? how do we spawn enemies? collision : how to intersect?
  40. 40. scenes/game.js - collision CannonBall intersects Enemy set2 = combination of CannonBall and Enemy set2[i][0] = CannonBall set2[i][1] = Enemy
  41. 41. what's a collision? + = CannonBall removed IslandScore increased
  42. 42. scenes/game.js questions somebody explain this KO - Game Over
  43. 43. scenes/gameover.js
  44. 44. scenes/gameover.js questions what's happening here? somebody explain this
  45. 45. device orientation Diaoyu Defense is designed for landscape How to force user to rotate?
  46. 46. device orientation easy solution: if we are in portrait mode: show this
  47. 47. handler.js questions what's happening here? why so many cases? what are these weird numbers?
  48. 48. End of Part 3 exercise ● try to change enemy health ● change enemy score ● change enemy damage and refresh game to see effects for Part 4, nothing to download
  49. 49. Part 4 deploy to a server
  50. 50. Two easy options ● Google Drive (recommended for this game) ● HKUST iHome (refer to yesterday's presentation)
  51. 51. Login to your google drive acc ● drive.google.com ● drag drop your game folder
  52. 52. Drag n drop
  53. 53. Share entire folder
  54. 54. Access rights
  55. 55. Access index.html
  56. 56. Open with Google Drive Viewer
  57. 57. Click on "Preview"
  58. 58. Click on "Preview"
  59. 59. Remember your URL, save somewhere
  60. 60. Can't remember URL, too long use a URL shortener service goto http://bit.ly and paste that long URL eg: https://googledrive. com/host/0B89RkgELtPpGS2lYRm40cnFfNXM/inde x.html becomes http://bit.ly/11foN3o ( easy to share, type in mobile )
  61. 61. Bit.ly Recap
  62. 62. What to do with links? share them! eg: ● ● ● for testing with your team-mates for competition submission for testing on devices ps: ● ● make sure link works! also try other URL shorteners, like http://goo.gl
  63. 63. End of Part 4 exercise ● try to upload your code to Google Drive ● try to shorten the link
  64. 64. Part 5 basic social stuff http://bit.ly/diaoyu-defense-part5
  65. 65. login system
  66. 66. Many ways to skin a cat 2 main methods ● build within the canvas ● build on top of the canvas
  67. 67. social/facebook.js
  68. 68. social/market.js
  69. 69. social/social.js
  70. 70. social/style.css
  71. 71. scenes/game.js Where to get MarketJS API Key? email hello@marketjs.com, with your university email, describe your game. Where to get Facebook API Key? http://developers.facebook.com
  72. 72. Facebook API setup
  73. 73. Caveats Facebook login doesn't work on your local computer ● must upload game to server
  74. 74. End of Part 5 bonus for competition ● ● ● download Part 5 at home, bit.ly/html5-workshoppart5 or https://dl.dropboxusercontent. com/u/29923081/Workshop/diaoyu-defenseenchantjs-part5.zip intermediate: figure out how to implement a login callback advanced: figure out how to implement a leaderboard, by using market.js, facebook.js, social.js
  75. 75. Q&A email for anything else (jobs,advice,etc) hello@marketjs.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×