Aditya Ravi Shankar [Aditya Ravi Shankar] - Pro HTML5 Games

About the Author

Aditya Ravi Shankar started programming in 1993 when he was first introduced to the world of computers. With no access to the Internet or online tutorials at the time, he wrote his first game in GW-BASIC by painstakingly retyping code from a book he found at the local library.

After graduating from the Indian Institute of Technology Madras in 2001, he spent nearly a decade working as a software consultant, developing trading and analytics systems for investment banks and large Fortune 100 companies, before eventually leaving his corporate life behind so he could focus on doing what he loved.

A self-confessed technology geek, he has spent the time since then working on his own projects and experimenting with every new language and technology that he could, including of course HTML5. During this time he became well known for singlehandedly re-creating the famous Command and Conquer RTS game entirely in HTML5.

Apart from programming, Aditya is passionate about billiards, salsa dancing, and learning to develop the subconscious mind. He maintains a personal website ( www.adityaravishankar.com ) where he writes articles on game programming, personal development, and billiards.

When he is not busy writing or working on his own projects, Aditya does consulting work with companies to help them launch new software products.

About the Technical Reviewers

Shane Hudson is a freelance web site developer with a focus on both bleeding-edge web technologies and web standards. He has extensive experience with JavaScript, having worked on a range of highly interactive web sites and side projects. He has a strong interest in the fields of artificial intelligence and computer vision. You can contact Shane by e-mailing shane@shanehudson.net .

Shane says, Shankar has written the book that the industry has been waiting for: how to write and use JavaScript (and Node.js) effectively and with ease. The outcome of this book is a game, but it is not just a book about game development; it is a book about how to write very good JavaScript.

Josh Robinson is a code craftsman and freelance developer who thrives on cutting-edge technology. His love for coding began with the blue glow of a second-hand Commodore 64 and has continued into his career developing for the modern Web. In 2006, while working at a VoIP provider, he discovered the elegance of Ruby and Ruby on Rails, which led to the creation of several gems including the popular countries gem. He can be stalked at JoshRobinson.com or on Twitter: @JoshRobinson .

Josh says, With Pro HTML5 Games you will be coding up games like a boss.

Syd Lawrence runs We Make Awesome Sh and is a developer evangelist for Twilio. Hes previously been described as many things, some too rude to print but others less so. Geek.com once described him as a modern superhero, and The Next Web once described him as a social web guru.

CHAPTER 1

HTML5 and JavaScript Essentials

HTML5, the latest version of the HTML standard, provides us with many new features for improved interactivity and media support. These new features (such as canvas , audio , and video ) have made it possible to make fairly rich and interactive applications for the browser without requiring third-party plug-ins such as Flash.

The HTML5 specification is currently a work in progress, and browsers are still implementing some of its newer features. However, the elements that we need for building some very amazing games are already supported by most modern browsers (Google Chrome, Mozilla Firefox, Internet Explorer 9+, Safari, and Opera).

All you need to get started on developing your games in HTML5 are a good text editor to write your code (I use TextMate for the Mac http://macromates.com/ ) and a modern, HTML5-compatible browser (I use Google Chrome http://www.google.com/chrome ).

The structure of an HTML5 file is very similar to that of files in previous versions of HTML except that it has a much simpler DOCTYPE tag at the beginning of the file. provides a skeleton for a very basic HTML5 file that we will be using as a starting point for the rest of this chapter.

Executing this code involves saving it as an HTML file and then opening the file in a web browser. If you do everything correctly, this file should pop up the message Hello World!

"Content-type" content = "text/html; charset = utf-8">
Sample HTML5 File
"text/javascript" charset = "utf-8">
// This function will be called once the page loads completely
function pageLoaded(){
alert('Hello World!');
}
"pageLoaded();">

Note We use the bodys onload event to call our function so that we can be sure that our page has completely loaded before we start working with it. This will become important when we start manipulating elements like canvas and image. Trying to access these elements before the browser has finished loading them will cause JavaScript errors.

Before we start developing games, we need to go over some of the basic building blocks that we will be using to create our games. The most important ones that we need are

• The canvas element, to render shapes and images
• The audio element, to add sounds and background music
• The image element, to load our game artwork and display it on the canvas
• The browser timer functions, and game loops to handle animation

The canvas Element

The most important element for use in our games is the new canvas element. As per the HTML5 standard specification, The canvas element provides scripts with a resolution-dependent bitmap canvas, which can be used for rendering graphs, game graphics, or other visual images on the fly. You can find the complete specification at www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html .

The canvas allows us to draw primitive shapes like lines, circles, and rectangles, as well as images and text, and has been optimized for fast drawing. Browsers have started enabling GPU-accelerated rendering of 2D canvas content, so that canvas-based games and animations run fast.

Using the canvas element is fairly simple. Place the < canvas > tag inside the body of the HTML5 file we created earlier, as shown in .

"640" height = "480" id = "testcanvas" style = "border:black 1px solid;">
Your browser does not support HTML5 Canvas. Please shift to another browser.

The code in creates a canvas that is 640 pixels wide and 480 pixels high. By itself, the canvas shows up as a blank area (with a black border that we specified in the style). We can now start drawing inside this rectangle using JavaScript.

Next page