用键盘统制div _Web前端

用键盘控制div

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>file</title>
<script src="../js/jQuery1.10.2.js"></script>
<script src="../js/file.js"></script>

<link rel="stylesheet" href="../css/file.css" />

<script>
	
</script>
</head>
<body>
	
	<div id=a></div>
	<div id=b></div>
</body>
</html>

var KEY = {
	UP : 38,
	DOWN : 40,
	LEFT : 37,
	RIGHT : 39,
	W : 87,
	S : 83,
	A : 65,
	D : 68
};

var plane = {};
plane.pressedKeys = [];
plane.deg = 0;

$(function() {
	// 设置interval用于每30毫秒调用一次gameloop
	plane.timer = setInterval(gameloop, 20);

	// 标记下pressedKeys数组里某键的状态是按下还是放开
	$(document).keydown(function(e) {
		plane.pressedKeys[e.which] = true;
	});
	$(document).keyup(function(e) {
		plane.pressedKeys[e.which] = false;
	});
});
function gameloop() {
	move();
}

function move() {
	// 方向

	if (plane.pressedKeys[KEY.LEFT]) {

		plane.deg-=2;
		document.getElementById("a").style.transform = "rotate(" + plane.deg
				+ "deg)";

	}
	if (plane.pressedKeys[KEY.RIGHT]) {
		plane.deg+=2;
		document.getElementById("a").style.transform = "rotate(" + plane.deg
				+ "deg)";
	}

	// movement
	if (plane.pressedKeys[KEY.W]) {
		var top = parseInt($("#a").css("top"));
		$("#a").css("top", top - 3);
	}
	if (plane.pressedKeys[KEY.S]) {
		var top = parseInt($("#a").css("top"));
		$("#a").css("top", top + 3);
	}
	if (plane.pressedKeys[KEY.A]) {
		var left = parseInt($("#a").css("left"));
		$("#a").css("left", left - 3);
	}
	if (plane.pressedKeys[KEY.D]) {
		var left = parseInt($("#a").css("left"));
		$("#a").css("left", left + 3);
	}
}

div#a {
	position: absolute;
	left: 100px;
	top: 400px;
	width: 30px;
	height: 100px;
	background-color: #115599;
	/*transform: rotate(90deg);
	-ms-transform:rotate(90deg); /* IE 9 */
	z-index: 100;

}

div#b {
	position: absolute;
	left: 100px;
	top: 300px;
	width: 50px;
	height: 50px;
	background-color: #669911;
}