Scrolling overworld

bigger overworld with background scrolling and collision

by dogmeethorse

HTML

<div width="775" height="775">
<canvas id="canvas" width="704" height="704">
 Your browser does not support the HTML 5 Canvas. 
</canvas>
<canvas id="hCanvas" width="704" height="704">
</div>
<div style="float:right" width = 100>
<p  id="keysdown" ></p>
</div>

CSS

canvas{
	position:absolute;
	top: 10px;
	left: 10px;
	border: 1px solid black;
}

JavaScript

// columns per row : 12
	// rows : 12
	
	const TILE_WIDTH  = 16;
	const TILE_HEIGHT = 16;
	const DEST_WIDTH = 64;
	const DEST_HEIGHT = 64;
	const NUM_COLS = 19;
	const NUM_ROWS = 15;
	const SCREEN_BORDER = 5;
	
	var keyOutput = document.getElementById('keysdown');
	var theCanvas = document.getElementById('canvas');
	var context = theCanvas.getContext('2d');

	var heroCanvas = document.getElementById('hCanvas');
	var hCtx = heroCanvas.getContext('2d');
	var tileSheet= new Image();
	

	var counter= 0;

	
	tileSheet.addEventListener('load', eventPicLoaded , false);
	tileSheet.src="https://sites.google.com/site/hillstreesplants/images/tiles_16.png?attredirects=0&d=1";
	
	var forest = new Tile(0, 0, true);
	var sand = new Tile(2, 0, true);
	var nightForest = new Tile(6, 0, true);
	var water = new Tile(8, 0, false);
	var swamp = new Tile(4, 0, true);
	var mountain = new Tile(3, 0, false);
	var nightSand = new Tile(9,0, true);
	function eventPicLoaded() {
		startUp();
	}
	
	var map = {
		layout : [
			[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
			[0,0,1,1,1,0,0,1,1,1,0,0,0,0,0,0,0,0,0],
			[0,1,1,1,0,0,2,1,2,1,1,0,0,0,0,0,0,0,0],
			[0,1,1,2,2,2,2,2,2,2,1,1,1,1,0,0,0,0,0],
			[0,1,2,2,2,2,2,2,2,2,2,2,2,1,1,1,1,1,0],
			[0,4,2,2,2,1,2,1,2,2,1,1,1,1,2,2,2,1,0],
			[0,4,4,2,2,2,2,1,1,0,0,0,0,1,2,2,2,1,0],
			[0,4,4,2,2,1,3,3,1,0,0,0,0,2,2,2,2,1,0],
			[0,4,1,2,2,2,1,1,2,2,2,2,2,2,2,1,1,0,0],
			[0,1,1,2,2,2,2,2,2,2,4,4,4,4,1,3,1,0,0],
			[0,0,1,2,2,1,1,2,2,4,0,0,0,4,3,3,1,0,0],
			[0,0,0,1,2,2,2,2,3,3,3,3,3,3,2,2,1,0,0],
			[0,0,0,0,1,2,2,2,2,2,2,2,2,2,2,1,0,0,0],
			[0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0],
			[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
		],
		tileList : [water,sand,forest,mountain,swamp,nightSand,nightForest],
		x:0,
		y:0,
		draw : function(){
			for( var row = 0; row < NUM_ROWS; row++){
				for(var col = 0; col < NUM_COLS; col++){
					console.log(row);
					map.tileList[this.layout[row][col]].draw(col,row);
				}
			}
		}
	}


	var hero= {
		x : 5 *...