Goals of this session
● build/understand a complete game
● deploy to server
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
recap on assets pre-loaded
End of Part 1
● try to change position of start button
● 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
or get the link from the group chat
Why base class?
3 enemy classes. Each has similar
behavior, but different graphics,
Lazy programmer says - I'll make a
common enemy class, and i will
extend those to include all enemies
wait a sec .... touchToRestart
is different from
previous slide. Does it matter?
begin adding entities to the
test the game
End of Part 2
● 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.
Can't remember URL, too long
use a URL shortener service
and paste that long URL
http://bit.ly/11foN3o ( easy to share, type in mobile )
What to do with links?
for testing with your team-mates
for competition submission
for testing on devices
make sure link works!
also try other URL shorteners, like http://goo.gl
End of Part 4
● try to upload your code to Google Drive
● try to shorten the link
basic social stuff
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.dropboxusercontent.
intermediate: figure out how to implement a
advanced: figure out how to implement a
leaderboard, by using market.js, facebook.js,
email for anything else (jobs,advice,etc)
A particular slide catching your eye?
Clipping is a handy way to collect important slides you want to go back to later.