проблемы с столкновением с EaselJS

Question

Моя фигура либо падает через пол, либо исчезает. Мой код достаточно прост, и если вы копируете и вставляете, вы сможете видеть все. Во всяком случае, слышится код. Я думаю, что я, вероятно, ничего не добавил к столкновению, находящемуся в функции галочки.

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 работает весь блок загрузки).

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

Это, кажется, работает нормально, за исключением того, когда вы проходите «пол», он будет привязываться к одной и той же позиции Y, как пол. Поскольку точка регистрации коробки находится в верхнем левом углу, она будет ниже пола. Я добавил высоту коробки, и она останавливается там, где она предназначена.

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

Я также удалил дополнительные stage.update() вызовы, которые были в keyhandler. Одного в тике будет достаточно, так как он постоянно работает.