10 tips to get started with html5 games

Oct 9, 2010Download as PPTX, PDF14 likes9,388 views

This document provides 10 tips for developing HTML5 games for both desktop and mobile platforms. Some key points covered include using the <canvas> tag for games, touch events for mobile, dirty rectangles to improve framerate on mobile, matching button sizes to fingers, using localStorage to save game data, and tools for debugging mobile games. More details on these techniques and HTML5 game development can be found at the listed web addresses.

Zlong HTML5 gamesCastle SolitaireBlocker MoverBubble HitMore details: http://m.agame.com

Tip 1 Desktop & MobileChoose <Canvas> for gamesCanvas+ Widely supported + No compatibility problemsCSS + nice effects via CSS 3D, iphone only - Compatibility problems on CSS - Crash on iOS - Flickering on Android

Tip 2 Use <audio> tag for Background MusicAudio support is very limited

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

Tip 3 Use touch events for MobileMouse events works different on Mobile

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 MobileUse Dirty Rectangles for Canvas to improve framerateBetter performanceExample of game Bubble Hit

Tip 5 MobileMatch button size on Mobile to finger40 pixels is recommended for Mobile

Tip 6MobilesetTimeout instead of setIntervalfor game loopsetInterval: DOM may not be refresh on Android

This document contains a presentation by Łukasz Przywarty about new ways of human-computer interaction beyond keyboards and mice. It discusses emerging technologies like Leap Motion, Erghis Sphere, Nod, Nymi, Android Wear, Thumbles, Aireal, Touche, DrumPants, and Ishin-Den-Shin that enable touchless interaction. It also covers heuristics and hopes and worries regarding natural user interfaces (NUIs) that aim to make interaction more intuitive and physical.

Evolution in memory gamesDEVART

��

Strategy for Successful Mobile Game developmentGreedyGame

��

The document provides tips for successful mobile game development. It discusses the importance of including an interesting storyline to engage users (Tip 1). It recommends 2D games for beginners due to lower costs, while more experienced developers could transition to 3D games (Tip 2). Finally, it stresses the importance of a well-designed user interface that is intuitive and allows easy gameplay, providing steps like referencing other games, considering device resolutions, flowcharting, keeping it simple, and testing (Tip 3).

HOW YOU CAN MAKE Your Own Video Game gamerpiu

��

Mdc2010 Casual Game Devmomobangalore

��

Casual games are growing rapidly on mobile platforms. They target mass audiences with simple gameplay that can be enjoyed in short bursts without long-term commitment. Developing casual games for the wide range of mobile devices is challenging due to variations in hardware specifications, platforms, and user preferences. Good game design, testing across platforms, and commercialization strategies are keys to success in the mobile casual games market.

Google glassPrasad Kale

��

Bringing HTML5 Video to Mobile DevicesBrian Crescimanno

��

The document discusses the challenges of building HTML5 video players that work across mobile devices. It outlines how Brightcove overcame gaps in capabilities by developing "Smart Players" that detect devices and deliver the best possible experience. However, implementation of HTML5 video has many inconsistencies across platforms that require workarounds, such as iOS not supporting volume control or the PROGRESS event. The document urges viewing these challenges as an opportunity for creative engineering solutions on the "bleeding edge" of technology.

13 types of interfaceLucy Taylor

��

The document discusses different types of interfaces for games, including browser-based games. It provides examples of browser games like Club Penguin that are designed for different audiences. The document also discusses differences between browser games, mobile games, PC games, and console games. Key differences include controls, graphics, complexity, social aspects, and whether they require an internet connection. The document emphasizes that good game navigation and screen layout are important for player experience. Elements like font, text size, image size, color palette, and use of frames and tables can impact whether a game feels organized and readable.

Zte skate smartphone is a gentle giantmodem3g

��

- The ZTE Skate has a large 4.3 inch screen, making it suitable for viewing photos, videos, and games. However, its processor is only average in performance and will not set any records. - It runs Android 2.3 (Gingerbread) without any customizations. The camera and battery life are adequate for basic use but not for advanced tasks. - While not powerful, the ZTE Skate provides a low-cost option for those wanting a larger screen Android smartphone without spending a lot of money.

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

