SlideShare ist ein Scribd-Unternehmen logo
1 von 15
YU JIANRONG Zlonggames
10 HTML5 Tips
Zlong HTML5 games Castle Solitaire Blocker Mover Bubble Hit More details: http://m.agame.com
Tip 1  Desktop & Mobile Choose <Canvas> for games Canvas + Widely supported  + No compatibility problems CSS  + nice effects via CSS 3D, iphone only    - Compatibility problems on CSS  - Crash on iOS  - Flickering on Android
Tip 2  Use <audio> tag for Background Music ,[object Object]
Mobile: only one Music can be played at the same timeDesktop & Mobile
Tip 3  Use touch events for Mobile ,[object Object]
Desktop : Mouse events (e.g. onmouseup)
Mobile : Touch events (e.g. ontouchstart)
Note: multi-touch events supported by iOS only
For more details: visit http://developer.apple.com/devcenter/safari/index.actionMobile
Tip 4  Mobile Use Dirty Rectangles for Canvas  to improve framerate ,[object Object],Example of game Bubble Hit
Tip 5  Mobile Match button size on Mobile to finger 40 pixels is recommended for Mobile
Tip 6 Mobile setTimeout instead of  setIntervalfor game loop setInterval: DOM may not be refresh on Android

Weitere ähnliche Inhalte

Ähnlich wie Top10 tips to get started with html5 games

Mdc2010 Casual Game Dev
Mdc2010 Casual Game DevMdc2010 Casual Game Dev
Mdc2010 Casual Game Devmomobangalore
 
Bringing HTML5 Video to Mobile Devices
Bringing HTML5 Video to Mobile DevicesBringing HTML5 Video to Mobile Devices
Bringing HTML5 Video to Mobile DevicesBrian Crescimanno
 
13 types of interface
13 types of interface13 types of interface
13 types of interfaceLucy Taylor
 
Zte skate smartphone is a gentle giant
Zte skate smartphone is a gentle giantZte skate smartphone is a gentle giant
Zte skate smartphone is a gentle giantmodem3g
 
Real Benefits of HTML5 for Games (MS Campfire, 2012)
Real Benefits of HTML5 for Games (MS Campfire, 2012)Real Benefits of HTML5 for Games (MS Campfire, 2012)
Real Benefits of HTML5 for Games (MS Campfire, 2012)Juha Paananen
 
Moto%20 x%20project
Moto%20 x%20projectMoto%20 x%20project
Moto%20 x%20projectgeneralvee
 
Android and android phones
Android and android phonesAndroid and android phones
Android and android phonesu917
 
Galaxy grab
Galaxy grabGalaxy grab
Galaxy grabDuane
 
TiCalabash: Fully automated Acceptance Testing @ TiConf EU 2014
TiCalabash: Fully automated Acceptance Testing @ TiConf EU 2014TiCalabash: Fully automated Acceptance Testing @ TiConf EU 2014
TiCalabash: Fully automated Acceptance Testing @ TiConf EU 2014Andrew McElroy
 
Wojciech Pater - selected works
Wojciech Pater - selected worksWojciech Pater - selected works
Wojciech Pater - selected worksWojciech Pater
 
Shop for best smartphones 2020
Shop for best smartphones 2020Shop for best smartphones 2020
Shop for best smartphones 2020Rajib Mukherjee
 
Going Mobile - Flash Gaming Summit 2012
Going Mobile - Flash Gaming Summit 2012Going Mobile - Flash Gaming Summit 2012
Going Mobile - Flash Gaming Summit 2012Nate Beck
 
Facebook developer Garage, Colm Doyle, Facebook
Facebook developer Garage, Colm Doyle, FacebookFacebook developer Garage, Colm Doyle, Facebook
Facebook developer Garage, Colm Doyle, FacebookAnna-Marie Taylor
 
Samsung Galaxy S - Sydney Mobile User Group (August 2010)
Samsung Galaxy S - Sydney Mobile User Group (August 2010)Samsung Galaxy S - Sydney Mobile User Group (August 2010)
Samsung Galaxy S - Sydney Mobile User Group (August 2010)Neerav Bhatt
 
