Canvas Games: Part II - HTML5 Canvas - page 826

//draw camera
//calculate starting tile position

var var tilex = Math . floor ( camera . x / world . tileWidth );

var var tiley = Math . floor ( camera . y / world . tileHeight );

var

var rowCtr ;
var var colCtr ;

var

var tileNum ;

for for ( rowCtr = 0 ; rowCtr < camera . rows ; rowCtr ++ ) {

for

for ( colCtr = 0 ; colCtr < camera . cols ; colCtr ++ ) {

tileNum = ( world . map [ rowCtr + tiley ][ colCtr + tilex ]);
var var tilePoint = {};

tilePoint . x = colCtr * world . tileWidth ;
tilePoint . y = rowCtr * world . tileHeight ;
var

var source = {};
source . x = Math . floor ( tileNum % 5 ) * world . tileWidth ;
source . y = Math . floor ( tileNum / 5 ) * world . tileHeight ;
context . drawImage ( tileSheet , source . x , source . y , world . tileWidth ,
world . tileHeight , tilePoint . x , tilePoint . y ,
world . tileWidth , world . tileHeight );

}

}

}

world . map = [
[ 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 ]
,[ 0 , 1 , 2 , 1 , 1 , 1 , 1 , 1 , 1 , 1 , 1 , 1 , 1 , 1 , 0 ]
,[ 0 , 1 , 0 , 1 , 0 , 0 , 1 , 0 , 1 , 0 , 0 , 1 , 0 , 1 , 0 ]
,[ 0 , 1 , 0 , 1 , 0 , 0 , 1 , 0 , 1 , 0 , 0 , 1 , 0 , 1 , 0 ]
,[ 0 , 1 , 0 , 1 , 0 , 0 , 1 , 1 , 1 , 0 , 0 , 1 , 0 , 1 , 0 ]
,[ 0 , 2 , 1 , 1 , 1 , 1 , 0 , 0 , 0 , 1 , 1 , 1 , 1 , 1 , 0 ]
,[ 0 , 1 , 0 , 0 , 0 , 1 , 0 , 0 , 0 , 1 , 0 , 0 , 0 , 1 , 0 ]
,[ 0 , 1 , 1 , 1 , 2 , 1 , 0 , 0 , 0 , 1 , 1 , 1 , 1 , 1 , 0 ]
,[ 0 , 0 , 0 , 0 , 0 , 1 , 1 , 1 , 1 , 1 , 0 , 0 , 0 , 0 , 0 ]
,[ 0 , 1 , 1 , 1 , 1 , 1 , 0 , 0 , 0 , 1 , 1 , 1 , 1 , 1 , 0 ]
,[ 0 , 1 , 0 , 1 , 0 , 0 , 1 , 1 , 1 , 0 , 0 , 1 , 0 , 1 , 0 ]
,[ 0 , 1 , 0 , 1 , 0 , 0 , 2 , 0 , 0 , 0 , 0 , 1 , 0 , 1 , 0 ]
,[ 0 , 1 , 0 , 1 , 0 , 0 , 1 , 0 , 1 , 0 , 0 , 1 , 0 , 1 , 0 ]
,[ 0 , 1 , 1 , 1 , 1 , 1 , 1 , 2 , 1 , 1 , 1 , 1 , 1 , 1 , 0 ]
,[ 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 ]
];