Your SlideShare is downloading. ×
0
Build a game in HTML5
Build a game in HTML5
Build a game in HTML5
Build a game in HTML5
Build a game in HTML5
Build a game in HTML5
Build a game in HTML5
Build a game in HTML5
Build a game in HTML5
Build a game in HTML5
Build a game in HTML5
Build a game in HTML5
Build a game in HTML5
Build a game in HTML5
Build a game in HTML5
Build a game in HTML5
Build a game in HTML5
Build a game in HTML5
Build a game in HTML5
Build a game in HTML5
Build a game in HTML5
Build a game in HTML5
Build a game in HTML5
Build a game in HTML5
Build a game in HTML5
Build a game in HTML5
Build a game in HTML5
Build a game in HTML5
Build a game in HTML5
Build a game in HTML5
Build a game in HTML5
Build a game in HTML5
Build a game in HTML5
Build a game in HTML5
Build a game in HTML5
Build a game in HTML5
Build a game in HTML5
Build a game in HTML5
Build a game in HTML5
Build a game in HTML5
Build a game in HTML5
Build a game in HTML5
Build a game in HTML5
Build a game in HTML5
Build a game in HTML5
Build a game in HTML5
Build a game in HTML5
Build a game in HTML5
Build a game in HTML5
Build a game in HTML5
Build a game in HTML5
Build a game in HTML5
Build a game in HTML5
Build a game in HTML5
Build a game in HTML5
Build a game in HTML5
Build a game in HTML5
Build a game in HTML5
Build a game in HTML5
Build a game in HTML5
Build a game in HTML5
Build a game in HTML5
Build a game in HTML5
Build a game in HTML5
Build a game in HTML5
Build a game in HTML5
Build a game in HTML5
Build a game in HTML5
Build a game in HTML5
Build a game in HTML5
Build a game in HTML5
Build a game in HTML5
Build a game in HTML5
Build a game in HTML5
Build a game in HTML5
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Build a game in HTML5

474

Published on

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

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
474
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
9
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Build a game in HTML5 by Ben Chong, MarketJS
  • 2. Goals of this session ● build/understand a complete game ● deploy to server ● test
  • 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. Part 1 basics
  • 5. Unzip the template Place in any folder you like
  • 6. Run the template open index.html with Chrome Browser
  • 7. Open the debug console Windows: Options -> Tools -> Javascript Console Mac: View -> Developer -> Javascript console Debug console
  • 8. I'm stuck! (Windows User)
  • 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. Congrats! Environment set up
  • 11. Let's analyze code
  • 12. index.html
  • 13. style.css
  • 14. enchant.js
  • 15. main.js
  • 16. scenes/gamestart.js
  • 17. entities/buttons.js
  • 18. media/
  • 19. media/ bgm.mp3 explosion.mp3 shoot.mp3 recap on assets pre-loaded
  • 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. Part 2 entities
  • 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. entities/island.js
  • 24. entities/island.js questions: explain initialize explain receiveDamage explain increaseScore
  • 25. entities/defender.js questions: explain initialize explain animate
  • 26. entities/cannon-ball.js questions: explain initialize explain update
  • 27. entities/enemies.js Base class. Why base class?
  • 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. entities/explosion.js questions explain update
  • 30. entities/buttons.js questions explain handleTouchControl
  • 31. entities/buttons.js questions explain touchToRestart wait a sec .... touchToRestart is different from handleTouchControl in previous slide. Does it matter?
  • 32. scenes/game.js begin adding entities to the game scene test the game
  • 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. Part 3 the game scene
  • 35. Time to play Tips ● goto the downloaded folder for part 3 ● open index.html with Chrome browser
  • 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. scenes/game.js questions what's addEventListener? enterframe? handleTouchControl?
  • 38. scenes/game.js questions play() defender.animate() what's Math.random()?
  • 39. scenes/game.js questions what does update() do? how do we spawn enemies? collision : how to intersect?
  • 40. scenes/game.js - collision CannonBall intersects Enemy set2 = combination of CannonBall and Enemy set2[i][0] = CannonBall set2[i][1] = Enemy
  • 41. what's a collision? + = CannonBall removed IslandScore increased
  • 42. scenes/game.js questions somebody explain this KO - Game Over
  • 43. scenes/gameover.js
  • 44. scenes/gameover.js questions what's happening here? somebody explain this
  • 45. device orientation Diaoyu Defense is designed for landscape How to force user to rotate?
  • 46. device orientation easy solution: if we are in portrait mode: show this
  • 47. handler.js questions what's happening here? why so many cases? what are these weird numbers?
  • 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. Part 4 deploy to a server
  • 50. Two easy options ● Google Drive (recommended for this game) ● HKUST iHome (refer to yesterday's presentation)
  • 51. Login to your google drive acc ● drive.google.com ● drag drop your game folder
  • 52. Drag n drop
  • 53. Share entire folder
  • 54. Access rights
  • 55. Access index.html
  • 56. Open with Google Drive Viewer
  • 57. Click on "Preview"
  • 58. Click on "Preview"
  • 59. Remember your URL, save somewhere
  • 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. Bit.ly Recap
  • 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. End of Part 4 exercise ● try to upload your code to Google Drive ● try to shorten the link
  • 64. Part 5 basic social stuff http://bit.ly/diaoyu-defense-part5
  • 65. login system
  • 66. Many ways to skin a cat 2 main methods ● build within the canvas ● build on top of the canvas
  • 67. social/facebook.js
  • 68. social/market.js
  • 69. social/social.js
  • 70. social/style.css
  • 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. Facebook API setup
  • 73. Caveats Facebook login doesn't work on your local computer ● must upload game to server
  • 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. Q&A email for anything else (jobs,advice,etc) hello@marketjs.com

×