<!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;
}