��

The document discusses the benefits of HTML5 games. It begins with an introduction to the speaker and his company, which focuses on HTML5 games. It then discusses the state of HTML5 games, noting that many were built to demo the technology rather than for actual gameplay. The main benefits outlined are writing code once to run on multiple platforms, the ability for everyone with a modern browser to play, and the ability to easily share games through links. The document also discusses lessons learned from developing the game Dollar Isle in HTML5, such as how to design for both mobile and desktop. It predicts continued improvements to mobile browsers and distribution of HTML5 games.

Moto%20 x%20projectgeneralvee

��

The Moto X has several convenient features such as Quick Capture for easy photo taking, Active Display for discreet notifications, and touchless control using voice commands with "OK Google Now". It has a 10MP rear camera and 2.1MP front camera. Customization is possible through Moto Maker. The phone provides detailed information to questions but battery life and low-light photos could be improved. Overall the reviewer enjoyed the phone's hands-free features and recommended it as a good mid-range Android option.

Android and android phonesu917

��

This document provides information about Android phones. It summarizes several Android phone models including the HTC Butterfly with a 5-inch 1080p display, 8MP camera, and quad-core processor; the Huawei Ascend P1 with a 4.3-inch screen, 8MP camera, and dual-core processor; the Samsung Galaxy Note II with a 5.5-inch screen, 8MP camera, and quad-core processor; and the Samsung Galaxy S3 with a 4.8-inch screen, 8MP camera, and quad-core processor. It also briefly describes the Samsung Galaxy Mini 2 and HTC Desire C.

Galaxy grabDuane

��

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

��

Acceptance testing has become a crucial step of software development, but it has been a noticeably missing piece of the Titanium mobile application development puzzle. TiCalabash is a new tool, developed specifically for Titanium to bring mobile development a significant step forward in reducing time and resource risk and increasing user acceptance and overall quality of development. Fully automated, using human-readable language, and offering full end-to-end acceptance testing, TiCalabash should be a major part of your mobile development toolbox.

Wojciech Pater - selected worksWojciech Pater

��

The document provides information about various games, apps, animations, artworks and design projects. It includes descriptions of elements like environments, characters, UI/UX, logos, icons, animations and gameplay for several mobile and desktop games. It also outlines features for music apps and includes links to videos and app store listings. Additionally, it showcases logos, digital artworks, oil paintings, illustrations and website designs created by the artist.

Shop for best smartphones 2020Rajib Mukherjee

��

Going Mobile - Flash Gaming Summit 2012Nate Beck

��

This document discusses developing mobile applications using Adobe AIR, including tools like ADL, ADT, and PFI. It covers targeting different mobile platforms like iOS and Android, and considerations for each like screen densities, gestures, and device capabilities. Testing on actual devices is recommended over emulators. Stage3D API support is now available in AIR for 3D graphics. Frameworks can help with development. Piracy and interruptions are issues to watch for on mobile.

Facebook developer Garage, Colm Doyle, FacebookAnna-Marie Taylor

��

This document discusses the power of social features for websites and apps. It notes that the popular game CityVille launched in 2010 gained 100 million users through social features. It encourages developers to design their products socially from the start by integrating features like social sharing and friend connections. The document promotes Facebook developer resources and notes that the number of open bugs on their developer support site has decreased significantly over the past year.

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

��

Affinity Talk2008martinip

��

The document outlines 10 reasons why mobile games are popular. It states that mobile games can be played anywhere, are designed for short sessions, have a low cost of purchase and development, and benefit from new opportunities on convergent mobile devices. The managing director of Affinity Studios, which has developed over 30 mobile games and apps, believes these factors contribute to the success of the mobile gaming industry.

Brass Monkey Couch MultiplayerFrancois Laberge

��

