Learn HTML5 by Creating Fun Games -- Table of Contents -- Learn HTML5 by Creating Fun Games -- Credits -- About the Author -- About the Reviewer -- www.PacktPub.com -- Support files, eBooks, discount offers and more -- Why Subscribe? -- Free Access for Packt account holders -- Preface -- What this book covers -- What you need for this book -- Who this book is for -- Conventions -- Reader feedback -- Customer support -- Downloading the example code -- Errata -- Piracy -- Questions -- 1. An Overview of HTML5 -- What is HTML? -- A brief history of HTML -- The evolution of the World Wide Web -- What is HTML5? -- HTML5 - the next step in the evolution -- HTML5 is not a single feature -- More semantic document structure -- A warning about performance -- Native features of the browser -- Automatic form validation -- New input types -- Telephone-friendly hyperlinks -- CSS-based DOM selectors -- Text-to-speech -- CSS3 -- Separation of concerns -- Reusability of visual design -- Ease of maintenance -- Scalability -- The evolution of CSS -- Experimental features and vendor prefixes -- CSS preprocessors -- CSS3 modules -- Style attributes -- Selectors -- Colors -- Media queries -- JavaScript APIs -- New JavaScript APIs -- The Web as a platform -- The Open Web -- HTML5 - a game changer -- Learning HTML5 through game development -- Summary -- 2. HTML5 Typography -- The game -- Game elements -- The options widget -- The game title -- Boat -- Sky -- Waves -- Tracks -- Players -- The main container -- Words to write -- Words written -- The message container -- The message title -- The new champion form -- Leaderboard -- Game controls -- HTML -- The web form -- Range input -- Email input -- Data attributes -- CSS -- Web fonts -- Transitions -- Animations -- The text shadows -- The box shadows -- The border radius -- JavaScript -- Query selectors -- API usage.

Web forms -- New input types -- Date -- Month -- Week -- Time -- Datetime -- Datetime-local -- Color -- Email -- Number -- Range -- Search -- Tel -- Url -- Form validation -- Validity state object -- Custom validation -- Used in the game -- Data attributes -- Used in the game -- Query selectors -- Used in the game -- Web fonts -- Transitions -- Animations -- The text shadow -- The box shadow -- The border radius -- The code -- The HTML structure -- JavaScript and logic -- Summary -- 3. Understanding the Gravity of HTML5 -- Browser compatibility -- Supporting different browsers -- HTML5 libraries and frameworks -- jQuery -- Google Web Toolkit -- Supporting browsers with limited HTML5 features -- Gracefully degrade -- Polyfills -- Modernizr -- The game -- Code structure -- API usage -- Web audio -- Scalable Vector Graphics (SVG) -- Drag-and-drop -- Web audio -- How to use it -- SVG -- How to use it -- Drag-and-drop -- How to use it -- Summary -- 4. Using HTML5 to Catch a Snake -- The game -- API usage -- How to use it -- Typed arrays -- How to use it -- ArrayBuffer and ArrayBufferView -- Typed array view types -- Canvas -- How to use it -- clearRect -- Fill and stroke -- Lines -- Shapes -- Text -- Transformations -- Drawing images -- Manipulating pixels -- Web workers -- How to use it -- Offline application cache -- How to use it -- The code -- Summary -- 5. Improving the Snake Game -- The game -- API usage -- Web messaging -- How to use it -- Web storage -- Local storage -- Session storage -- IndexedDB -- IDBFactory -- IDBOpenDBRequest -- IDBTransaction -- readwrite -- readonly -- versionchange -- Getting elements -- Deleting elements -- The code -- Saving the high score -- Taking screenshots of the game -- Summary -- 6. Adding Features to Your Game -- Advanced HTML5 APIs -- WebGL -- Hello, World! -- Web sockets -- The connection.

The server-side code -- The client-side code -- Video -- Attributes -- Events -- Geolocation -- A Google Maps example -- Upcoming CSS features -- Programming in the bleeding edge -- CSS shaders -- Using custom filters -- CSS columns -- The column rule -- Column breaks -- CSS regions and exclusions -- Regions -- Exclusions -- Defining shapes -- Summary -- 7. HTML5 and Mobile Game Development -- Desktop versus mobile -- Major implementation considerations -- Screen size and orientation -- Computing power -- Battery life -- Browser differences -- Best practices -- Degrade gracefully and enhance progressively -- Finger-friendly design -- Save battery life -- Plan for offline -- Offering a desktop version -- Understanding media queries -- width -- height -- device-width -- device-height -- orientation -- aspect-ratio -- device-aspect-ratio -- color -- color-index -- monochrome -- resolution -- scan -- grid -- Understanding touch events -- touchstart -- touches -- changedTouches -- targetTouches -- touchend -- touchmove -- The touch object -- identifier -- screenX -- screenY -- clientX -- clientY -- pageX -- pageY -- radiusX -- radiusY -- rotationAngle -- force -- target -- The game -- Code structure -- /css -- /img -- /js -- /components -- /entities -- /widgets -- Canvas.js -- EnemyManager.js -- GameLoop.js -- PhysicsManager.js -- Vec2.js -- main.js -- index.html -- Mobile optimizations -- Combine resources -- Track touches by IDs -- Use CSS animations with caution -- Use separate canvases for each game layer -- Use image atlases -- Summary -- Index.