我的形状从地板跌落或消失。 我的代码很简单,如果复制和粘贴,您将能够看到所有内容。 无论如何,听到的是代码。 我在想,我可能没有向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.

===============>>#1 票数:1

我使用您的代码创建了一个快速的JSFiddle(只需要删除init,因为JSFiddle会在加载整个块时运行它)。

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

看起来工作正常,除非您通过“地板”,它将捕捉到与地板相同的Y位置。 由于盒子的注册点在左上角,所以它将在地板下。 我添加了盒子的高度,它停在了预期的位置。

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

我还删除了stage.update()的其他stage.update()调用。 刻度线中的一个就足够了,因为它不断运行。

  ask by jermaine berkley translate from so

未解决问题?本站智能推荐:

1回复

easyljs检测冲突两个矩形

即时消息试图检测与用easyljs创建的两个形状的碰撞:但每次-在日志控制台中都为假! 有人可以描述为什么吗? 以及检测碰撞侧(左|右|上|下)的最佳方法是什么。 <!DOCTYPE html> <html> <head> <titl
1回复

EaselJs动画问题

这是我第一次学习EaselJ。 我在使子画面与数据结构中列出的五个动画建立动画时遇到问题。 有人知道我在做什么错吗? 链接: 我的代码
2回复

EaselJS getObjectUnderPoint和缩放CSS问题

我在一个画布上有一个舞台和一个容器。 在舞台内,我添加了一个包含两个矩形的Container 。 我将一个函数绑定到舞台的stagemousedown事件,该事件通过getObjectUnderPoint函数返回事件发生的坐标下的形状。 HTML: 初始化舞台,容器和两个矩
1回复

EaselJs的许多精灵类的性能问题

我想问一问easyljs是否对许多精灵类对象都有性能问题? 从我的codepen演示看来,它的代码严重滞后...如下所示: 通常我只用3个不同的精灵图像创建4个精灵类。 但是没想到它会如此落后。
1回复

是否有人在使EaselJS正常运行方面遇到问题

我刚刚开始尝试使用EaselJS,并且正在遵循在线找到的教程。 据我所知,我已经完全复制了代码,并且一切正常,直到我添加了“ addEventListener”功能命令。 之后,我得到一块空白画布。 控制台中也没有错误。 (顺便说一句,我也加载了jQuery,但是问题是在添加jQuery
2回复

EaselJS文字包装

在许多画布框架中,都有一个maxWidth和maxHeight来控制自动换行。 在EaselJS中,设置maxWidth是微不足道的,但是有没有办法将maxHeight设置为文本? (有效率的)
2回复

Javascript - easelJS - 如何removeAllListeners

在我的代码的开头,我设置了一个tick事件。 以下3行有效。 我想删除代码末尾的监听器。 我试着这样称呼它,但它不起作用: Firefox控制台说我createjs.Ticker.removeAllListeners is not a function 。 所以我试图切换到
1回复

EaselJS与TweenJS与MovieClip

我遇到错误: Uncaught TypeError:尝试包含movieclip-0.7.0.js时, 无法调用未定义的方法'installPlugin' 。 我的html中包含以下内容: tween.min.js的版本为0.5.0(我安装了bower,但由于某些原因,bower [r1
1回复

Easeljs HitTest和hitRadius

这是我的代码: 对于hitTest,我使用以下代码: 问题:当玩家在怪物下方时,我会收到“命中”消息,但我希望它在玩家击中怪物时起作用,而不是在怪物下方时起作用。 我一直在和Player&Monster的regX和regY一起玩,但似乎不起作用。 有人知道解决方案吗?
1回复

Easeljs捕捉到网格

我正在使用HTML5构建应用程序,其中绘制了网格。 我上面有一些可以移动的形状。 我要做的是将对象移动到形状时将它们捕捉到定义的某些点。 我尝试的是将锚点保存在数组中,当放置形状时,我在最近的锚点上绘制形状。 Easeljs是我的主要js库,因此我想保留它,但是如果需要,我可以将另一个与