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运行整个块onload）。

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

似乎工作正常，除非你通过＆＃34;地板＆＃34;，它会捕捉到与地板相同的Y位置。由于盒子的注册点位于左上方，因此它将位于地板下方。我添加了盒子的高度，它停在预定的位置。

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

我还删除了密钥处理程序中的其他stage.update()次调用。滴答中的那个就足够了，因为它一直在运行。

与EaselJS的碰撞问题

1 个答案: