Learn HTML5 by Creating Fun Games

Learn HTML5 by Creating Fun Games
eBook: $29.99
Formats: PDF, PacktLib, ePub and Mobi formats
save 15%!
Print + free eBook + free PacktLib access to the book: $79.98    Print cover: $49.99
save 37%!
Free Shipping!
UK, US, Europe and selected countries in Asia.
Also available on:
Table of Contents
Sample Chapters
  • Learn the basics of this emerging technology and have fun doing it
  • Unleash the new and exciting features and APIs of HTML5
  • Create responsive games that can be played on a browser and on a mobile device

Book Details

Language : English
Paperback : 374 pages [ 235mm x 191mm ]
Release Date : June 2013
ISBN : 1849696020
ISBN 13 : 9781849696029
Author(s) : Rodrigo Silveira
Topics and Technologies : All Books, Web Development, Games

Table of Contents

Chapter 1: An Overview of HTML5
Chapter 2: HTML5 Typography
Chapter 3: Understanding the Gravity of HTML5
Chapter 4: Using HTML5 to Catch a Snake
Chapter 5: Improving the Snake Game
Chapter 6: Adding Features to Your Game
Chapter 7: HTML5 and Mobile Game Development
  • Chapter 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
    • Chapter 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
          • 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
          • Form 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
      • Chapter 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
        • Chapter 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
          • Chapter 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
            • Chapter 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
                  • Exclusions
                  • Defining shapes
              • Summary
              • Chapter 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

                Rodrigo Silveira

                Rodrigo Silveira is a web engineer at Deseret Digital Media. His responsibilities include back-end system development, tools, and maintenance, front-end application development and design, and more recently, he's been involved in mobile development of various products on the Android platform. He received his Bachelor's of Science in Computer Science from Brigham Young University, Idaho, as well as an Associate's Degree in Business Management from LDS Business College in Salt Lake City, Utah. His fascination for web development began in his early teenage years, and his skills grew as he discovered the power of a library subscription, a curious and willing mind, and supportive parents and friends. Today Rodrigo balances his time between the three great passions of his life—his family, software development, and video games (with the last two usually being mingled together).
                Sorry, we don't have any reviews for this title yet.

                Code Downloads

                Download the code and support files for this book.

                Submit Errata

                Please let us know if you have found any errors not listed on this list by completing our errata submission form. Our editors will check them and add them to this list. Thank you.


                - 1 submitted: last submission 20 May 2014

                Errata type: Others | Page number: 37 and Page number: 39

                The following two paragraphs refer to content that has been removed from the chapters so these paragraphs are redundent.

                Chapter 1 ends with:


                In the next chapter we will take the first step towards building awesome web-based games. First we'll set up a development environment by installing a web server. Next we will build an HTML5 web portal from which we can access our games, as well as get a bit of practice using the new semantic elements.
                And the Chapter 2 starts with:


                Now that we have our environment set up, we're ready to take a deep dive into the actual code behind HTML5. This is where the book begins to take off, since no matter how much theory you learn, it's very difficult to master a programming language without some keyboard time.



                Errata type: Technical | Page Number:41
                The following tip mentions of a link that was not working:

                I'll walk you through the process of finding and downloading custom fonts, when we get to that section later in the chapter. As for the images, you can draw or buy your own, or download the same ones I drew for the game from the website http://www.CHANGE-THIS-FOR-A-REAL-WEBSITE.

                The new link is:


                The code bundle contains the images that were used by the author.


                Errata type: Technical | Page Number:43, 44, 45
                The image mentions numbers that relate to the following headings:


                1. The options widget
                2. The game title
                3. Boat
                4. Sky
                5. Waves
                6. Tracks
                7. Players

                8. The main container
                9. The message container
                10. The message title
                11. Leaderboard
                12. Leaderboard title
                13. The new champion form
                14. Champion's name and e-mail

                15. Game controls

                Sample chapters

                You can view our sample chapters and prefaces of this title on PacktLib or download sample chapters in PDF format.

                Frequently bought together

                Learn HTML5 by Creating Fun Games +    PhoneGap 3.x Mobile Application Development Hotshot =
                50% Off
                the second eBook
                Price for both: $43.05

                Buy both these recommended eBooks together and get 50% off the cheapest eBook.

                What you will learn from this book

                • Understand why the open web is the best platform to develop for
                • Set up a local web development environment
                • Create DOM-based games such as a typography game using semantic HTML5 tags and CSS3 features
                • Use the new canvas element to create a 2D space shooter game
                • Discover writing portable code while developing a basic Jelly Wobbling Gravity Game
                • Create animations using RequestAninmationFrame while improvising the Snake game.
                • Make your games portable across desktop and mobile devices
                • Get started with WebGL for 3D game development, and with other upcoming HTML5 features and APIs

                In Detail

                HTML is fast, secure, responsive, interactive, and stunningly beautiful. It lets you target the largest number of devices and browsers with the least amount of effort. Working with the latest technologies is always fun and with a rapidly growing mobile market, it is a new and exciting place to be.

                "Learn HTML5 by Creating Fun Games" takes you through the journey of learning HTML5 right from setting up the environment to creating fully-functional games. It will help you explore the basics while you work through the whole book with the completion of each game.

                "Learn HTML5 by Creating Fun Games" takes a very friendly approach to teaching fun, silly games for the purpose of giving you a thorough grounding in HTML5. The book has only as much theory as it has to, often in tip boxes, with most of the information explaining how to create HTML5 canvas games. You will be assisted with lots of simple steps with screenshots building towards silly but addictive games.

                The book introduces you to HTML5 by helping you understand the setup and the underlying environment. As you start building your first game that is a typography game, you understand the significance of elements used in game development such as input types, web forms, and so on.We will see how to write a modern browser-compatible code while creating a basic Jelly Wobbling Game. Each game introduces you to an advanced topic such as vector graphics, native audio manipulation, and dragging-and-dropping. In the later section of the book, you will see yourself developing the famous snake game using requestAnimationFrame along with the canvas API, and enhancing it further with web messaging, web storage, and local storage. The last game of this book, a 2D Space shooter game, will then help you understand mobile design considerations.


                By teaching HTML5 by developing exciting games, the reader will see concrete applications for each of the concepts, and will also have a powerful deliverable at the end of each chapter – a fully functional game. We learn the various concepts using very abstract examples – how to model animals, foods, or fictitious machines. This makes learning and understanding a lot easier, and much more enjoyable.

                Who this book is for

                If you are are looking to get a good grounding in how to use the new awesome technology that is HTML5, this book is for you. Basic knowledge of HTML and/or HTML5 is welcome, but optional. The book is a friendly and exciting reference for beginners.

                Code Download and Errata
                Packt Anytime, Anywhere
                Register Books
                Print Upgrades
                eBook Downloads
                Video Support
                Contact Us
                Awards Voting Nominations Previous Winners
                Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
                Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software