I take an iterative approach to writing this game, adding layers to the game to build and hone it to a working game. With the scaffold out of the way, the first thing I want to do is create some variables that will store the canvas DOM element, as well as create a context for the game. Below the
<footer>, add a
<script> element with Listing 6–5.
<script> var canvas = document.getElementById('game'); var context = canvas.getContext('2d'); </script>
I am placing the script at the bottom of the page to ensure that all the page content loads before the code for the game loads into the browser’s memory. Next, I want to stub out a
gameLoop function that will handle all the drawing on the ...