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 10 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
 
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
 
Case Studies in Mobile Board Game Conversion
Case Studies in Mobile Board Game ConversionCase Studies in Mobile Board Game Conversion
Case Studies in Mobile Board Game ConversionMartin Grider
 

Ähnlich wie 10 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
 
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
 
Case Studies in Mobile Board Game Conversion
Case Studies in Mobile Board Game ConversionCase Studies in Mobile Board Game Conversion
Case Studies in Mobile Board Game Conversion
 
Mobile games portfolio
Mobile games portfolio Mobile games portfolio
Mobile games portfolio
 

Kürzlich hochgeladen

Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfGen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfAddepto
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek SchlawackFwdays
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebUiPathCommunity
 
Training state-of-the-art general text embedding
Training state-of-the-art general text embeddingTraining state-of-the-art general text embedding
Training state-of-the-art general text embeddingZilliz
 
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteTake control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteDianaGray10
 
unit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptxunit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptxBkGupta21
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024Stephanie Beckett
 
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024BookNet Canada
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 3652toLead Limited
 
DSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningDSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningLars Bell
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxLoriGlavin3
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxLoriGlavin3
 
Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxArtificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxhariprasad279825
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfMoving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfLoriGlavin3
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxLoriGlavin3
 
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxDigital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxLoriGlavin3
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc
 
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxPasskey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxLoriGlavin3
 
A Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software DevelopersA Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software DevelopersNicole Novielli
 

Kürzlich hochgeladen (20)

Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfGen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdf
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio Web
 
Training state-of-the-art general text embedding
Training state-of-the-art general text embeddingTraining state-of-the-art general text embedding
Training state-of-the-art general text embedding
 
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteTake control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test Suite
 
unit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptxunit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptx
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024
 
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365
 
DSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningDSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine Tuning
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
 
Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxArtificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptx
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfMoving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdf
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
 
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxDigital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
 
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxPasskey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
 
A Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software DevelopersA Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software Developers
 

10 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/