HTML and CSS Reference
In-Depth Information
init
();
var
var
FRAME_RATE
=
10
;
var
var
intervalTime
=
1000
/
FRAME_RATE
;
function
function
gameLoop
() {
runGame
();
window
.
setTimeout
(
gameLoop
,
intervalTime
);
}
}
<
/script>
</head>
</head>
<body>
<body>
<div
<div style=
"position: absolute; top: 50px; left: 50px;"
>
<canvas
<canvas id=
"canvas"
width=
"160"
height=
"160"
>
Your browser does not support the HTML5 Canvas.
</canvas>
</canvas>
</div>
</div>
</body>
</body>
</html>
</html>
When you try this in a browser, you can use the arrow keys to scroll the 160×160 camera
around the game world. Each key press moves the window 32 pixels at a time in the direction
pressed. Now let's take a look at the full code listing for the fine scrolling version.