Francois Laberge is the cofounder of Brass Monkey, a company developing a mobile app called Emotely that turns phones and tablets into wireless controllers. Emotely allows for classic couch multiplayer gaming by enabling phones and tablets to control games running in a browser from the comfort of the couch without any installation required on PCs. The Emotely SDK also makes it easy for developers to add multiplayer capabilities and innovative input methods to their own games.

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

��

inphonereeece

��

The document summarizes the key features of several mobile devices: 1) The Samsung Galaxy S4 Mini allows for control with eye movements and gestures, dual camera photos and videos, and app previews without touching the screen. 2) The BlackBerry 9720 has a touchscreen and keyboard, social sharing features, and 4G connectivity. 3) The iPad Mini is a 7.9 inch tablet for portable home entertainment with a 1024x768 display, fingerprint resistance, and iOS 6.

Beginning Android Flash DevelopmentStephen Chin

��

Cloudflare’s Game-Changing Move The First Remote MCP Server for AI Agent Deve...davidandersonofficia

��

Recruiting Tech: A Look at Why AI is Actually OGMatt Charney

��

More Related Content

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

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

��

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

��

Recently uploaded (20)

Cloudflare’s Game-Changing Move The First Remote MCP Server for AI Agent Deve...davidandersonofficia

��

Recruiting Tech: A Look at Why AI is Actually OGMatt Charney

��

Introduction to Generative AI refers to a subset of artificial intelligenceKongu Engineering College, Perundurai, Erode

��

AI Breakthroughs and Innovations-What’s Next.docxAIvolut

��

Artificial intelligence is evolving rapidly, bringing groundbreaking innovations across industries. From advanced AI tools enhancing automation to new applications in healthcare and finance, the future of AI promises transformative changes. This document explores the latest breakthroughs, the impact of AI tools, and what’s next for the industry. Stay ahead of the curve by understanding emerging AI trends and how they shape our world.

Ricardo Jebb Bruno - A Structural CAD TechnicianRicardo Jebb Bruno

��

Ricardo Jebb Bruno is a skilled Structural CAD Technician with over 10 years of experience. He specializes in structural analysis, design, and project management, and is proficient in AutoCAD, Revit, and SolidWorks. A graduate of the University of Miami with a degree in Civil Engineering, he currently works at Metrix Structural Group. Ricardo is a member of the American Society of Civil Engineers and the National CAD Society, and volunteers with Habitat for Humanity. His hobbies include 3D printing and sci-fi media.

Q1 FY26 TUG Leader Quarterly Call - APAC / EMEAlward7

��

Threat Modeling a Batch Job System - AWS Security Community DayTeri Radichel

��

I've been working on building a batch job framework for a few years now and blogging about it in the process. This presentation explains how and why I started building and writing about this system and the reason it changed from deploying one simple batch job to a much bigger project. I explore a number of recent data breaches, how they occurred, and what may have prevented them along the way. We consider how what make goes into an effective security architecture and well-designed security controls that avoid common pitfalls. There are friend links to many blog posts in the notes of the presentation that bypass the paywall. Topics include security architecture, IAM, encryption (KMS), networking, MFA, source control, separation of duties, supply chain attacks, and more.

All-Data, Any-AI Integration: FME & Amazon Bedrock in the Real-WorldSafe Software

��

Join us for an exclusive webinar featuring special guest speakers from Amazon, Amberside Energy, and Avineon-Tensing as we explore the power of Amazon Bedrock and FME in AI-driven geospatial workflows. Discover how Avineon-Tensing is using AWS Bedrock to support Amberside Energy in automating image classification and streamlining site reporting. By integrating Bedrock’s generative AI capabilities with FME, image processing and categorization become faster and more efficient, ensuring accurate and organized filing of site imagery. Learn how this approach reduces manual effort, standardizes reporting, and leverages AWS’s secure AI tooling to optimize their workflows. If you’re looking to enhance geospatial workflows with AI, automate image processing, or simply explore the potential of FME and Bedrock, this webinar is for you!

APAC Solutions Challenge Info Session.pdfGDG on Campus Monash

��

HHUG-04-2025-Close-more-deals-from-your-existing-pipeline-FOR SLIDESHARE.pptxHampshireHUG

��

Struggling to get real value from HubSpot Sales Hub? Learn 5 mighty methods to close more deals without more leads or headcount (even on Starter subscriptions)! These slides accompanied a webinar run by Hampshire's HubSpot User Group (HUG) on 2nd April, 2025. HubSpot subscribers can watch the recording here: https://events.hubspot.com/events/details/hubspot-hampshire-presents-5-ways-to-close-more-deals-from-your-existing-sales-pipeline/ ABOUT THE EVENT: Unlock hidden revenue in your CRM with our practical HubSpot tactics Are you struggling to get real value from your HubSpot Sales Hub? If your HubSpot feels like more of an admin burden than a revenue enabler, you’re not alone. Many sales leaders find that their team isn't updating records consistently, pipeline visibility is poor, and reporting doesn’t deliver the insights they need to drive strategy. The good news? You don’t need to upgrade your HubSpot subscription to sort these issues. Join us for this webinar to learn 5 mighty tactics that will help you streamline your sales process, improve pipeline visibility, and extract more revenue from your existing pipeline, without spending more on marketing or hiring extra sales reps. What You’ll Learn ✅ Customising Records – Increase sales momentum with more useful CRM data for your salespeople ✅ Pipeline Rules – Improve deal stage consistency and data accuracy for improved prioritisation and forecasting ✅ Team Permissions & Defaults – Control access and streamline processes. Spend more time selling, less on admin ✅ Pipeline View Customisation – Get clearer sales insights, faster, to deal with revenue leaks ✅ Simple Sales Reports – Build actionable dashboards to drive strategy with data 💡 Bonus: Successful Sales Hub users will share their experiences and the revenue impact it has delivered for them. Who is this webinar for? Sales leaders using HubSpot Sales Hub Starter, or those new to HubSpot Sales managers who need better CRM adoption from their team Anyone struggling with pipeline visibility, reporting, or forecasting Teams who want to close more deals without extra sales headcount

Meet CrewAI The Framework Powering Agentic AI (2).pdf Yodaplus Technologies Private Limited

��

Agentic AI is the future — but building intelligent systems where AI agents collaborate effectively? That’s where CrewAI steps in. In this presentation, we introduce CrewAI, an open-source framework that brings role-based architecture and real-time communication to AI agents. From equity research bots to agentic DevOps pipelines, discover how CrewAI enables coordinated, goal-driven execution across multiple agents. Learn about CrewAI’s building blocks, its unique features like Agent-to-Agent Protocols (A2AP), and how Yodaplus is leveraging it in real-world BFSI and supply chain solutions using GenAI tools like GenRPT and DataClip. Whether you’re exploring agent ecosystems or hands-on implementation, this deck is your quick guide to the emerging world of Agentic AI frameworks.

Top Tips to Get Your Data AI-Ready‎ ‎ ‎‎ ‎Precisely

��

Commit Conf 2025 Bitnami Charts with KubescapeAlfredo García Lavilla

��

En esta charla compartiremos la experiencia del equipo de Bitnami en la mejora de la seguridad de nuestros Helm Charts y Contenedores utilizando Kubescape como herramienta principal de validación. Exploraremos el proceso completo, desde la identificación de necesidades hasta la implementación de validaciones automatizadas, incluyendo la creación de herramientas para la comunidad. Compartiremos nuestra experiencia en la implementación de mejoras de seguridad en Charts y Contenedores, basándonos en las mejores prácticas del mercado y utilizando Kubescape como herramienta de validación. Explicaremos cómo automatizamos estas validaciones integrándolas en nuestro ciclo de vida de desarrollo, mejorando significativamente la seguridad de nuestros productos mientras manteníamos la eficiencia operativa. Durante la charla, los asistentes aprenderán cómo implementar más de 60 validaciones de seguridad críticas, incluyendo la configuración segura de contenedores en modo no privilegiado, la aplicación de buenas prácticas en recursos de Kubernetes, y cómo garantizar la compatibilidad con plataformas como OpenShift. Además, demostraremos una herramienta de self-assessment que desarrollamos para que cualquier usuario pueda evaluar y mejorar la seguridad de sus propios Charts basándose en esta experiencia.

