Coarse Scrolling Full Code Example

Example 9-2, shows the full code listing for the Coarse Scrolling example. The code for this is a little bit simpler than the Fine Scrolling version because we do not need the rowBuffer and colBuffer variables. We also do not need to the matrix transformation to translate the Canvas. We simply need to paint the current set of tiles and will never need to paint any partial tiles as we would with Fine scrolling.

Example 9-2. Coarse scrolling

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CH9 EX3 - Scrolling Test 1 coarse scrolling</title>
<script src="modernizr.min.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={};


    function init() {

        world.cols=15;
        world.rows=15;
        world.tileWidth=32;
        world.

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