HTML and CSS Reference
In-Depth Information
No Flash timeline
There is no frame-based timeline for animation intrinsic to Canvas. This means
that we will need to code all of our animations using images and/or paths, and
apply our own frame-based updates.
No display list
Flash AS3 offers the very powerful idea of an object display list; a developer can
add hundreds of individual physical display objects to the game screen. HTML5
Canvas has only a single display object (the canvas itself).
What Does Canvas Offer?
Even though Canvas lacks some of the features that make the Flash platform very nice
for game development, it also has some strengths.
A powerful single stage
HTML5 Canvas is closely akin to the Flash Stage. It is a rectangular piece of screen
real estate that can be manipulated programmatically. Advanced Flash developers
might recognize the canvas as a close cousin to both the BitmapData and Shape
objects in ActionScript. We can draw directly to the canvas with paths and images,
and transform them on the fly.
Logical display objects
Canvas gives us a single physical display object, but we can create any number of
logical display objects. We will use JavaScript objects to hold all of the logical data
and methods we need to draw and transform our logical game objects to the phys-
ical canvas.
Our Basic Game HTML5 File
Before we start to develop our arcade game, let's look at Example 8-1 , the most basic
HTML file we will use in this chapter ( CH8EX1.html ). We'll start by using the basic
HTML5 template we defined in Chapter 1 . Our canvas will be a 200×200 square.
Example 8-1. The Basic HTML file for Chapter 8
<!doctype html>
<html lang="en">
<meta charset="UTF-8">
<title>CH8EX1: Filled Screen With Some Text</title>
<script type="text/javascript">
window.addEventListener('load', eventWindowLoaded, false);
function eventWindowLoaded() {
function canvasApp(){
var theCanvas = document.getElementById("canvas");
Search WWH ::

Custom Search