我目前正在尝试在 keydown 上创建一个可移动的 div。我已经设法使用 Jquery 处理 keydown 功能。但是,我想创建 div 不能移动并且必须绕过的障碍。
有点像 div 的小地图。
我一直在使用 JSfiddle 测试我的代码,如果我收到任何帮助,我将不胜感激:
http://jsfiddle.net/bDMnX/828/
HTML:
<div id="pane">
<div id="barrier"></div>
<div id="box"></div>
</div>
CSS:
#pane {
position:relative;
width:300px; height:300px;
border:2px solid red;
}
#box {
position:absolute; top:140px; left:140px;
width:20px; height:20px;
background-color:black;
}
#barrier{
position:absolute; top:50px; left:50px;
width:50px; height:50px;
background-color:grey;
}
JS:
var pane = $('#pane'),
box = $('#box'),
w = pane.width() - box.width(),
d = {},
x = 3;
function newv(v,a,b) {
var n = parseInt(v, 10) - (d[a] ? x : 0) + (d[b] ? x : 0);
return n < 0 ? 0 : n > w ? w : n;
}
$(window).keydown(function(e) { d[e.which] = true; });
$(window).keyup(function(e) { d[e.which] = false; });
setInterval(function() {
box.css({
left: function(i,v) { return newv(v, 37, 39); },
top: function(i,v) { return newv(v, 38, 40); }
});
}, 20);
我可能没有为此使用最好的方法,并且愿意接受有关改进或改进此代码的方法的反馈。
我希望能够阻止#box div 触摸/越过#barrier。
先感谢您。