用键盘控制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毫秒调用一次gameloopplane.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)";}// movementif (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;}
?