Least Privilege AWS IAM Role PermissionsChris Wahl

��

RECORDING: https://youtu.be/hKepiNhtWSo Hello innovators! Welcome to the latest episode of My Essentials Course series. In this video, we'll delve into the concept of least privilege for IAM roles, ensuring roles have the minimum permissions needed for success. Learn strategies to create read-only, developer, and admin roles. Discover tools like IAM Access Analyzer, Pike, and Policy Sentry for generating efficient IAM policies. Follow along as we automate role and policy creation using Pike with Terraform, and test our permissions using GitHub Actions. Enhance your security practices by integrating these powerful tools. Enjoy the video and leave your feedback in the comments!

AI Driven Posture Analysis Fall Detection System for the Elderly.pdfPatrick Ogbuitepu

��

This project introduces an innovative, cost-effective solution for real-time activity monitoring of elderly individuals. By leveraging the MediaPipe pose estimation model, fuzzy logic, and finite state machines, the system can reliably track individuals, recognize static postures (standing, sitting, lying), and detect transitions, particularly focusing on falls. A key achievement is the system’s zero false alarm rate, a significant advancement in vision-based fall detection systems. While the system shows promise, it faces limitations in scenarios with severe occlusions or low lighting conditions. To address these challenges, future work will explore the use of multi-camera setups, interactive calibration modes, and audio feedback to enhance accuracy and user experience. This prototype represents a significant step towards reliable, real-time elder care. By combining advanced AI techniques with practical considerations, this system offers a scalable and effective solution to a pressing societal need.

From SBOMs to xBOMs to Transparency - Pavel Shukhman at OWASP Ottawa on 2025-...Pavel Shukhman

��

Build Your Uber Clone App with Advanced FeaturesV3cube

��

