build a game in html5
DESCRIPTION
Learn how to build a basic tower defense game, with HTML5TRANSCRIPT
![Page 1: Build a game in HTML5](https://reader033.vdocuments.mx/reader033/viewer/2022042606/5405ffc88d7f729e768b4f83/html5/thumbnails/1.jpg)
Build a game in HTML5 by Ben Chong, MarketJS
![Page 2: Build a game in HTML5](https://reader033.vdocuments.mx/reader033/viewer/2022042606/5405ffc88d7f729e768b4f83/html5/thumbnails/2.jpg)
Goals of this session
● build/understand a complete game
● deploy to server
● test
![Page 3: Build a game in HTML5](https://reader033.vdocuments.mx/reader033/viewer/2022042606/5405ffc88d7f729e768b4f83/html5/thumbnails/3.jpg)
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
![Page 4: Build a game in HTML5](https://reader033.vdocuments.mx/reader033/viewer/2022042606/5405ffc88d7f729e768b4f83/html5/thumbnails/4.jpg)
Part 1basics
![Page 5: Build a game in HTML5](https://reader033.vdocuments.mx/reader033/viewer/2022042606/5405ffc88d7f729e768b4f83/html5/thumbnails/5.jpg)
Unzip the templatePlace in any folder you like
![Page 6: Build a game in HTML5](https://reader033.vdocuments.mx/reader033/viewer/2022042606/5405ffc88d7f729e768b4f83/html5/thumbnails/6.jpg)
Run the templateopen index.html with Chrome Browser
![Page 7: Build a game in HTML5](https://reader033.vdocuments.mx/reader033/viewer/2022042606/5405ffc88d7f729e768b4f83/html5/thumbnails/7.jpg)
Open the debug consoleWindows: Options -> Tools -> Javascript Console
Mac: View -> Developer -> Javascript console
Debug console
![Page 8: Build a game in HTML5](https://reader033.vdocuments.mx/reader033/viewer/2022042606/5405ffc88d7f729e768b4f83/html5/thumbnails/8.jpg)
I'm stuck! (Windows User)
![Page 9: Build a game in HTML5](https://reader033.vdocuments.mx/reader033/viewer/2022042606/5405ffc88d7f729e768b4f83/html5/thumbnails/9.jpg)
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.
![Page 10: Build a game in HTML5](https://reader033.vdocuments.mx/reader033/viewer/2022042606/5405ffc88d7f729e768b4f83/html5/thumbnails/10.jpg)
Congrats!Environment set up
![Page 11: Build a game in HTML5](https://reader033.vdocuments.mx/reader033/viewer/2022042606/5405ffc88d7f729e768b4f83/html5/thumbnails/11.jpg)
Let's analyze code
![Page 12: Build a game in HTML5](https://reader033.vdocuments.mx/reader033/viewer/2022042606/5405ffc88d7f729e768b4f83/html5/thumbnails/12.jpg)
index.html
![Page 13: Build a game in HTML5](https://reader033.vdocuments.mx/reader033/viewer/2022042606/5405ffc88d7f729e768b4f83/html5/thumbnails/13.jpg)
style.css
![Page 14: Build a game in HTML5](https://reader033.vdocuments.mx/reader033/viewer/2022042606/5405ffc88d7f729e768b4f83/html5/thumbnails/14.jpg)
enchant.js
![Page 15: Build a game in HTML5](https://reader033.vdocuments.mx/reader033/viewer/2022042606/5405ffc88d7f729e768b4f83/html5/thumbnails/15.jpg)
main.js
![Page 16: Build a game in HTML5](https://reader033.vdocuments.mx/reader033/viewer/2022042606/5405ffc88d7f729e768b4f83/html5/thumbnails/16.jpg)
scenes/gamestart.js
![Page 17: Build a game in HTML5](https://reader033.vdocuments.mx/reader033/viewer/2022042606/5405ffc88d7f729e768b4f83/html5/thumbnails/17.jpg)
entities/buttons.js
![Page 18: Build a game in HTML5](https://reader033.vdocuments.mx/reader033/viewer/2022042606/5405ffc88d7f729e768b4f83/html5/thumbnails/18.jpg)
media/
![Page 19: Build a game in HTML5](https://reader033.vdocuments.mx/reader033/viewer/2022042606/5405ffc88d7f729e768b4f83/html5/thumbnails/19.jpg)
media/bgm.mp3explosion.mp3shoot.mp3
recap on assets pre-loaded
![Page 20: Build a game in HTML5](https://reader033.vdocuments.mx/reader033/viewer/2022042606/5405ffc88d7f729e768b4f83/html5/thumbnails/20.jpg)
End of Part 1exercise:
● 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
![Page 21: Build a game in HTML5](https://reader033.vdocuments.mx/reader033/viewer/2022042606/5405ffc88d7f729e768b4f83/html5/thumbnails/21.jpg)
Part 2entities
![Page 22: Build a game in HTML5](https://reader033.vdocuments.mx/reader033/viewer/2022042606/5405ffc88d7f729e768b4f83/html5/thumbnails/22.jpg)
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
![Page 23: Build a game in HTML5](https://reader033.vdocuments.mx/reader033/viewer/2022042606/5405ffc88d7f729e768b4f83/html5/thumbnails/23.jpg)
entities/island.js
![Page 24: Build a game in HTML5](https://reader033.vdocuments.mx/reader033/viewer/2022042606/5405ffc88d7f729e768b4f83/html5/thumbnails/24.jpg)
entities/island.js
questions:
explain initialize
explain receiveDamage
explain increaseScore
![Page 25: Build a game in HTML5](https://reader033.vdocuments.mx/reader033/viewer/2022042606/5405ffc88d7f729e768b4f83/html5/thumbnails/25.jpg)
entities/defender.js
questions:
explain initialize
explain animate
![Page 26: Build a game in HTML5](https://reader033.vdocuments.mx/reader033/viewer/2022042606/5405ffc88d7f729e768b4f83/html5/thumbnails/26.jpg)
entities/cannon-ball.js
questions:
explain initialize
explain update
![Page 27: Build a game in HTML5](https://reader033.vdocuments.mx/reader033/viewer/2022042606/5405ffc88d7f729e768b4f83/html5/thumbnails/27.jpg)
entities/enemies.js
Base class.
Why base class?
![Page 28: Build a game in HTML5](https://reader033.vdocuments.mx/reader033/viewer/2022042606/5405ffc88d7f729e768b4f83/html5/thumbnails/28.jpg)
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
![Page 29: Build a game in HTML5](https://reader033.vdocuments.mx/reader033/viewer/2022042606/5405ffc88d7f729e768b4f83/html5/thumbnails/29.jpg)
entities/explosion.js
questions
explain update
![Page 30: Build a game in HTML5](https://reader033.vdocuments.mx/reader033/viewer/2022042606/5405ffc88d7f729e768b4f83/html5/thumbnails/30.jpg)
entities/buttons.js
questions
explain handleTouchControl
![Page 31: Build a game in HTML5](https://reader033.vdocuments.mx/reader033/viewer/2022042606/5405ffc88d7f729e768b4f83/html5/thumbnails/31.jpg)
entities/buttons.js
questions
explain touchToRestart
wait a sec .... touchToRestart is different from handleTouchControl in previous slide. Does it matter?
![Page 32: Build a game in HTML5](https://reader033.vdocuments.mx/reader033/viewer/2022042606/5405ffc88d7f729e768b4f83/html5/thumbnails/32.jpg)
scenes/game.jsbegin adding entities to the game scene
test the game
![Page 33: Build a game in HTML5](https://reader033.vdocuments.mx/reader033/viewer/2022042606/5405ffc88d7f729e768b4f83/html5/thumbnails/33.jpg)
End of Part 2exercise:
● 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-part3or try Dropbox link https://dl.dropboxusercontent.com/u/29923081/Workshop/diaoyu-defense-enchantjs-part3.zip
![Page 34: Build a game in HTML5](https://reader033.vdocuments.mx/reader033/viewer/2022042606/5405ffc88d7f729e768b4f83/html5/thumbnails/34.jpg)
Part 3the game scene
![Page 35: Build a game in HTML5](https://reader033.vdocuments.mx/reader033/viewer/2022042606/5405ffc88d7f729e768b4f83/html5/thumbnails/35.jpg)
Time to playTips
● goto the downloaded folder for part 3● open index.html with Chrome browser
![Page 36: Build a game in HTML5](https://reader033.vdocuments.mx/reader033/viewer/2022042606/5405ffc88d7f729e768b4f83/html5/thumbnails/36.jpg)
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
![Page 37: Build a game in HTML5](https://reader033.vdocuments.mx/reader033/viewer/2022042606/5405ffc88d7f729e768b4f83/html5/thumbnails/37.jpg)
scenes/game.js
questions
what's addEventListener?
enterframe?
handleTouchControl?
![Page 38: Build a game in HTML5](https://reader033.vdocuments.mx/reader033/viewer/2022042606/5405ffc88d7f729e768b4f83/html5/thumbnails/38.jpg)
scenes/game.js
questions
play()
defender.animate()
what's Math.random()?
![Page 39: Build a game in HTML5](https://reader033.vdocuments.mx/reader033/viewer/2022042606/5405ffc88d7f729e768b4f83/html5/thumbnails/39.jpg)
scenes/game.jsquestions
what does update() do?
how do we spawn enemies?
collision : how to intersect?
![Page 40: Build a game in HTML5](https://reader033.vdocuments.mx/reader033/viewer/2022042606/5405ffc88d7f729e768b4f83/html5/thumbnails/40.jpg)
scenes/game.js - collision
CannonBall intersects Enemy
set2 = combination of CannonBall and Enemy
set2[i][0] = CannonBallset2[i][1] = Enemy
![Page 41: Build a game in HTML5](https://reader033.vdocuments.mx/reader033/viewer/2022042606/5405ffc88d7f729e768b4f83/html5/thumbnails/41.jpg)
what's a collision?
+ =CannonBall removed
IslandScore increased
![Page 42: Build a game in HTML5](https://reader033.vdocuments.mx/reader033/viewer/2022042606/5405ffc88d7f729e768b4f83/html5/thumbnails/42.jpg)
scenes/game.jsquestions
somebody explain this
KO - Game Over
![Page 43: Build a game in HTML5](https://reader033.vdocuments.mx/reader033/viewer/2022042606/5405ffc88d7f729e768b4f83/html5/thumbnails/43.jpg)
scenes/gameover.js
![Page 44: Build a game in HTML5](https://reader033.vdocuments.mx/reader033/viewer/2022042606/5405ffc88d7f729e768b4f83/html5/thumbnails/44.jpg)
scenes/gameover.jsquestions
what's happening here?
somebody explain this
![Page 45: Build a game in HTML5](https://reader033.vdocuments.mx/reader033/viewer/2022042606/5405ffc88d7f729e768b4f83/html5/thumbnails/45.jpg)
device orientation
Diaoyu Defense is designed for landscape
How to force user to rotate?
![Page 46: Build a game in HTML5](https://reader033.vdocuments.mx/reader033/viewer/2022042606/5405ffc88d7f729e768b4f83/html5/thumbnails/46.jpg)
device orientationeasy solution: if we are in portrait mode: show this
![Page 47: Build a game in HTML5](https://reader033.vdocuments.mx/reader033/viewer/2022042606/5405ffc88d7f729e768b4f83/html5/thumbnails/47.jpg)
handler.jsquestions
what's happening here?
why so many cases? what are these weird numbers?
![Page 48: Build a game in HTML5](https://reader033.vdocuments.mx/reader033/viewer/2022042606/5405ffc88d7f729e768b4f83/html5/thumbnails/48.jpg)
End of Part 3exercise
● try to change enemy health● change enemy score● change enemy damage
and refresh game to see effects
for Part 4, nothing to download
![Page 49: Build a game in HTML5](https://reader033.vdocuments.mx/reader033/viewer/2022042606/5405ffc88d7f729e768b4f83/html5/thumbnails/49.jpg)
Part 4deploy to a server
![Page 50: Build a game in HTML5](https://reader033.vdocuments.mx/reader033/viewer/2022042606/5405ffc88d7f729e768b4f83/html5/thumbnails/50.jpg)
Two easy options
● Google Drive (recommended for this game)
● HKUST iHome (refer to yesterday's presentation)
![Page 51: Build a game in HTML5](https://reader033.vdocuments.mx/reader033/viewer/2022042606/5405ffc88d7f729e768b4f83/html5/thumbnails/51.jpg)
Login to your google drive acc
● drive.google.com
● drag drop your game folder
![Page 52: Build a game in HTML5](https://reader033.vdocuments.mx/reader033/viewer/2022042606/5405ffc88d7f729e768b4f83/html5/thumbnails/52.jpg)
Drag n drop
![Page 53: Build a game in HTML5](https://reader033.vdocuments.mx/reader033/viewer/2022042606/5405ffc88d7f729e768b4f83/html5/thumbnails/53.jpg)
Share entire folder
![Page 54: Build a game in HTML5](https://reader033.vdocuments.mx/reader033/viewer/2022042606/5405ffc88d7f729e768b4f83/html5/thumbnails/54.jpg)
Access rights
![Page 55: Build a game in HTML5](https://reader033.vdocuments.mx/reader033/viewer/2022042606/5405ffc88d7f729e768b4f83/html5/thumbnails/55.jpg)
Access index.html
![Page 56: Build a game in HTML5](https://reader033.vdocuments.mx/reader033/viewer/2022042606/5405ffc88d7f729e768b4f83/html5/thumbnails/56.jpg)
Open with Google Drive Viewer
![Page 57: Build a game in HTML5](https://reader033.vdocuments.mx/reader033/viewer/2022042606/5405ffc88d7f729e768b4f83/html5/thumbnails/57.jpg)
Click on "Preview"
![Page 58: Build a game in HTML5](https://reader033.vdocuments.mx/reader033/viewer/2022042606/5405ffc88d7f729e768b4f83/html5/thumbnails/58.jpg)
Click on "Preview"
![Page 59: Build a game in HTML5](https://reader033.vdocuments.mx/reader033/viewer/2022042606/5405ffc88d7f729e768b4f83/html5/thumbnails/59.jpg)
Remember your URL, save somewhere
![Page 60: Build a game in HTML5](https://reader033.vdocuments.mx/reader033/viewer/2022042606/5405ffc88d7f729e768b4f83/html5/thumbnails/60.jpg)
Can't remember URL, too longuse a URL shortener service
goto http://bit.ly
and paste that long URL
eg: https://googledrive.com/host/0B89RkgELtPpGS2lYRm40cnFfNXM/index.html
becomeshttp://bit.ly/11foN3o ( easy to share, type in mobile )
![Page 61: Build a game in HTML5](https://reader033.vdocuments.mx/reader033/viewer/2022042606/5405ffc88d7f729e768b4f83/html5/thumbnails/61.jpg)
Bit.ly Recap
![Page 62: Build a game in HTML5](https://reader033.vdocuments.mx/reader033/viewer/2022042606/5405ffc88d7f729e768b4f83/html5/thumbnails/62.jpg)
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
![Page 63: Build a game in HTML5](https://reader033.vdocuments.mx/reader033/viewer/2022042606/5405ffc88d7f729e768b4f83/html5/thumbnails/63.jpg)
End of Part 4exercise
● try to upload your code to Google Drive● try to shorten the link
![Page 64: Build a game in HTML5](https://reader033.vdocuments.mx/reader033/viewer/2022042606/5405ffc88d7f729e768b4f83/html5/thumbnails/64.jpg)
Part 5basic social stuff
http://bit.ly/diaoyu-defense-part5
![Page 65: Build a game in HTML5](https://reader033.vdocuments.mx/reader033/viewer/2022042606/5405ffc88d7f729e768b4f83/html5/thumbnails/65.jpg)
login system
![Page 66: Build a game in HTML5](https://reader033.vdocuments.mx/reader033/viewer/2022042606/5405ffc88d7f729e768b4f83/html5/thumbnails/66.jpg)
Many ways to skin a cat2 main methods
● build within the canvas
● build on top of the canvas
![Page 67: Build a game in HTML5](https://reader033.vdocuments.mx/reader033/viewer/2022042606/5405ffc88d7f729e768b4f83/html5/thumbnails/67.jpg)
social/facebook.js
![Page 68: Build a game in HTML5](https://reader033.vdocuments.mx/reader033/viewer/2022042606/5405ffc88d7f729e768b4f83/html5/thumbnails/68.jpg)
social/market.js
![Page 69: Build a game in HTML5](https://reader033.vdocuments.mx/reader033/viewer/2022042606/5405ffc88d7f729e768b4f83/html5/thumbnails/69.jpg)
social/social.js
![Page 70: Build a game in HTML5](https://reader033.vdocuments.mx/reader033/viewer/2022042606/5405ffc88d7f729e768b4f83/html5/thumbnails/70.jpg)
social/style.css
![Page 71: Build a game in HTML5](https://reader033.vdocuments.mx/reader033/viewer/2022042606/5405ffc88d7f729e768b4f83/html5/thumbnails/71.jpg)
scenes/game.js
Where to get MarketJS API Key?email [email protected], with your university email, describe your game.
Where to get Facebook API Key?http://developers.facebook.com
![Page 72: Build a game in HTML5](https://reader033.vdocuments.mx/reader033/viewer/2022042606/5405ffc88d7f729e768b4f83/html5/thumbnails/72.jpg)
Facebook API setup
![Page 73: Build a game in HTML5](https://reader033.vdocuments.mx/reader033/viewer/2022042606/5405ffc88d7f729e768b4f83/html5/thumbnails/73.jpg)
CaveatsFacebook login doesn't work on your local computer
● must upload game to server
![Page 74: Build a game in HTML5](https://reader033.vdocuments.mx/reader033/viewer/2022042606/5405ffc88d7f729e768b4f83/html5/thumbnails/74.jpg)
End of Part 5bonus for competition
● download Part 5 at home, bit.ly/html5-workshop-part5 or https://dl.dropboxusercontent.com/u/29923081/Workshop/diaoyu-defense-enchantjs-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