Question

我做了一个小网站，看起来应该是一个小游戏。它就是一个男人，你可以向右走（这是正在移动的背景）并让他跳跃。我已经放置了一个盒子，所以你必须跳过它才能继续。

现在我希望他能够站在盒子上，如果他没有一直跳到盒子里。 - 我正在使用一个动画功能来进行跳跃，有没有办法说明如果他在下降的路上在x1和x2之间，那么只能将下降设置为100 px而不是所有200 px下降？

The site is right here! （使用行走箭头键和空格键进行跳转）

这是我让他移动和跳跃的剧本：

$(window).load(function(){
var canvas = $("#canvas");
var man = $("#man");
var distance_walked = 0;
var keyStack = {};

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

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

updateCanvas = function() {
    //is key 39 pressed?
    if(keyStack[39]) {
        man.css('background-position', '-87px 0');

        if(canvas.css('margin-left') != '-2214px') {
            canvas.stop().animate({
                marginLeft: "-=18px"
            }, 1);
            distance_walked += 1;
            console.log('Distance moved:' + distance_walked);
        }

        if((canvas.css('margin-left') >= '-2214px') && (man.css('bottom') > '180px')) {
            canvas.stop().animate({
                marginLeft: "-=18px"
            }, 1);
            distance_walked += 1;
        }
    }
    //is key 37 pressed?
    if(keyStack[37]) {
        man.css('background-position', '-174px 0');

        if((canvas.css('margin-left') < '0px') && (canvas.css('margin-left') != '-2448px')) {
            canvas.stop().animate({
                marginLeft: "+=18px"
            }, 1)
            distance_walked -= 1;
        }

        if((canvas.css('margin-left') <= '-2448px') && (man.css('bottom') > '180px')) {
            canvas.stop().animate({
                marginLeft: "+=18px"
            }, 1)
            distance_walked -= 1;
        }
    }

    //is key 32 pressed?
    if(keyStack[32]) {
        if(!man.data('lock')) {
            man.data('lock', true);
                man.stop().animate(
                    {
                        bottom: 300 + 'px'
                    },
                    800,
                    function() {
                        man.stop().animate({
                            bottom: 120 + 'px'
                        }, 400, function() {
                            man.data('lock', false);   
                        });
                    }
                );
        }
    }

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

updateCanvas();

});

Answer 1

如果您打算继续使用这种方法，那么在盒子上着陆并不可行。想象一下，你的角色在天空中，就在他飞行的顶峰时：就是你的“底部：300 +'px'”动画停止，然后回调的动画被触发。你必须知道那一刻的着陆X坐标，以检查碰撞，从而检查着陆Y坐标，这是 - 考虑到你当前的模型 - 是不可能的，因为我可以在坠落期间将特征移动到任何地方。

一般来说，这种做法确实偏离了道路。我的意思是，这实际上不是实现任何游戏的方式。是的，我知道你想要做一个概念验证，或者只是用一些jQuery代码和CSS抵消来调整一些，但是你试图去的越远，你就越会纠结于这些腐烂的把握，并且燃烧时间思考关于你不能或几乎无法实现的功能。

Answer 2

所以我能想出这个！首先，我做了一些额外的变量

var ground_height = 120;
var jump_height = 170;
var jump = ground_height + jump_height;
var fall = jump - jump_height;

然后我更改了跳转动画以使用这样的计算函数：

if((parseInt(canvas.css('margin-left'), 10) < '-2214') && (parseInt(canvas.css('margin-left'), 10) > '-2448')) {
            ground_height = 200;
            jump = ground_height + jump_height;
            fall = jump - jump_height;
}

我必须做两个额外的if声明，让他从每个网站上的框中掉下来像这样：

if((ground_height == 200) && (parseInt(canvas.css('margin-left'), 10) >= '-2214')) {

        ground_height = 120;
        jump = ground_height + jump_height;
        fall = jump - jump_height;

        man.animate({
            bottom: ground_height + 'px'
        },200);   
}

if((ground_height == 200) && (parseInt(canvas.css('margin-left'), 10) <= '-2448')) {

        ground_height = 120;
        jump = ground_height + jump_height;
        fall = jump - jump_height;

        man.animate({
            bottom: ground_height + 'px'
        },200);
}

最后我需要另一个if声明让他能够在他倒地后走路，看起来像这样：

if(parseInt(canvas.css('margin-left'), 10) <= '-2448') {
            canvas.stop().animate({
                marginLeft: "-=18px"
            }, 1);
}

瓦沃里亚！这对我来说是三重奏，我在这里上传了工作结果： WORKING RESULT 并扩展了一点，欢迎您检查代码并采取您需要的任何内容：）

如果声明里面有动画

2 个答案: