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 Sublime Text 2

● Template: http://bit.ly/diaoyu-defense-basic (File->Save)

● Filesharing/Code Hosting: Google Drive account

Part 1basics

Unzip the templatePlace in any folder you like

Run the templateopen index.html with Chrome Browser

Open the debug consoleWindows: Options -> Tools -> Javascript Console

Mac: View -> Developer -> Javascript console

Debug console

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 game

● Click on the start button, you'll get a red error.

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.mp3explosion.mp3shoot.mp3

recap on assets pre-loaded

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

Part 2entities

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

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 - I'll make a common enemy class, and i will extend those to include all enemies

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 in previous slide. Does it matter?

scenes/game.jsbegin adding entities to the game scene

test the game

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

Part 3the game scene

Time to playTips

● 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 status bar is alive!

● We have a game loop

scenes/game.js

questions

what's addEventListener?

enterframe?

handleTouchControl?

scenes/game.js

questions

play()

defender.animate()

what's Math.random()?

scenes/game.jsquestions

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] = CannonBallset2[i][1] = Enemy

what's a collision?

+ =CannonBall removed

IslandScore increased

scenes/game.jsquestions

somebody explain this

KO - Game Over

scenes/gameover.js

scenes/gameover.jsquestions

what's happening here?

somebody explain this

device orientation

Diaoyu Defense is designed for landscape

How to force user to rotate?

device orientationeasy solution: if we are in portrait mode: show this

handler.jsquestions

what's happening here?

why so many cases? what are these weird numbers?

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

Part 4deploy 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 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 )

Bit.ly Recap

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

End of Part 4exercise

● try to upload your code to Google Drive● try to shorten the link

Part 5basic social stuff

http://bit.ly/diaoyu-defense-part5

login system

Many ways to skin a cat2 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.

Where to get Facebook API Key?http://developers.facebook.com

Facebook API setup

CaveatsFacebook login doesn't work on your local computer

● must upload game to server

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

Q & A

email for anything else (jobs,advice,etc)hello@marketjs.com