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">
<head>
<meta charset="UTF-8">
<title>CH8EX1: Filled Screen With Some Text</title>
<script type="text/javascript">
   window.addEventListener('load', eventWindowLoaded, false);
   function eventWindowLoaded() {
      canvasApp();
   }
   function canvasApp(){
      var theCanvas = document.getElementById("canvas");
      if (!theCanvas || !theCanvas.getContext) {
         return;
      }
      var context = theCanvas.getContext("2d");
      if (!context) {
         return;
      }
      drawScreen();
      function drawScreen() {
         context.fillStyle = '#aaaaaa';
         context.fillRect(0, 0, 200, 200);
         context.fillStyle = '#000000';
         context.font = '20px sans-serif';
         context.textBaseline = 'top';
         context.fillText  ("Canvas!", 0, 0);
      }
   }
</script>
</head>
   <body>
      <div style="position: absolute; top: 50px; left: 50px;">
         <canvas id="canvas" width="200" height="200">
         Your browser does not support HTML5 Canvas.
         </canvas>
      </div>
   </body>
</html>

This example will do nothing more than place a 200×200 gray box on the canvas and write “Canvas!” starting at 0,0. We will be replacing the drawScreen() function for most of the next few examples. Figure 8-1 illustrates Example 8-1.

Figure 8-1. The basic HTML file for Chapter 8

Next, we will begin to ...

Get HTML5 Canvas, 2nd Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial