我的HTML：

Question

所以我想创建一个小页面，你可以让一个人跳过一个盒子，它全部用CSS和jQuery。

如果按下右箭头键，整个背景向左移动，而左箭头键向左移动，我就这样做了，以使人产生幻觉。知道什么时候你打空间我改变了男人的最低位置让我看起来像是在跳跃。

但是当我击中太空时，它会停止移动效果，所以这个男人只是直接向下跳。

我的HTML：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>The man!</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript" src="jquery1.10.2.js"></script>
<script type="text/javascript" src="main_script.js"></script>
</head>
<body>
    <div id="canvas">
        <div id="grass"></div>
        <div id="box"></div>
        <div id="man"></div>
    </div>
</body>
</html>

我的CSS：

html, body {
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

#canvas {
    position: relative;
    min-width: 2500px;
    height: 100%;
}

#grass {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background: green;
}

#box {
    position: absolute;
    bottom: 100px;
    left: 2000px;
    width: 100px;
    height: 100px;
    background: brown;
}

#man {
    position: fixed;
    bottom: 100px;
    left: 500px;
    width: 73px;
    height: 161px;
    background-image: url(images/mand.png);
    background-repeat: no-repeat;
    background-position: 0 0;
        -webkit-transition: bottom 0.5s ease-in-out;
        -moz-transition: bottom 0.5s ease-in-out;
        -ms-transition: bottom 0.5s ease-in-out;
        -o-transition: bottom 0.5s ease-in-out;
        transition: bottom 0.5s ease-in-out;
}

我的剧本：

    $( document ).ready(function() {

    });

    $(document).keydown(function(event) {
    console.log("Key pressed: " + event.keyCode);

    if(event.keyCode == 39) {
        event.preventDefault();
        $("#canvas").animate({
        marginLeft: "-=10px"
      }, 1)
    }

    if(event.keyCode == 37) {
        event.preventDefault();
        if($("#canvas").css('margin-left') < '0px') {
            $("#canvas").animate({
            marginLeft: "+=10px"
            }, 1)
        }
    }

    if(event.keyCode == 32) {
        event.preventDefault();
        setTimeout(function() {
        $("#man").css("bottom", "300px");
        setTimeout(function() {
        $("#man").css("bottom", "100px");
        },500);},0); 
    }
});

我也做了一点小事：JSFiddle

Answer 1

你需要一个运行循环。在我的例子中，我使用了10ms的setTimeout，但这不是最好的解决方案。更好地使用animationFrame来做这样的事情。

但是这应该给你一个你想要的起点：

绑定keydown和keyup以构建keyStack：

var keyStack = {};

$(document).keydown(function (e) {
    keyStack[e.keyCode] = true;
});

$(document).keyup(function (e) {
    delete keyStack[e.keyCode];
});

生成一个循环来运行游戏：

updateCanvas = function() {
    //... your code to update your canvas

    //create a loop
    setTimeout(updateCanvas, 10);
}

然后开始循环：

updateCanvas();

例如： http://jsfiddle.net/Valtos/89mQc/6/

Answer 2

似乎它无法同时为2个向下键发送调用事件处理程序。实际上这是正常的（详见此处：JavaScript multiple keys pressed at once）。您需要处理keyDown和keyUp事件以切换这样的“运行”状态（伪代码！请参阅下面的小提示中的woking示例）：

$(document).keydown(function(event) {
    // switch your man to a "running" state
    startRunning();
})
.keyup(function(event) {
    // switch to a "hold" state
    stopRunning();
});

Full demo

Answer 3

因此，我已经将向上箭头添加为跳跃。

所以我开始工作的游戏是点击向上箭头。然后压制离开。所以，如果它已被压制，就放手压制。

Fiddle

if(event.keyCode == 32 || event.keyCode == 38) {
    event.preventDefault();
    $("#man").animate({
        bottom: 300
    }, 1000, "linear", function () {
        setTimeout(function () {
            $("#man").animate({
                bottom: 100
            }, 1000);
        }, 500);
    });
}

男人与keydown跳跃的幻觉

我的HTML：

我的CSS：

我的剧本：

3 个答案: