SlideShare una empresa de Scribd logo
1 de 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

Más contenido relacionado

Similar a 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
 

Similar a 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
 

Último

"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
 
Advanced Computer Architecture – An Introduction
Advanced Computer Architecture – An IntroductionAdvanced Computer Architecture – An Introduction
Advanced Computer Architecture – An IntroductionDilum Bandara
 
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Scott Keck-Warren
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Manik S Magar
 
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsPixlogix Infotech
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Mark Simos
 
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks..."LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...Fwdays
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLScyllaDB
 
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsRizwan Syed
 
Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdf
Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdfHyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdf
Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdfPrecisely
 
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
 
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
 
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubUnleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubKalema Edgar
 
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .Alan Dix
 
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
 
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
 
Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsVertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsMiki Katsuragi
 
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage CostLeverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage CostZilliz
 
Search Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdfSearch Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdfRankYa
 

Último (20)

"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
 
Advanced Computer Architecture – An Introduction
Advanced Computer Architecture – An IntroductionAdvanced Computer Architecture – An Introduction
Advanced Computer Architecture – An Introduction
 
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!
 
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and Cons
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
 
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks..."LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQL
 
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL Certs
 
Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdf
Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdfHyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdf
Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdf
 
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
 
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
 
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptxE-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
 
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubUnleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding Club
 
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .
 
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
 
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
 
Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsVertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering Tips
 
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage CostLeverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
 
Search Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdfSearch Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdf
 

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/