1

我试图在这里通过添加“重力”来构建最佳答案，这样除非按下键，否则框总是向下移动。

我已经摆弄了几个小时了，我无法弄清楚。在前面的代码中，他将两个变量发送到 calculateNewValue 函数，分别用于 css 位置的顶部和左侧。

我想我可以简单地将这两个真/假按键测试分成四个，然后在向上箭头为假时添加 +1，因此除非你告诉它不要，否则盒子总是会掉下来。

它几乎可以工作，但盒子向下和向右移动，而不是向下移动。而重力不是那样工作的。

这一定与 top 和 left 被用来在两个方向上移动盒子有关。但是，如果事件处理程序只存储一个键的键码，那么所有其他测试不会返回 false 吗？我怎样才能让它不动？

$(function(){

var pane = $('#pane'),
    box = $('#box'),
    maxValue = pane.width() - box.width(),
    keysPressed = {},
    distancePerIteration = 3;

function calculateNewValue(oldValue) {
    var newValue = parseInt(oldValue, 10)
                   - (keysPressed[37] ? distancePerIteration : 0)
                   - (keysPressed[38] ? distancePerIteration : 0)
                   + (keysPressed[39] ? distancePerIteration : 0)
                   + (keysPressed[40] ? distancePerIteration : 1)
    return newValue < 0 ? 0 : newValue > maxValue ? maxValue : newValue;
}

$(window).keydown(function(event) { keysPressed[event.which] = true; });
$(window).keyup(function(event) { keysPressed[event.which] = false; });

setInterval(function() {
    box.css({
        left: function(index ,oldValue) {
            return calculateNewValue(oldValue);
        },
        top: function(index, oldValue) {
            return calculateNewValue(oldValue);
        }   
    });
}, 20);

});
4

2 回答 2

0

通常你只使用 keyup() 函数。然后按键只会触发一个事件。只有在特殊情况下才需要使用 keydown()。

于 2013-02-01T00:40:03.660 回答
0

你的代码有缺陷。每 20 毫秒，您每次修改框的左侧/顶部相同的量。

根据您设置代码的方式，每次更新 CSS 时，left 和 top 值总是增加相同的量 - 因此框将始终向上或向下移动，具体取决于您是否按下左/上键。

如果您只是想上下移动框，那么您可能想要更改代码而不是修改 left 属性 - 然后将 calculateNewValue 更改为不将 ascii 用于左/右箭头。

于 2013-02-01T00:56:13.307 回答