arcollector/rotation.and.translatation.in.2d.space.in.js.html

## rotation.and.translatation.in.2d.space.in.js.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Translation and rotation algorithm in a 2D space</title>
		<style>
			body {
				background: peru;
				font: 12px Tahoma, Ubuntu;
			}

			.screen {
				width: 320px;
				height: 200px;
				margin: 100px auto 0;
				border: 1px solid blue;
				background: pink;
				position: relative;
			}
			.sprite {
			    border-color: red green blue yellow;
			    border-style: solid;
			    border-width: 15px;
				position: absolute;
				top: 75px;
				left: 135px;
			}
			.sprite:after {
				content: "";
				position: absolute;
				border-color: pink pink red pink;
				border-style: solid;
				border-width: 15px;
				left: -15px;
    			top: -45px;
			}

			.x-axis {
				width: 320px;
				height: 5px;
				background: black;
				position: absolute;
				top: -15px;
			}
			.x-axis:before {
				content: "320px (x axis)";
				font-size: 10px;
				font-weight: 600;
				color: #fff;
				position: absolute;
				top: -12px;
				left: 130px;
			}
			.x-axis:after {
			 	border-color: peru peru peru black;
			    border-style: solid;
			    border-width: 8px;
			    content: "";
			    position: absolute;
			    right: 0;
			    top: -6px;
			}
			.y-axis {
				height: 200px;
				width: 5px;
				background: black;
				position: absolute;
				top: 0;
				left: -15px;
			}
			.y-axis:before {
				content: "200px (y axis inverted)";
				font-size: 10px;
				font-weight: 600;
				color: #fff;
				position: absolute;
				top: 90px;
				left: -70px;
				transform: rotate(-90deg);
				-webkit-transform: rotate(-90deg);
				white-space: nowrap;
			}
			.y-axis:after {
			 	border-color: black peru peru peru;
			    border-style: solid;
			    border-width: 8px;
			    content: "";
			    position: absolute;
			    bottom: 0;
			    left: -6px;
			}

			.msg {
				width: 320px;
				margin: 10px auto;
				text-align: center;
				font-size: 15px;
			}
		</style>
	</head>
	<body>

		<div class="screen">
				<div class="x-axis"></div>
				<div class="y-axis"></div>

				<div class="sprite"></div>
		</div>

		<div class="msg">
			Use the arrows keys to move the sprite
		</div>

	</body>
</html>
<script>

	// used to convert angles to radians
	var PIOVER180 = Math.PI / 180;

	var $sprite = document.querySelector( '.sprite' );
	var currentFrame = 0;
	var MAXFRAMES = 16;
	var baseAngle = 360 / MAXFRAMES;
	var speed = 4.0;

	function translate( xDirection, yDirection, type ) {
		var x, y, currentAngle, dx, dy;

		x = $sprite.offsetLeft;
		y = $sprite.offsetTop;

		currentAngle = baseAngle * currentFrame * PIOVER180;
		dx = Math.sin( currentAngle ) * speed;
		dy = Math.cos( currentAngle ) * speed;

		$sprite.style.left = x + ( dx * xDirection ) + 'px';
		$sprite.style.top = y + ( dy * yDirection ) + 'px';

		console.log( type, '('+x+','+y+')', 'currentAngle:', currentAngle, 'dx:',dx, 'dy:',dy, '--> ('+$sprite.offsetLeft+','+$sprite.offsetTop+')' );
	}

	function checkRotateLeftLimit() {
		currentFrame--;
		if( currentFrame < 0 ) {
			currentFrame = MAXFRAMES-1;
		}
	}

	function checkRotateRightLimit() {
		currentFrame++;
		if( currentFrame > MAXFRAMES-1 ) {
			currentFrame = 0;
		}
	}

	function rotate( type ) {
		$sprite.style.transform = 'rotate( ' + ( baseAngle * currentFrame ) + 'deg )';
		$sprite.style.webkitTransform = 'rotate( ' + ( baseAngle * currentFrame ) + 'deg )';

		console.log( type, $sprite.style.transform );
	}

	var LEFT = 37;
	var RIGHT = 39;
	var UP = 38;
	var DOWN = 40;
	document.onkeydown = function( e ) {
		var ch = e.keyCode;

		if( ch == LEFT ) {
			checkRotateLeftLimit();
			rotate( 'LEFT' );

		} else if( ch == RIGHT ) {
			checkRotateRightLimit();
			rotate( 'RIGHT' );

		} else if( ch == UP ) {
			translate( 1, -1, 'UP' );

		} else if( ch == DOWN ) {
			translate( -1, 1, 'DOWN' );

		}
	};

