Walking on tiles

walk demo now has tiles map underneath it.

by dogmeethorse

HTML

<div>
<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>

CSS

div{
	top:20px;
	margin-left:20px;

}
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 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);
	var sand = new Tile(2, 0);
	var nightForest = new Tile(6 , 0);
	var water = new Tile(8, 0);
	var swamp = new Tile(4,0);
	var mountain = new Tile(3,0);
	var nightSand = new Tile(9,0);
	function eventPicLoaded() {
		startUp();
	}
	

	var hero= {
		x : 2 * DEST_WIDTH,
		y : 1 * DEST_HEIGHT,
		speed : 8,
		direction : "down",
		/* 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 Frame(6,1),
			new Frame(5,1), new Frame(7,1) 
		],
		
		getDirection : function(){
			if(hero.direction == "down"){
				if(hero.y >= DEST_HEIGHT * 10){
					hero.direction = "right";
					hero.currentFrame = 6;
				}
			}
			if(hero.direction == "up"){
				if(hero.y  <= DEST_HEIGHT * 3){
					hero.direction = "left"
					hero.currentFrame = 4;

				}
			}
			if(hero.direction == "right"){
				if(hero.x >= DEST_WIDTH *8){
					hero.direction = "up";
					hero.currentFrame = 2;
				}
			}
			if(hero.direction == "left"){
				if(hero.x <= DEST_WIDTH * 2){
				hero.direction = "down";
				hero.currentFrame = 0;
				}
			}		
		},
		move : function(){
			//console.log("hero frame = " + hero.currentFrame);
			
			if(hero.direction == "down"){
				if(hero.currentFrame != 0){
					hero.currentFrame = 0;
				}
				else{
					hero.currentFrame ++;
				}		
			}...