Fine Scrolling Full Code Example

Example 9-3 shows the full code listing for the Fine Scrolling example. Notice that this code adds in the colBuffer and rowBuffer variables as well as the matrix transformation secret that performs the actual smooth fine scrolling.

Example 9-3. Fine scrolling

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CH9 EX4 Scrolling Test 2 fine scrolling</title>
<script src="modernizr.js"></script>
<script type="text/javascript">
window.addEventListener('load', eventWindowLoaded, false);
function eventWindowLoaded() {

    canvasApp();

}

</script>


<script language="Javascript">

function canvasSupport () {
      return Modernizr.canvas;
}


function canvasApp(){

    if (!canvasSupport()) {
             return;
      }else{
        var theCanvas = document.getElementById('canvas');
        var context = theCanvas.getContext('2d');
    }


    document.onkeydown=function(e){
        e=e?e:window.event;
        keyPressList[e.keyCode]=true;
    }

    document.onkeyup=function(e){
    //document.body.onkeyup=function(e){
        e=e?e:window.event;
        keyPressList[e.keyCode]=false;
    };

    //key presses
    var keyPressList=[];

    //images
    var tileSheet = new Image();
    tileSheet.src = "scrolling_tiles.png";

    //mapdata
    var world={};

    //camera
    var camera={};

    //key presses
    var keyPressList={};

    var rowBuffer=1;
    var colBuffer=1;

    var scrollRate=4;

    function init() {

        world.cols=15;
        world.rows=15;
        world.tileWidth=32;
        world.tileHeight=32;
        world.height=world.rows*world.tileHeight;
        world.width=world.cols*world.tileWidth;

        camera.height=theCanvas.height;
        camera.width

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