</script>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Translation and rotation algorithm in a 2D space</title>
	<style>
	body {
	background: peru;
	font: 12px Tahoma, Ubuntu;
	}

	.screen {
	width: 320px;
	height: 200px;
	margin: 100px auto 0;
	border: 1px solid blue;
	background: pink;
	position: relative;
	}
	.sprite {
	border-color: red green blue yellow;
	border-style: solid;
	border-width: 15px;
	position: absolute;
	top: 75px;
	left: 135px;
	}
	.sprite:after {
	content: "";
	position: absolute;
	border-color: pink pink red pink;
	border-style: solid;
	border-width: 15px;
	left: -15px;
	top: -45px;
	}

	.x-axis {
	width: 320px;
	height: 5px;
	background: black;
	position: absolute;
	top: -15px;
	}
	.x-axis:before {
	content: "320px (x axis)";
	font-size: 10px;
	font-weight: 600;
	color: #fff;
	position: absolute;
	top: -12px;
	left: 130px;
	}
	.x-axis:after {
	border-color: peru peru peru black;
	border-style: solid;
	border-width: 8px;
	content: "";
	position: absolute;
	right: 0;
	top: -6px;
	}
	.y-axis {
	height: 200px;
	width: 5px;
	background: black;
	position: absolute;
	top: 0;
	left: -15px;
	}
	.y-axis:before {
	content: "200px (y axis inverted)";
	font-size: 10px;
	font-weight: 600;
	color: #fff;
	position: absolute;
	top: 90px;
	left: -70px;
	transform: rotate(-90deg);
	-webkit-transform: rotate(-90deg);
	white-space: nowrap;
	}
	.y-axis:after {
	border-color: black peru peru peru;
	border-style: solid;
	border-width: 8px;
	content: "";
	position: absolute;
	bottom: 0;
	left: -6px;
	}

	.msg {
	width: 320px;
	margin: 10px auto;
	text-align: center;
	font-size: 15px;
	}
	</style>
	</head>
	<body>

	<div class="screen">
	<div class="x-axis"></div>
	<div class="y-axis"></div>

	<div class="sprite"></div>
	</div>

	<div class="msg">
	Use the arrows keys to move the sprite
	</div>

	</body>
	</html>
	<script>

	// used to convert angles to radians
	var PIOVER180 = Math.PI / 180;

	var $sprite = document.querySelector( '.sprite' );
	var currentFrame = 0;
	var MAXFRAMES = 16;
	var baseAngle = 360 / MAXFRAMES;
	var speed = 4.0;

	function translate( xDirection, yDirection, type ) {
	var x, y, currentAngle, dx, dy;

	x = $sprite.offsetLeft;
	y = $sprite.offsetTop;

	currentAngle = baseAngle * currentFrame * PIOVER180;
	dx = Math.sin( currentAngle ) * speed;
	dy = Math.cos( currentAngle ) * speed;

	$sprite.style.left = x + ( dx * xDirection ) + 'px';
	$sprite.style.top = y + ( dy * yDirection ) + 'px';

	console.log( type, '('+x+','+y+')', 'currentAngle:', currentAngle, 'dx:',dx, 'dy:',dy, '--> ('+$sprite.offsetLeft+','+$sprite.offsetTop+')' );
	}

	function checkRotateLeftLimit() {
	currentFrame--;
	if( currentFrame < 0 ) {
	currentFrame = MAXFRAMES-1;
	}
	}

	function checkRotateRightLimit() {
	currentFrame++;
	if( currentFrame > MAXFRAMES-1 ) {
	currentFrame = 0;
	}
	}

	function rotate( type ) {
	$sprite.style.transform = 'rotate( ' + ( baseAngle * currentFrame ) + 'deg )';
	$sprite.style.webkitTransform = 'rotate( ' + ( baseAngle * currentFrame ) + 'deg )';

	console.log( type, $sprite.style.transform );
	}

	var LEFT = 37;
	var RIGHT = 39;
	var UP = 38;
	var DOWN = 40;
	document.onkeydown = function( e ) {
	var ch = e.keyCode;

	if( ch == LEFT ) {
	checkRotateLeftLimit();
	rotate( 'LEFT' );

	} else if( ch == RIGHT ) {
	checkRotateRightLimit();
	rotate( 'RIGHT' );

	} else if( ch == UP ) {
	translate( 1, -1, 'UP' );

	} else if( ch == DOWN ) {
	translate( -1, 1, 'DOWN' );

	}
	};

	</script>