Walking in overworld

WIP of hero moving around the overworld.

by dogmeethorse

HTML

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

CSS

canvas{
	position:absolute;
	top:s 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 = 12;
	const NUM_ROWS = 12;
	
	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,1,1,1,0,0,1,1,1,0,0],
			[0,1,1,1,0,0,2,1,2,1,1,0],
			[0,1,1,2,2,2,2,2,2,2,1,0],
			[0,1,2,2,2,2,2,2,2,2,1,0],
			[0,4,2,2,1,2,2,1,2,2,0,0],
			[0,4,4,2,2,2,2,1,1,0,0,0],
			[0,4,4,2,2,1,3,3,1,2,0,0],
			[0,4,1,2,2,2,1,1,2,2,1,0],
			[0,1,1,2,2,2,2,2,2,2,1,0],
			[0,0,1,2,2,1,1,2,2,1,0,0],
			[0,0,0,0,0,0,0,0,0,0,0,0]
		],
		tileList : [water,sand,forest,mountain,swamp,nightSand,nightForest],
		draw : function(){
			for( var row = 0; row < NUM_ROWS; row++){
				for(var col = 0; col < NUM_COLS; col++){
					map.tileList[this.layout[row][col]].draw(col,row);
				}
			}
		}
	}


	var hero= {
		x : 2 * DEST_WIDTH,
		y : 1 * DEST_HEIGHT,
		tilePos : [2,1],
		targetTile: [2,1],
		targetTileValue : map.layout[2][1],
		speed : 16,
		direction : "stop",
		nextDirection : "stop",
		/* frame order: walk down walk up walk left walk right */
		currentFrame : 0,
		frames:[
			new Frame(0,1), new Frame(1,1),
			new Frame(2,1), new Frame(3,1),
			new Frame(4,1), new...