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

TiCalabash: Fully automated Acceptance Testing @ TiConf EU 2014Andrew McElroy

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

Beginning Android Flash DevelopmentStephen Chin

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

TiCalabash: Fully automated Acceptance Testing @ TiConf EU 2014

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

Beginning Android Flash Development

Recently uploaded

Take control of your SAP testing with UiPath Test SuiteDianaGray10

The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxLoriGlavin3

How to write a Business Continuity PlanDatabarracks

TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc

TeamStation AI System Report LATAM IT Salaries 2024Lonnie McRorey

Digital Identity is Under Attack: FIDO Paris Seminar.pptxLoriGlavin3

Rise of the Machines: Known As Drones...Rick Flair

Potential of AI (Generative AI) in Business: Learnings and InsightsRavi Sanghani

So einfach geht modernes Roaming fuer Notes und Nomad.pdfpanagenda

The State of Passkeys with FIDO Alliance.pptxLoriGlavin3

The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...Wes McKinney

Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024BookNet Canada

Sample pptx for embedding into website for demoHarshalMandlekar2

UiPath Community: Communication Mining from Zero to HeroUiPathCommunity

What is DBT - The Ultimate Data Build Tool.pdfMounikaPolabathina

Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxLoriGlavin3

Moving Beyond Passwords: FIDO Paris Seminar.pdfLoriGlavin3

From Family Reminiscence to Scholarly Archive .Alan Dix

New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024BookNet Canada

Time Series Foundation Models - current state and future directionsNathaniel Shimoni

Recently uploaded (20)

Take control of your SAP testing with UiPath Test Suite

The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx

How to write a Business Continuity Plan

TrustArc Webinar - How to Build Consumer Trust Through Data Privacy

TeamStation AI System Report LATAM IT Salaries 2024

Digital Identity is Under Attack: FIDO Paris Seminar.pptx

Rise of the Machines: Known As Drones...

Potential of AI (Generative AI) in Business: Learnings and Insights

So einfach geht modernes Roaming fuer Notes und Nomad.pdf

The State of Passkeys with FIDO Alliance.pptx

The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...

Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024

Sample pptx for embedding into website for demo

UiPath Community: Communication Mining from Zero to Hero

What is DBT - The Ultimate Data Build Tool.pdf

Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx

Moving Beyond Passwords: FIDO Paris Seminar.pdf

From Family Reminiscence to Scholarly Archive .

New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024

Time Series Foundation Models - current state and future directions

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