HTML and CSS Reference
In-Depth Information
</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>
We have left in the console.log statements that show how the algorithm is detecting the
rowBuffer
and
colBuffer
values. These are the same values we saw previously in
When you run this page in a browser, the arrow keys allow you to move the camera 4 pixels
in each of the up, down, left, and right directions. You can change this value by setting
scrollRate
to a new value.
That's all there is to both fine and coarse scrolling a tile-based screen. By using some of the
examples in previous chapters, you can extend this to add path finding, physics, and even
pixel-based collision detection to create any type of game you want that uses a scrolling
screen.
