javascript - EaselJS 的碰撞问题

Question

我的形状要么从地板上掉下来，要么消失。我的代码很简单，如果您复制并粘贴，您就可以看到所有内容。无论如何，听到的是代码。我想我可能没有在tick函数中的碰撞中添加一些东西。

var box, gravity, stage;
stage = new createjs.Stage(document.getElementById('canvas'));
gravity = 10;

// this function is called onload in the body tag
function init(){
    box = new createjs.Shape();
    box.graphics.beginFill('blue').drawRect(0,0,50,50);
    stage.addChild(box);
    box.x = 50;
    box.y = 50;
    game();
}

function game(){

    window.addEventListener('keydown', keydownHandler);
    createjs.Ticker.addEventListener('tick', tick);

    var floor;

    floor = new createjs.Shape();
    floor.graphics.beginFill('red').drawRect( 0, 0, 500, 20);
    floor.x = 0;
    floor.y = 480;
    stage.addChild(floor);


function keydownHandler(e){
    if(e.keyCode === 65 || e.keyCode === 37){
    box.x -=5;
    stage.update();
    console.log(box.x);
    } else if(e.keyCode === 68 || e.keyCode === 39){
    box.x += 5;
    stage.update();
    console.log(box.x);
    } else if(e.keyCode === 87 || e.keyCode === 38){
    var lBox;
    box.y -= 50;
    lBox = new createjs.Shape();
    lBox.graphics.beginFill('blue').drawRect(box.x - 16, box.y + 50, 16,         15);
    stage.addChild(lBox);
    stage.update();
    console.log(box.y);
    }

}

    function tick(){

    console.log(box.y);
    console.log(floor.y);

    box.y += gravity;

    var collision;
    collision = floor.y;
    // Here is the problem right here!

    if(box.y + 45 >= collision){
    box.y = floor.y;
    }
    stage.update();
    }

}

I also think I use stage update too much, so if there is a SIMPLE way,            because I'm new please feel free to demonstrate that as well.thanks in advance.

Answer 1

我使用您的代码创建了一个快速 JSFiddle(只需删除 init，因为 JSFiddle 运行整个 block 加载)。

http://jsfiddle.net/lannymcnie/mkwo8kdv/

它似乎工作得很好，除了当你经过“地板”时，它会捕捉到与地板相同的 Y 位置。由于盒子的注册点位于左上角，因此它将位于地板下方。我添加了盒子的高度，它停在了预期的位置。

if (box.y + 45 >= collision) {
    box.y = floor.y - 50;
}

我还删除了 key 处理程序中的附加 stage.update() 调用。勾选中的一个就足够了，因为它不断运行。