Untitled

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chapter 4 Example 7: Animating an image with rotation</title>
<script src="modernizr-1.6.min.js"></script>
<script type="text/javascript">
window.addEventListener('load', eventWindowLoaded, false);
function eventWindowLoaded() {
	canvasApp();
}

function canvasSupport () {
  	return Modernizr.canvas;
}


function canvasApp(){
	if (!canvasSupport()) {
			 return;
  	}else{
		var theCanvas = document.getElementById('canvas');
		var context = theCanvas.getContext('2d');
	}

	var tileSheet=new Image();
	tileSheet.addEventListener('load', eventShipLoaded , false);
	tileSheet.src="tanks_sheet.png";

	var tileMap = [
	[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
	[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,25,29,1,1],
	[1,25,26,1,1,1,1,1,1,1,1,1,1,1,1,1,1,25,1,1],
	[1,1,1,1,1,1,1,1,28,1,1,1,1,1,1,1,1,1,1,1],
	[1,1,1,1,1,1,1,1,30,1,1,1,1,25,26,27,1,1,1,1],
	[1,1,1,1,1,1,25,25,25,1,1,1,1,1,1,1,1,1,1,1],
	[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
	[1,1,1,27,25,25,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
	[1,1,1,1,1,1,1,1,1,25,1,1,1,1,1,1,1,1,29,1],
	[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
	[1,1,1,25,1,1,1,1,25,26,1,1,1,1,1,1,1,1,1,1],
	[1,1,1,25,1,1,1,1,1,1,1,1,1,1,25,26,25,26,1,1],
	[28,25,25,25,1,1,1,1,1,1,1,1,1,1,28,1,1,1,1,1],
	[30,1,1,1,1,1,1,1,1,1,1,1,1,1,30,1,1,1,1,1],
	[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1] ];
	var mapRows = 15;
	var mapCols = 20;
	var mapIndexOffset = -1;
	var animationFrames=[1,2,3,4,5,6,7,8];
	var frameIndex=0;
	var rotation=90;
	var x=0;
	var y=0;
	var dx=0;
	var dy=0;
	var keyDown = false;

	function eventShipLoaded() {
		startUp();
	}

	function drawScreen() {
		context.fillStyle="#aaaaaa";
		context.fillRect(0,0,500,500);

		for (var rowCtr=0;rowCtr<mapRows;rowCtr++) {
			for (var colCtr=0;colCtr<mapCols;colCtr++){
				var tileId = tileMap[rowCtr][colCtr]+mapIndexOffset;
				var sourceX = Math.floor(tileId % 8) *32;
				var sourceY = Math.floor(tileId / 8) *32;
				context.drawImage(tileSheet, sourceX, sourceY,32,32,colCtr*32,rowCtr*32,32,32);
			}
		}

		context.save();
		context.setTransform(1,0,0,1,0,0)
		context.translate(x+16, y+16);

		var angleInRadians =rotation * Math.PI / 180;

		context.rotate(angleInRadians);

		var sourceX=Math.floor(animationFrames[frameIndex] % 8) *32;
		var sourceY=Math.floor(animationFrames[frameIndex] / 8) *32;

		y = y+dy;
		x = x+dx;


		context.drawImage(tileSheet, sourceX, sourceY,32,32,-16,-16,32,32);

        dy = 0;
		dx = 0;

		if(keyDown == true){
		frameIndex++;
		}
		if (frameIndex ==animationFrames.length) {
		   frameIndex=0;
		}
		context.restore();
		keyDown = false;
	}

	function startUp(){
		setInterval(drawScreen, 10 );
	}

	document.onkeydown=function(e){

		e=e?e:window.event;
		console.log(e.keyCode + "down");

		switch (e.keyCode){
			case 38:
				//up
				if (rotation == 0){
				dy-=8; }
				keyDown = true;
				rotation = 0;
				break;
			case 40:
				//down
				if (rotation == 180){
				dy+=8; }
				keyDown = true;
				rotation = 180;
				break;
			case 37:
				//left
				if (rotation == 270){
				dx-=8; }
				keyDown = true;
				rotation = 270;
				break;
			case 39:
				//right
				if (rotation == 90){
				dx+=8; }
				keyDown = true;
				rotation = 90;
		}
	}
}
</script>
</head>
<body>
<div style="position: absolute; top: 50px; left: 50px;">
<canvas id="canvas" width="640" height="480">
 Your browser does not support the HTML 5 Canvas.
</canvas>
</div>
</body>
</html>