Build an HTML5 Game: A Developer's Guide with CSS and JavaScript

html5 game
no starch press
Build an HTML5 Game: A Developer's Guide with CSS and JavaScript, Karl Bunyan, no starch press, 2015

Could you build an online game using just HTML, CSS and JavaScript? Absolutely! And this book might just help you make that happen.

The starting point of Build an HTML5 Game: A Developer's Guide with CSS and JavaScript is something that completely snuck up on me. In my time as a volunteer webmaster, I'd never considered taking my web skills much further than a church web site with just a tad of moving text and a slide show "walk" along the nature trail. The features of HTML5 that have made it a contender for game development were simply lost on me. With this book, the proverbial lights came on. And while I haven't yet jumped in and tried to build my own game, I now understand what is required and might just give it a shot.

With HTML5, CSS and JavaScript, you can build some pretty nice little games -- and without a significant up-front investment. If you're comfortable with just these technologies, you're pretty much ready to start. Now. And, if not you, maybe some teenager near you is right now imagining a career in game development and a copy of this book might be just what he or she needs to get started.

The book starts out explaining that the required skills are relatively modest, but that these skills really are prerequisites to working your way through the material it presents. So, no, it's not going to teach you basic HTML, CSS or JavaScript. But if you know enough about these tools, you might find that the process of building an online game is a lot of fun and quite a bit easier than you might have imagined. And, since the paperback book comes with a free ebook, you could copy and paste the code to make setting up your first HTML5 game that much easier.

Why HTML5?

HTML5 -- the latest HTML version -- contains a lot of new and very cool features that make it an option for game development. These include

  • new data types
  • the canvas area
  • custom data attributes
  • editable contents
  • autofocus and placeholder attributes
  • required field and range validators
  • and more ...

These are truly valuable features that move HTML well beyond what many of us use routinely.



CSS & JavaScript

CSS and JavaScript also play major roles in setting up the bubble shooter game that the book will have you build and HTML5 game development in general.

Getting started

You're going to learn about:

  • the tools you will need
  • simple animation
  • creating your game logic
  • updating the display
  • CSS transitions
  • rendering your game within the html canvas
  • how to embed sound effects
  • memory management -- how to speed up your game
  • ways to continue improving your skills

In fact, in building your first HTML5 game, you will learn enough about how to do these things that you will then be ready to branch out and build games entirely of your own design.

Table of Contents

The Table of Contents illustrates the progression of steps that you will take.


Part I: Building a Game with HTML, CSS, and JavaScript

Chapter 1: Preparation and Setup
Chapter 2: Sprite Animation Using jQuery and CSS
Chapter 3: Game Logic
Chapter 4: Translating Game State to the Display

Part II: Enhancements with HTML5 and Canvas

Chapter 5: CSS Transitions and Transformations
Chapter 6: Rendering Canvas Sprites
Chapter 7: Levels, Sound, and More
Chapter 8: Next Steps in HTML5


Ready to do it?

You should expect to come away from this book knowing how to do all of these things and feeling ready to design and implement your own game ideas.

While I was originally taken by surprise by the very idea that HTML had progressed to the stage that it could provide a platform for game development, I found that there are quite a few sites the are already offering games based on this technology (e.g., and played a few of those games while reading through this book.

Join the Network World communities on Facebook and LinkedIn to comment on topics that are top of mind.

Copyright © 2015 IDG Communications, Inc.