EaselJS 的碰撞问题答案

【问题标题】：collision problems with EaselJSEaselJS 的碰撞问题
【发布时间】：2015-07-28 11:53:11
【问题描述】：

我的形状不是从地板上掉下来就是消失了。我的代码很简单，如果你复制粘贴，你就能看到一切。无论如何，听到的是代码。我在想我可能没有在 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.

【问题讨论】：

非常感谢兰尼！！！如果您有时间，请快速跟进。现在地板正在工作，我应该制作一系列平台来创建类似地板的对象的关卡，还是更实用的方式来加载关卡并让它们发生碰撞？
是的，跟踪一个数组或平台集合会起作用。如果你有太多，它可能会变得昂贵。如果你想构建一个平台游戏，也许可以查看 Box2D——CreateJS GitHub 中有一个示例。 github.com/CreateJS/sandbox/tree/master/EaselJS_Box2dWeb

标签： javascript collision-detection easeljs createjs

【解决方案1】：

我使用您的代码创建了一个快速 JSFiddle（只需删除初始化，因为 JSFiddle 运行整个块 onload）。

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

它似乎工作正常，除了当你通过“地板”时，它会捕捉到与地板相同的 Y 位置。由于盒子的注册点在左上角，所以它会在地板下方。我添加了盒子的高度，然后它停在了预期的位置。

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

我还删除了 keyhandler 中的额外 stage.update() 调用。 tick 中的一个就足够了，因为它会不断运行。

【讨论】：