Affinity Talk2008
Affinity Talk2008Affinity Talk2008
Affinity Talk2008martinip
 
Brass Monkey Couch Multiplayer
Brass Monkey Couch MultiplayerBrass Monkey Couch Multiplayer
Brass Monkey Couch MultiplayerFrancois Laberge
 
Android for beginners: Tips and tricks for your new smartphone
Android for beginners: Tips and tricks for your new smartphoneAndroid for beginners: Tips and tricks for your new smartphone
Android for beginners: Tips and tricks for your new smartphoneDharmendra Rama
 
inphone
inphoneinphone
inphonereeece
 
Beginning Android Flash Development
Beginning Android Flash DevelopmentBeginning Android Flash Development
Beginning Android Flash DevelopmentStephen Chin
 

Ähnlich wie Top10 tips to get started with html5 games (20)

Mdc2010 Casual Game Dev
Mdc2010 Casual Game DevMdc2010 Casual Game Dev
Mdc2010 Casual Game Dev
 
Google glass
Google glassGoogle glass
Google glass
 
Bringing HTML5 Video to Mobile Devices
Bringing HTML5 Video to Mobile DevicesBringing HTML5 Video to Mobile Devices
Bringing HTML5 Video to Mobile Devices
 
13 types of interface
13 types of interface13 types of interface
13 types of interface
 
Zte skate smartphone is a gentle giant
Zte skate smartphone is a gentle giantZte skate smartphone is a gentle giant
Zte skate smartphone is a gentle giant
 
Real Benefits of HTML5 for Games (MS Campfire, 2012)
Real Benefits of HTML5 for Games (MS Campfire, 2012)Real Benefits of HTML5 for Games (MS Campfire, 2012)
Real Benefits of HTML5 for Games (MS Campfire, 2012)
 
Moto%20 x%20project
Moto%20 x%20projectMoto%20 x%20project
Moto%20 x%20project
 
Android and android phones
Android and android phonesAndroid and android phones
Android and android phones
 
Galaxy grab
Galaxy grabGalaxy grab
Galaxy grab
 
TiCalabash: Fully automated Acceptance Testing @ TiConf EU 2014
TiCalabash: Fully automated Acceptance Testing @ TiConf EU 2014TiCalabash: Fully automated Acceptance Testing @ TiConf EU 2014
TiCalabash: Fully automated Acceptance Testing @ TiConf EU 2014
 
Wojciech Pater - selected works
Wojciech Pater - selected worksWojciech Pater - selected works
Wojciech Pater - selected works
 
Shop for best smartphones 2020
Shop for best smartphones 2020Shop for best smartphones 2020
Shop for best smartphones 2020
 
Going Mobile - Flash Gaming Summit 2012
Going Mobile - Flash Gaming Summit 2012Going Mobile - Flash Gaming Summit 2012
Going Mobile - Flash Gaming Summit 2012
 
Facebook developer Garage, Colm Doyle, Facebook
Facebook developer Garage, Colm Doyle, FacebookFacebook developer Garage, Colm Doyle, Facebook
Facebook developer Garage, Colm Doyle, Facebook
 
Samsung Galaxy S - Sydney Mobile User Group (August 2010)
Samsung Galaxy S - Sydney Mobile User Group (August 2010)Samsung Galaxy S - Sydney Mobile User Group (August 2010)
Samsung Galaxy S - Sydney Mobile User Group (August 2010)
 
Affinity Talk2008
Affinity Talk2008Affinity Talk2008
Affinity Talk2008
 
Brass Monkey Couch Multiplayer
Brass Monkey Couch MultiplayerBrass Monkey Couch Multiplayer
Brass Monkey Couch Multiplayer
 
Android for beginners: Tips and tricks for your new smartphone
Android for beginners: Tips and tricks for your new smartphoneAndroid for beginners: Tips and tricks for your new smartphone
Android for beginners: Tips and tricks for your new smartphone
 
inphone
inphoneinphone
inphone
 
Beginning Android Flash Development
Beginning Android Flash DevelopmentBeginning Android Flash Development
Beginning Android Flash Development
 

Kürzlich hochgeladen

VIP Call Girls Sonagachi - 8250192130 Escorts Service 50% Off with Cash ON De...
VIP Call Girls Sonagachi - 8250192130 Escorts Service 50% Off with Cash ON De...VIP Call Girls Sonagachi - 8250192130 Escorts Service 50% Off with Cash ON De...
VIP Call Girls Sonagachi - 8250192130 Escorts Service 50% Off with Cash ON De...anamikaraghav4
 
(KRITI) Pimpri Chinchwad Call Girls Just Call 7001035870 [ Cash on Delivery ]...
(KRITI) Pimpri Chinchwad Call Girls Just Call 7001035870 [ Cash on Delivery ]...(KRITI) Pimpri Chinchwad Call Girls Just Call 7001035870 [ Cash on Delivery ]...
(KRITI) Pimpri Chinchwad Call Girls Just Call 7001035870 [ Cash on Delivery ]...ranjana rawat
 
VIP Call Girl Kolhapur Aashi 8250192130 Independent Escort Service Kolhapur
VIP Call Girl Kolhapur Aashi 8250192130 Independent Escort Service KolhapurVIP Call Girl Kolhapur Aashi 8250192130 Independent Escort Service Kolhapur
VIP Call Girl Kolhapur Aashi 8250192130 Independent Escort Service KolhapurRiya Pathan
 
Call Girls Service Bantala - Call 8250192130 Rs-3500 with A/C Room Cash on De...
Call Girls Service Bantala - Call 8250192130 Rs-3500 with A/C Room Cash on De...Call Girls Service Bantala - Call 8250192130 Rs-3500 with A/C Room Cash on De...
Call Girls Service Bantala - Call 8250192130 Rs-3500 with A/C Room Cash on De...anamikaraghav4
 
Call Girls Nashik Gayatri 7001305949 Independent Escort Service Nashik
Call Girls Nashik Gayatri 7001305949 Independent Escort Service NashikCall Girls Nashik Gayatri 7001305949 Independent Escort Service Nashik
Call Girls Nashik Gayatri 7001305949 Independent Escort Service NashikCall Girls in Nagpur High Profile
 
↑Top Model (Kolkata) Call Girls Howrah ⟟ 8250192130 ⟟ High Class Call Girl In...
↑Top Model (Kolkata) Call Girls Howrah ⟟ 8250192130 ⟟ High Class Call Girl In...↑Top Model (Kolkata) Call Girls Howrah ⟟ 8250192130 ⟟ High Class Call Girl In...
↑Top Model (Kolkata) Call Girls Howrah ⟟ 8250192130 ⟟ High Class Call Girl In...noor ahmed
 
Nayabad Call Girls ✔ 8005736733 ✔ Hot Model With Sexy Bhabi Ready For Sex At ...
Nayabad Call Girls ✔ 8005736733 ✔ Hot Model With Sexy Bhabi Ready For Sex At ...Nayabad Call Girls ✔ 8005736733 ✔ Hot Model With Sexy Bhabi Ready For Sex At ...
Nayabad Call Girls ✔ 8005736733 ✔ Hot Model With Sexy Bhabi Ready For Sex At ...aamir
 
Beautiful 😋 Call girls in Lahore 03210033448
Beautiful 😋 Call girls in Lahore 03210033448Beautiful 😋 Call girls in Lahore 03210033448
Beautiful 😋 Call girls in Lahore 03210033448ont65320
 
Independent Hatiara Escorts ✔ 8250192130 ✔ Full Night With Room Online Bookin...
Independent Hatiara Escorts ✔ 8250192130 ✔ Full Night With Room Online Bookin...Independent Hatiara Escorts ✔ 8250192130 ✔ Full Night With Room Online Bookin...
Independent Hatiara Escorts ✔ 8250192130 ✔ Full Night With Room Online Bookin...Riya Pathan
 
Contact:- 8860008073 Call Girls in Karnal Escort Service Available at Afforda...
Contact:- 8860008073 Call Girls in Karnal Escort Service Available at Afforda...Contact:- 8860008073 Call Girls in Karnal Escort Service Available at Afforda...
Contact:- 8860008073 Call Girls in Karnal Escort Service Available at Afforda...Apsara Of India
 
Call Girl Nagpur Roshni Call 7001035870 Meet With Nagpur Escorts
Call Girl Nagpur Roshni Call 7001035870 Meet With Nagpur EscortsCall Girl Nagpur Roshni Call 7001035870 Meet With Nagpur Escorts
Call Girl Nagpur Roshni Call 7001035870 Meet With Nagpur EscortsCall Girls in Nagpur High Profile
 
Verified Call Girls Esplanade - [ Cash on Delivery ] Contact 8250192130 Escor...
Verified Call Girls Esplanade - [ Cash on Delivery ] Contact 8250192130 Escor...Verified Call Girls Esplanade - [ Cash on Delivery ] Contact 8250192130 Escor...
Verified Call Girls Esplanade - [ Cash on Delivery ] Contact 8250192130 Escor...anamikaraghav4
 
VIP Call Girls Darjeeling Aaradhya 8250192130 Independent Escort Service Darj...
VIP Call Girls Darjeeling Aaradhya 8250192130 Independent Escort Service Darj...VIP Call Girls Darjeeling Aaradhya 8250192130 Independent Escort Service Darj...
VIP Call Girls Darjeeling Aaradhya 8250192130 Independent Escort Service Darj...Neha Kaur
 
Russian Call Girl South End Park - Call 8250192130 Rs-3500 with A/C Room Cash...
Russian Call Girl South End Park - Call 8250192130 Rs-3500 with A/C Room Cash...Russian Call Girl South End Park - Call 8250192130 Rs-3500 with A/C Room Cash...
Russian Call Girl South End Park - Call 8250192130 Rs-3500 with A/C Room Cash...anamikaraghav4
 
Independent Joka Escorts ✔ 8250192130 ✔ Full Night With Room Online Booking 2...
Independent Joka Escorts ✔ 8250192130 ✔ Full Night With Room Online Booking 2...Independent Joka Escorts ✔ 8250192130 ✔ Full Night With Room Online Booking 2...
Independent Joka Escorts ✔ 8250192130 ✔ Full Night With Room Online Booking 2...noor ahmed
 
Beyond Bar & Club Udaipur CaLL GiRLS 09602870969
Beyond Bar & Club Udaipur CaLL GiRLS 09602870969Beyond Bar & Club Udaipur CaLL GiRLS 09602870969
Beyond Bar & Club Udaipur CaLL GiRLS 09602870969Apsara Of India
 
Jinx Manga-Season 1 - Chapters Summary.docx
Jinx Manga-Season 1 - Chapters Summary.docxJinx Manga-Season 1 - Chapters Summary.docx
Jinx Manga-Season 1 - Chapters Summary.docxJinx Manga
 
VIP Call Girls Service Banjara Hills Hyderabad Call +91-8250192130
VIP Call Girls Service Banjara Hills Hyderabad Call +91-8250192130VIP Call Girls Service Banjara Hills Hyderabad Call +91-8250192130
VIP Call Girls Service Banjara Hills Hyderabad Call +91-8250192130Suhani Kapoor
 

Kürzlich hochgeladen (20)

VIP Call Girls Sonagachi - 8250192130 Escorts Service 50% Off with Cash ON De...
VIP Call Girls Sonagachi - 8250192130 Escorts Service 50% Off with Cash ON De...VIP Call Girls Sonagachi - 8250192130 Escorts Service 50% Off with Cash ON De...
VIP Call Girls Sonagachi - 8250192130 Escorts Service 50% Off with Cash ON De...
 
(KRITI) Pimpri Chinchwad Call Girls Just Call 7001035870 [ Cash on Delivery ]...
(KRITI) Pimpri Chinchwad Call Girls Just Call 7001035870 [ Cash on Delivery ]...(KRITI) Pimpri Chinchwad Call Girls Just Call 7001035870 [ Cash on Delivery ]...
(KRITI) Pimpri Chinchwad Call Girls Just Call 7001035870 [ Cash on Delivery ]...
 
