Untitled

<!DOCTYPE html>
<html>
	<head>
	</head>
	<body>
		<canvas id="canvas" width="640" height="640" style="border: #000 1px dotted"></canvas>
		<script type="text/javascript">
		window.onload = function(){
			window.addEventListener('keydown', function(ev){
				switch(ev.keyCode){
					case 37: Player.moveLeft(); break;
					case 38: Player.moveTop(); break;
					case 39: Player.moveRight(); break;
					case 40: Player.moveBottom(); break;
				}
			});
		}
			var canvas = document.getElementById('canvas'),
				context = canvas.getContext('2d');

			var map = [
				[1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,1],
				[1,0,1,0,1,1,0,0,0,1,0,1,0,1,0,1],
				[1,0,1,0,0,1,0,1,0,0,0,1,0,1,0,1],
				[1,0,0,0,0,0,0,1,1,1,1,1,0,1,0,1],
				[1,1,1,1,1,0,1,1,0,0,0,0,0,1,0,1],
				[1,0,0,0,0,0,1,0,0,1,0,1,1,0,0,1],
				[1,0,1,1,1,1,1,0,1,1,0,0,1,0,1,1],
				[1,0,0,0,0,1,1,0,1,1,0,1,0,0,0,1],
				[1,0,1,1,1,1,0,0,0,1,1,0,0,1,0,1],
				[1,0,1,0,0,0,0,1,0,0,0,0,1,1,0,1],
				[1,0,1,0,1,1,1,1,1,1,0,1,0,0,0,1],
				[1,0,1,0,1,1,0,0,0,0,0,0,0,1,1,1],
				[1,0,0,0,0,0,0,1,1,1,1,1,0,1,0,1],
				[1,1,1,1,1,1,0,0,0,1,0,1,0,1,0,1],
				[1,0,0,0,0,0,0,1,0,0,0,1,0,0,0,1],
				[1,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
			];

			var sprite = {
				w: 40,
				h: 40
			};

			var spriteHandlers = {
				drawFloor: function(x, y){
					context.fillStyle = '#CCC';
					context.fillRect(x * sprite.w, y * sprite.h, sprite.w, sprite.h);
				},
				drawWall: function(x, y){
					context.fillStyle = '#000';
					context.fillRect(x * sprite.w, y * sprite.h, sprite.w, sprite.h);
				}
			};

			var spriteHandlersMap = {
				0: spriteHandlers.drawFloor,
				1: spriteHandlers.drawWall,
				//3: drawPlayer,
			};


			function drawMapSprite(id, x, y){
				spriteHandlersMap[id](x,y);
			}


			function mapRender(){
				for(var i = 15; i >= 0; --i){
					for(var j = 15; j >= 0; --j){
						drawMapSprite(map[i][j], j, i);
					}
				}
			}

			function play(){
				context.fillStyle = '#000';
				context.fillRect(0,0,640,640);
				mapRender();
				Player.draw();
				setTimeout(play, 1000 / 20);
			}

			var Player = {
				position: {
					x: 1,
					y: 15
				},
				moveLeft: function(){
					var newPos = {
						x: Player.position.x-1,
						y: Player.position.y
					}
					if(newPos.x > 0 && newPos.x < 16 && newPos.y > 0 && newPos.y < 16){
						Player.position = newPos;
					}
				},
				moveTop: function(){
					var newPos = {
						x: Player.position.x,
						y: Player.position.y-1
					}
					if(newPos.x > 0 && newPos.x < 16 && newPos.y > 0 && newPos.y < 16){
						Player.position = newPos;
					}
				},
				moveRight: function(){
					var newPos = {
						x: Player.position.x+1,
						y: Player.position.y
					}
					if(newPos.x > 0 && newPos.x < 16 && newPos.y > 0 && newPos.y < 16){
						Player.position = newPos;
					}
				},
				moveBottom: function(){
					var newPos = {
						x: Player.position.x,
						y: Player.position.y+1
					}
					if(newPos.x > 0 && newPos.x < 16 && newPos.y > 0 && newPos.y < 16){
						Player.position = newPos;
					}
				},
				draw: function(){
					context.strokeStyle = '#ffa500';
					context.fillStyle = '#ffa500';
					context.arc(Player.position.x*sprite.w+sprite.w/2, Player.position.y*sprite.h+sprite.h/2, sprite.w/2, 0, 2 * Math.PI, true);
					context.fill();
					context.closePath();
				},
			};


			//mapRender();
			play();


		</script>
	</body>
</html>