Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Build a game in HTML5
by Ben Chong, MarketJS
Goals of this session
● build/understand a complete game
● deploy to server
● test
Recap - Preparation
Do you have all this ready?
● Browser: Google Chrome
● Code editor: your favorite text editor, or Subl...
Part 1
basics
Unzip the template
Place in any folder you like
Run the template
open index.html with Chrome Browser
Open the debug console
Windows: Options -> Tools -> Javascript Console
Mac: View -> Developer -> Javascript console

Debug...
I'm stuck!

(Windows User)
Why debug console?
Errors might occur. You can see what's going on.

Tips:
●

Refresh the browser again, to reload the gam...
Congrats!
Environment set up
Let's analyze code
index.html
style.css
enchant.js
main.js
scenes/gamestart.js
entities/buttons.js
media/
media/
bgm.mp3
explosion.mp3
shoot.mp3

recap on assets pre-loaded
End of Part 1
exercise:
● try to change position of start button
tips
● open the code editor, and browser side-by-side
● a...
Part 2
entities
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 en...
entities/island.js
entities/island.js
questions:

explain initialize
explain receiveDamage
explain increaseScore
entities/defender.js

questions:

explain initialize
explain animate
entities/cannon-ball.js

questions:

explain initialize
explain update
entities/enemies.js
Base class.
Why base class?
entities/enemies.js

3 enemy classes. Each has similar
behavior, but different graphics,
health, etc

Lazy programmer says...
entities/explosion.js

questions
explain update
entities/buttons.js

questions
explain handleTouchControl
entities/buttons.js

questions
explain touchToRestart

wait a sec .... touchToRestart
is different from
handleTouchControl...
scenes/game.js
begin adding entities to the
game scene

test the game
End of Part 2
exercise:
● try to change order of spawning entities (main.js)
● change x,y position of entities
● change di...
Part 3
the game scene
Time to play
Tips
● goto the downloaded folder for part 3
● open index.html with Chrome browser
What's different?
●

Enemies moving towards island

●

You can shoot at enemy ships

●

Your island can be damaged

●

The...
scenes/game.js

questions
what's addEventListener?
enterframe?
handleTouchControl?
scenes/game.js

questions
play()
defender.animate()
what's Math.random()?
scenes/game.js
questions
what does
update() do?
how do we spawn
enemies?
collision : how to
intersect?
scenes/game.js - collision

CannonBall intersects Enemy
set2 = combination of
CannonBall and Enemy
set2[i][0] = CannonBall...
what's a collision?

+

=
CannonBall
removed
IslandScore
increased
scenes/game.js
questions
somebody explain
this

KO - Game
Over
scenes/gameover.js
scenes/gameover.js
questions
what's happening
here?
somebody explain
this
device orientation

Diaoyu Defense is designed for landscape
How to force user to rotate?
device orientation
easy solution: if we are in portrait mode: show this
handler.js
questions
what's happening here?
why so many cases? what are
these weird numbers?
End of Part 3
exercise
● try to change enemy health
● change enemy score
● change enemy damage
and refresh game to see eff...
Part 4
deploy to a server
Two easy options
● Google Drive
(recommended for this game)
● HKUST iHome (refer to yesterday's
presentation)
Login to your google drive acc
● drive.google.com
● drag drop your game folder
Drag n drop
Share entire folder
Access rights
Access index.html
Open with Google Drive Viewer
Click on "Preview"
Click on "Preview"
Remember your URL, save somewhere
Can't remember URL, too long
use a URL shortener service
goto http://bit.ly
and paste that long URL
eg: https://googledriv...
Bit.ly Recap
What to do with links?
share them!
eg:
●
●
●

for testing with your team-mates
for competition submission
for testing on d...
End of Part 4
exercise
● try to upload your code to Google Drive
● try to shorten the link
Part 5
basic social stuff
http://bit.ly/diaoyu-defense-part5
login system
Many ways to skin a cat
2 main methods
●

build within the canvas

●

build on top of the canvas
social/facebook.js
social/market.js
social/social.js
social/style.css
scenes/game.js

Where to get MarketJS API Key?
email hello@marketjs.com, with your university email,
describe your game.
W...
Facebook API setup
Caveats
Facebook login doesn't work on your local computer
●

must upload game to server
End of Part 5
bonus for competition
●

●

●

download Part 5 at home, bit.ly/html5-workshoppart5 or https://dl.dropboxuser...
Q&A
email for anything else (jobs,advice,etc)
hello@marketjs.com
Upcoming SlideShare
Loading in …5
×

Build a game in HTML5

1,176 views

Published on

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

  • Be the first to comment

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

×