VIP Call Girl Kolhapur Aashi 8250192130 Independent Escort Service Kolhapur
VIP Call Girl Kolhapur Aashi 8250192130 Independent Escort Service KolhapurVIP Call Girl Kolhapur Aashi 8250192130 Independent Escort Service Kolhapur
VIP Call Girl Kolhapur Aashi 8250192130 Independent Escort Service Kolhapur
 
Call Girls Service Bantala - Call 8250192130 Rs-3500 with A/C Room Cash on De...
Call Girls Service Bantala - Call 8250192130 Rs-3500 with A/C Room Cash on De...Call Girls Service Bantala - Call 8250192130 Rs-3500 with A/C Room Cash on De...
Call Girls Service Bantala - Call 8250192130 Rs-3500 with A/C Room Cash on De...
 
Call Girls Nashik Gayatri 7001305949 Independent Escort Service Nashik
Call Girls Nashik Gayatri 7001305949 Independent Escort Service NashikCall Girls Nashik Gayatri 7001305949 Independent Escort Service Nashik
Call Girls Nashik Gayatri 7001305949 Independent Escort Service Nashik
 
↑Top Model (Kolkata) Call Girls Howrah ⟟ 8250192130 ⟟ High Class Call Girl In...
↑Top Model (Kolkata) Call Girls Howrah ⟟ 8250192130 ⟟ High Class Call Girl In...↑Top Model (Kolkata) Call Girls Howrah ⟟ 8250192130 ⟟ High Class Call Girl In...
↑Top Model (Kolkata) Call Girls Howrah ⟟ 8250192130 ⟟ High Class Call Girl In...
 
Nayabad Call Girls ✔ 8005736733 ✔ Hot Model With Sexy Bhabi Ready For Sex At ...
Nayabad Call Girls ✔ 8005736733 ✔ Hot Model With Sexy Bhabi Ready For Sex At ...Nayabad Call Girls ✔ 8005736733 ✔ Hot Model With Sexy Bhabi Ready For Sex At ...
Nayabad Call Girls ✔ 8005736733 ✔ Hot Model With Sexy Bhabi Ready For Sex At ...
 
Beautiful 😋 Call girls in Lahore 03210033448
Beautiful 😋 Call girls in Lahore 03210033448Beautiful 😋 Call girls in Lahore 03210033448
Beautiful 😋 Call girls in Lahore 03210033448
 
