10 tips to get started with html5 games

•Download as PPTX, PDF•

14 likes•9,383 views

Gregory Kukolj

Technology

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]

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

Similar to 10 tips to get started with html5 games

Mdc2010 Casual Game Devmomobangalore

Google glassPrasad Kale

Bringing HTML5 Video to Mobile DevicesBrian Crescimanno

13 types of interfaceLucy Taylor

Zte skate smartphone is a gentle giantmodem3g

Real Benefits of HTML5 for Games (MS Campfire, 2012)Juha Paananen

Moto%20 x%20projectgeneralvee

Android and android phonesu917

Galaxy grabDuane

Wojciech Pater - selected worksWojciech Pater

Shop for best smartphones 2020Rajib Mukherjee

Going Mobile - Flash Gaming Summit 2012Nate Beck

Facebook developer Garage, Colm Doyle, FacebookAnna-Marie Taylor

Samsung Galaxy S - Sydney Mobile User Group (August 2010)Neerav Bhatt

Affinity Talk2008martinip

Brass Monkey Couch MultiplayerFrancois Laberge

Android for beginners: Tips and tricks for your new smartphoneDharmendra Rama

inphonereeece

Case Studies in Mobile Board Game ConversionMartin Grider

Mobile games portfolio Charles D'souza

Similar to 10 tips to get started with html5 games (20)

Mdc2010 Casual Game Dev

Google glass

Bringing HTML5 Video to Mobile Devices

13 types of interface

Zte skate smartphone is a gentle giant

Real Benefits of HTML5 for Games (MS Campfire, 2012)

Moto%20 x%20project

Android and android phones

Galaxy grab

Wojciech Pater - selected works

Shop for best smartphones 2020

Going Mobile - Flash Gaming Summit 2012

Facebook developer Garage, Colm Doyle, Facebook

Samsung Galaxy S - Sydney Mobile User Group (August 2010)

Affinity Talk2008

Brass Monkey Couch Multiplayer

Android for beginners: Tips and tricks for your new smartphone

inphone

Case Studies in Mobile Board Game Conversion

Mobile games portfolio

Recently uploaded

Vertex AI Gemini Prompt Engineering TipsMiki Katsuragi

Human Factors of XR: Using Human Factors to Design XR SystemsMark Billinghurst

Powerpoint exploring the locations used in television show Time Clashcharlottematthew16

APIForce Zurich 5 April Automation LPDGMarianaLemus7

"ML in Production",Oleksandr BaganFwdays

SAP Build Work Zone - Overview L2-L3.pptxNavinnSomaal

SQL Database Design For Developers at php[tek] 2024Scott Keck-Warren

Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...shyamraj55

Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Mark Simos

Gen AI in Business - Global Trends Report 2024.pdfAddepto

DevEX - reference for building teams, processes, and platformsSergiu Bodiu

Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationSafe Software

Unraveling Multimodality with Large Language Models.pdfAlex Barbosa Coqueiro

Pigging Solutions in Pet Food ManufacturingPigging Solutions

Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticscarlostorres15106

E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptxnull - The Open Security Community

Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 3652toLead Limited

Dev Dives: Streamline document processing with UiPath Studio WebUiPathCommunity

Developer Data Modeling Mistakes: From Postgres to NoSQLScyllaDB

Commit 2024 - Secret Management made easyAlfredo García Lavilla

Recently uploaded (20)

Vertex AI Gemini Prompt Engineering Tips

Human Factors of XR: Using Human Factors to Design XR Systems

Powerpoint exploring the locations used in television show Time Clash

APIForce Zurich 5 April Automation LPDG

"ML in Production",Oleksandr Bagan

SAP Build Work Zone - Overview L2-L3.pptx

SQL Database Design For Developers at php[tek] 2024

Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...

Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)

Gen AI in Business - Global Trends Report 2024.pdf

DevEX - reference for building teams, processes, and platforms

Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation

Unraveling Multimodality with Large Language Models.pdf

Pigging Solutions in Pet Food Manufacturing

Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics

E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx

Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365

Dev Dives: Streamline document processing with UiPath Studio Web

Developer Data Modeling Mistakes: From Postgres to NoSQL

Commit 2024 - Secret Management made easy

10 tips to get started with html5 games

2. YU JIANRONG Zlonggames

3. 10 HTML5 Tips

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

7. Mobile: only one Music can be played at the same timeDesktop & Mobile

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.

20. More details: http://dev.w3.org/html5/webstorage/Desktop & Mobile

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/

10 tips to get started with html5 games

Recommended

Recommended

More Related Content

Similar to 10 tips to get started with html5 games

Similar to 10 tips to get started with html5 games (20)

Recently uploaded

Recently uploaded (20)

10 tips to get started with html5 games