Evaluating Global Load Balancing Options for Kubernetes in Practice (Kubermat...Tobias Schneck

��

https://cfp.cloud-native.rejekts.io/cloud-native-rejekts-europe-london-2025/talk/UFZNVH/ Load Balancing is a critical aspect of modern cloud deployments, and it’s especially tricky and misunderstood in hybrid environments that span across public clouds and private datacenters on premise. Designing a future-proof solution that is scalable, robust, fast and includes automatic failovers for different disaster cases, is a challenge we need to tackle. Therefore, our evaluation focused on two base technologies: Multi-Cluster Meshes and DNS based Global Load Balancing. Join us on our journey of evaluating the two CNCF projects Cilium and K8GB against real-world scenarios with complex multi-cloud deployments. Learn about the benefits, challenges and trade-offs you should expect when choosing a hybrid cloud strategy with Kubernetes! A practical live demo will share our hands-on experience, pros and cons, alongside use-case-specific solution recommendations for your hybrid-cloud journey.

SAP Automation with UiPath: Solution Accelerators and Best Practices - Part 6...DianaGray10

��

Join us for a comprehensive webinar on SAP Solution Accelerators and best practices for implementing them using UiPath. This session is designed to help SAP professionals and automation enthusiasts understand how to effectively leverage UiPath’s SAP Solution Accelerators to automate standard SAP process quickly. Learn about the benefits, best ways to do it, and real-world success stories to speed up.

AI in Talent Acquisition: Boosting HiringBeyond Chiefs

��

AI is transforming talent acquisition by streamlining recruitment processes, enhancing decision-making, and delivering personalized candidate experiences. By automating repetitive tasks such as resume screening and interview scheduling, AI significantly reduces hiring costs and improves efficiency, allowing HR teams to focus on strategic initiatives. Additionally, AI-driven analytics help recruiters identify top talent more accurately, leading to better hiring decisions. However, despite these advantages, organizations must address challenges such as AI bias, integration complexities, and resistance to adoption to fully realize its potential. Embracing AI in recruitment can provide a competitive edge, but success depends on aligning technology with business goals and ensuring ethical, unbiased implementation.

Cloudflare’s Game-Changing Move The First Remote MCP Server for AI Agent Deve...davidandersonofficia

��

Recruiting Tech: A Look at Why AI is Actually OGMatt Charney

��

Introduction to Generative AI refers to a subset of artificial intelligenceKongu Engineering College, Perundurai, Erode

��

AI Breakthroughs and Innovations-What’s Next.docxAIvolut

��

Ricardo Jebb Bruno - A Structural CAD TechnicianRicardo Jebb Bruno

��

Q1 FY26 TUG Leader Quarterly Call - APAC / EMEAlward7

��

Threat Modeling a Batch Job System - AWS Security Community DayTeri Radichel

��

All-Data, Any-AI Integration: FME & Amazon Bedrock in the Real-WorldSafe Software

��

APAC Solutions Challenge Info Session.pdfGDG on Campus Monash

��

HHUG-04-2025-Close-more-deals-from-your-existing-pipeline-FOR SLIDESHARE.pptxHampshireHUG

��

Meet CrewAI The Framework Powering Agentic AI (2).pdf Yodaplus Technologies Private Limited

��

Top Tips to Get Your Data AI-Ready‎ ‎ ‎‎ ‎Precisely

��

Commit Conf 2025 Bitnami Charts with KubescapeAlfredo García Lavilla

��

Least Privilege AWS IAM Role PermissionsChris Wahl

��

AI Driven Posture Analysis Fall Detection System for the Elderly.pdfPatrick Ogbuitepu

��

From SBOMs to xBOMs to Transparency - Pavel Shukhman at OWASP Ottawa on 2025-...Pavel Shukhman

��

Build Your Uber Clone App with Advanced FeaturesV3cube

��

Evaluating Global Load Balancing Options for Kubernetes in Practice (Kubermat...Tobias Schneck

��

SAP Automation with UiPath: Solution Accelerators and Best Practices - Part 6...DianaGray10

��

AI in Talent Acquisition: Boosting HiringBeyond Chiefs

��

10 tips to get started with html5 games

2. YU JIANRONGZlonggames

3. 10 HTML5 Tips

4. Zlong HTML5 gamesCastle SolitaireBlocker MoverBubble HitMore details: http://m.agame.com

5. Tip 1 Desktop & MobileChoose <Canvas> for gamesCanvas+ Widely supported + No compatibility problemsCSS + nice effects via CSS 3D, iphone only - Compatibility problems on CSS - Crash on iOS - Flickering on Android

6. Tip 2 Use <audio> tag for Background MusicAudio support is very limited

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

8. Tip 3 Use touch events for MobileMouse events works different on 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. Tip 4 MobileUse Dirty Rectangles for Canvas to improve framerateBetter performanceExample of game Bubble Hit

14. Tip 5 MobileMatch button size on Mobile to finger40 pixels is recommended for Mobile

15. Tip 6MobilesetTimeout instead of setIntervalfor game loopsetInterval: DOM may not be refresh on Android

16. Tip 7Watch out for Memory limitations on iOS10MB max for one browser tab

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. Tip 8 Use localStorage for saving dataLocalStorageis widely supported and better than cookies

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

21. Tip 9 Use YUI Compressor to compress your codeYUI compressor for size reduction and basic obfuscation

22. JSMin: only reduces sizeDesktop & Mobile

23. Tip 10 Tools for mobile debugging and tuningUse aCatLog (android market app) or adblogcat (Android Debug Bridge) to read the browser log on Android

24. Bookmarklet(javascript: URI) is usefuljavascript:Game.PlayerSpeed=prompt("Player Speed:")For desktop: use chrome to debug and traceMobile

25. Getting startedDIVE INTO HTML5: http://diveintohtml5.org/Safari Reference Library: http://developer.apple.com/library/safari/navigation/https://developer.mozilla.org/en/HTML/HTML5http://m.agame.com/

�ݺ�ߣ

10 tips to get started with html5 games

Recommended

More Related Content

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

Recently uploaded (20)

10 tips to get started with html5 games