Question

我正在尝试创建一个非常简单的2D游戏，您可以自动向前跑，然后按下按键以避开沿途的障碍物。

到目前为止我做到了这一点。唯一的问题是跳跃“停止”向前运动。例如，如果您按住向上按钮，则会停止整个游戏，并且像鸟一样向上飞行......

有人可以就如何修复它给我一些建议吗？如果有人可以指导我如何在球场上放置1-2个随机障碍并重新开始比赛，我也会喜欢它，如果用户击中了这些障碍，也会显示剩下的总位置。

我的计划是每次完成课程时加快游戏速度！

提前多多感谢：）

<div style='' id='map'></div>

$(function(){
var unjump = function(){
        $('#player').stop().animate({
            bottom: '33'
        });
}
var jump = function(){
        $('#player').stop().animate({
            bottom: '+=100'
        }); 
setTimeout(unjump, 1000);
}

$(document).keydown(function(e) {
    switch(e.which) {
        case 38: // up
        jump();
        break;
    }
});

var player = '<div id="player"></div>';
$("#map").append(player);
function run(){
var position = $('#player').position();
var width = $('#map').width();
if (position.left > width){
$("#player").css( "left", 0 );
}
        $('#player').stop().animate({
            left: '+=200'
        });
}       
run = setInterval(run, 100);

});

Answer 1

DEMO

主要错误在于玩家的css定位

css代码

#player{
    width:10px;
    height:10px;
    border:solid;
    position:absolute;
    bottom:0px;
}
#map{
    position:relative;
}

html代码

<div style='border:solid ;height:100px' id='map'></div>

js代码

var interval = null;
var interval2 = null;

$(function () {

    var player = '<div id="player"></div>';
    $("#map").append(player);

    var unjump = function () {
        $('#player').stop().animate({
            bottom: '0'
        });
    };
    var jump = function () {
        $('#player').stop().animate({
            bottom: '+=100'
        }, 500);
          interval2 = setTimeout(unjump, 500);
    };
    $(document).keydown(function (e) {
        switch (e.which) {
            case 38: // up
                jump();
                break;
        }
    });


    function run() {

        var width = $('#map').width();
        if ($('#player').position().left > width) {
            $("#player").css("left", 0);
        }
        $('#player').stop().animate({
            left: '+=10'
        });
    }
    interval = setInterval(run, 500);

});

Answer 2

试试这个： https://fiddle.jshell.net/u8deLxkz/2/

主要问题是仅在没有其他动画正在运行时执行运行动画。除此之外，我稍微整理了一下代码。

$(function(){
    //No need for two separate functions, left is handled here as well
    function jump(){
        $('#player').animate({
            bottom: '+=30',
            left: '+=10'
        },100).animate({
            bottom: '-=30',
            left: '+=10'
        },100);             
    }
    //I think keyup gives better results
    $(document).keyup(function(e) {
        switch(e.which) {               
                case 38: //up
                jump();
                break;
            }
        });
    var player = '<div id="player" style="width: 50px; height: 50px; background-color: blue; position:absolute; bottom:500px;"></div>';
    $("#map").append(player);
    function run(){
        var position = $('#player').position();
        var width = $('#map').width();
        $('#player').position()
        console.log('pos ' + position.left + "\nwidth: " + width);
        if (position.left > width){
            $("#player").finish();
            $("#player").css( "left", 0 );
        }
        //Continue with horizontal animation only if jumping is not in progress
        if(!$('#player').is(':animated') ){             
            $('#player').animate({
                left: '+=10'
            },100);
        }
    }       
    var go = setInterval(run, 100);
});

JQuery动画顶部和左侧同时（跳跃和运行）

2 个答案: