<!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;
}
分享到：
相关推荐
用键盘控制DIV，红色方块为键盘操作区域，您可以进行如下操作： 上：↑ 下：↓ 左：← 右：→ Ctrl + 1 : 背景变为绿色 Ctrl + 2 : 背景变为黄色 Ctrl + 3 : 背景变为蓝色 Ctrl + ↑ : 放大 Ctrl + ↓ : 缩小 ...
本文实例讲述了js实现键盘控制DIV移动的方法。分享给大家供大家参考。具体分析如下： css样式部分： 代码如下:<style type=”text/css”> html,body{overflow:hidden;} body{margin:0;padding:0;} pre{color...
本文实例讲述了jQuery实现Div拖动+键盘控制综合效果的方法。分享给大家供大家参考。具体实现方法如下： 代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ...
主要给大家介绍了如何利用原生js实现键盘控制div移动，并且解决在移动过程中的停顿问题，文中给出了详细的示例代码，相信对大家的理解和学习很有帮助，下面跟着小编一起来看看吧。
本文实例为大家分享了js上下左右键盘控制div移动的具体代码，供大家参考，具体内容如下 描述： div通过键盘事件上下左右实现div块的移动 效果： 实现： js： var Method=(function () { return { EVENT_ID:...
利用键盘码来控制div移动源码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box { height: 100px; width: ...
键盘控制层的移动</title> <style type=”text/css”> <!– #Div { position:absolute; width:238px; height:135px; left:[removed](body.clientWidth – this.offsetWidth)/2); top:[removed]...
js自动移动图片，键盘可控制方向
主要介绍了jQuery实现通过方向键控制div块上下左右移动的方法,涉及jQuery结合键盘事件响应动态修改页面元素属性相关操作技巧,需要的朋友可以参考下
使用鼠标选中多空间页面的某一个按键，使用方向键进行该控件的多方向的移动
FPGA控制PS2键盘verilog设计Quartus9.1工程源码+设计说明文件，可以做为你的学习设计参考。 1. 这个实例通过开发板上面的PS/2接口接收键盘输入的数据，在LCD上面显示出来； 2. 工程在project文件夹里面,打开工程； 3...
看完这些代码就会对浏览器里的键盘控制有所了解了。 当然该段代码的最大价值还是让我们了解到网页游戏的大概写法，而算法其实是最重要的，把一个游戏的设想变为一堆包含许多的函数的结构化的代码，是值得我们借鉴...
用途您可以将此插件与input(text)或div var calObject = $("#cal").sCalendar({// default settings here});使用calObject可以调用其方法。默认设置设置默认选择日期defaultDate: moment() // or new Date()设置一周...
里面代码完成了百度搜索功能的基本功能，包括键盘控制上下选值的功能，以及完成对IE中DIV无法覆盖SELECT的问题。如果有什么更好的建议请留言，谢谢！