Download Safari Books Online apps: Apple iOS | Android

Entire Site

Safari Books Online

    Free Trial

    Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.


    • Create BookmarkCreate Bookmark
    • Create Note or TagCreate Note or Tag
    • DownloadDownload
    • PrintPrint
    Share this Page URL
    Help

    Chapter 8. Canvas Game Essentials > Our Basic Game HTML5 File

    8.2. 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

    Code View: Scroll / Show All
    <!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 = '#ffaaaa';
         context.fillRect(0, 0, 200, 200);
         context.fillStyle = '#000000';
         context.font = '20px _sans';
         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>


      

    You are currently reading a PREVIEW of this book.

                                                                                            

    Get instant access to over
    $1 million worth of books and videos.

      

    Start a Free Trial