CHEAP Call Girls in Malviya Nagar, (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE
CHEAP Call Girls in  Malviya Nagar, (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICECHEAP Call Girls in  Malviya Nagar, (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE
CHEAP Call Girls in Malviya Nagar, (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE
 
Independent Hatiara Escorts ✔ 8250192130 ✔ Full Night With Room Online Bookin...
Independent Hatiara Escorts ✔ 8250192130 ✔ Full Night With Room Online Bookin...Independent Hatiara Escorts ✔ 8250192130 ✔ Full Night With Room Online Bookin...
Independent Hatiara Escorts ✔ 8250192130 ✔ Full Night With Room Online Bookin...
 
Contact:- 8860008073 Call Girls in Karnal Escort Service Available at Afforda...
Contact:- 8860008073 Call Girls in Karnal Escort Service Available at Afforda...Contact:- 8860008073 Call Girls in Karnal Escort Service Available at Afforda...
Contact:- 8860008073 Call Girls in Karnal Escort Service Available at Afforda...
 
Call Girls South Avenue Delhi WhatsApp Number 9711199171
Call Girls South Avenue Delhi WhatsApp Number 9711199171Call Girls South Avenue Delhi WhatsApp Number 9711199171
Call Girls South Avenue Delhi WhatsApp Number 9711199171
 
Call Girl Nagpur Roshni Call 7001035870 Meet With Nagpur Escorts
Call Girl Nagpur Roshni Call 7001035870 Meet With Nagpur EscortsCall Girl Nagpur Roshni Call 7001035870 Meet With Nagpur Escorts
Call Girl Nagpur Roshni Call 7001035870 Meet With Nagpur Escorts
 
Verified Call Girls Esplanade - [ Cash on Delivery ] Contact 8250192130 Escor...
Verified Call Girls Esplanade - [ Cash on Delivery ] Contact 8250192130 Escor...Verified Call Girls Esplanade - [ Cash on Delivery ] Contact 8250192130 Escor...
Verified Call Girls Esplanade - [ Cash on Delivery ] Contact 8250192130 Escor...
 
VIP Call Girls Darjeeling Aaradhya 8250192130 Independent Escort Service Darj...
VIP Call Girls Darjeeling Aaradhya 8250192130 Independent Escort Service Darj...VIP Call Girls Darjeeling Aaradhya 8250192130 Independent Escort Service Darj...
VIP Call Girls Darjeeling Aaradhya 8250192130 Independent Escort Service Darj...
 
Russian Call Girl South End Park - Call 8250192130 Rs-3500 with A/C Room Cash...
Russian Call Girl South End Park - Call 8250192130 Rs-3500 with A/C Room Cash...Russian Call Girl South End Park - Call 8250192130 Rs-3500 with A/C Room Cash...
Russian Call Girl South End Park - Call 8250192130 Rs-3500 with A/C Room Cash...
 
Independent Joka Escorts ✔ 8250192130 ✔ Full Night With Room Online Booking 2...
Independent Joka Escorts ✔ 8250192130 ✔ Full Night With Room Online Booking 2...Independent Joka Escorts ✔ 8250192130 ✔ Full Night With Room Online Booking 2...
Independent Joka Escorts ✔ 8250192130 ✔ Full Night With Room Online Booking 2...
 
Beyond Bar & Club Udaipur CaLL GiRLS 09602870969
Beyond Bar & Club Udaipur CaLL GiRLS 09602870969Beyond Bar & Club Udaipur CaLL GiRLS 09602870969
Beyond Bar & Club Udaipur CaLL GiRLS 09602870969
 
Jinx Manga-Season 1 - Chapters Summary.docx
Jinx Manga-Season 1 - Chapters Summary.docxJinx Manga-Season 1 - Chapters Summary.docx
Jinx Manga-Season 1 - Chapters Summary.docx
 
VIP Call Girls Service Banjara Hills Hyderabad Call +91-8250192130
VIP Call Girls Service Banjara Hills Hyderabad Call +91-8250192130VIP Call Girls Service Banjara Hills Hyderabad Call +91-8250192130
VIP Call Girls Service Banjara Hills Hyderabad Call +91-8250192130
 

Top10 tips to get started with html5 games

  • 1.
  • 4. Zlong HTML5 games Castle Solitaire Blocker Mover Bubble Hit More details: http://m.agame.com
  • 5. Tip 1 Desktop & Mobile Choose <Canvas> for games Canvas + Widely supported + No compatibility problems CSS + nice effects via CSS 3D, iphone only - Compatibility problems on CSS - Crash on iOS - Flickering on Android
  • 6.
  • 7. Mobile: only one Music can be played at the same timeDesktop & Mobile
  • 8.
  • 9. Desktop : Mouse events (e.g. onmouseup)
  • 10. Mobile : Touch events (e.g. ontouchstart)
  • 11. Note: multi-touch events supported by iOS only
  • 12. For more details: visit http://developer.apple.com/devcenter/safari/index.actionMobile
  • 13.
  • 14. Tip 5 Mobile Match button size on Mobile to finger 40 pixels is recommended for Mobile
  • 15. Tip 6 Mobile setTimeout instead of setIntervalfor game loop setInterval: DOM may not be refresh on Android
  • 16.
  • 17. Do not create large amounts of multiple Canvases. Canvas is more memory hungry than image.
  • 18. Remove the image from memory by resetting the attribute "src":img.src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQIHWNgAAIAAAUAAY27m/MAAAAASUVORK5CYII="; Mobile
  • 19.
  • 21.
  • 22. JSMin: only reduces sizeDesktop & Mobile
  • 23.
  • 24.
  • 25. Getting started DIVE INTO HTML5: http://diveintohtml5.org/ Safari Reference Library: http://developer.apple.com/library/safari/navigation/ https://developer.mozilla.org/en/HTML/HTML5 http://m.agame.com/