调用 object.width 在 JavaScript 中返回 NaN

Question

我目前正在开发一款与火箭飞船有关的游戏，该火箭飞船四处移动并且物体（圆圈）从顶部掉落。这个游戏的目标是不要撞到从屏幕上掉下来的物体。在编写我的碰撞算法时，我运行遇到了问题。

我已经声明了 var hit = false;在我的代码顶部我还将所有圆圈放入一个名为 projectiles 的数组中。

我相信我的逻辑是正确的，但我发现在调用 p.width 或 ship.width 时它 returns NaN。我试过使用 offsetWidth 也没有用。我想知道如何才能获得我的对象的宽度

底部的 else 语句只是检查 .width 是否返回正确的数字。一旦我让它工作，它将被删除并替换为碰撞算法的最后部分。

function checkCollision()
{

    for (i = 0; i < projectiles.length; i++) {
        var p = projectiles[i];
        if((p.x + p.width) < ship.x)
        {
            hit = false;
        }
        else if(p.x > (ship.x + ship.width))
        {
            hit = false;
        }
        else if(p.y > (ship.y + ship.height))
        {
            hit = false;
        }
        else if((p.y + p.height) < ship.y)
        {
            hit = false;
        }
        else {
            console.log(ship.x + ship.width);
        }

Answer 1

在 createjs.Bitmap there do not exist properties for .width and .height. Instead access it's .image (HTMLImageElement) 属性的文档中定义了宽度和高度属性：ship.image.width 和 ship.image.height。

Answer 2

如果您的对象是 EaselJS 位图，您可以使用 getBounds() 检索物理尺寸。此方法适用于一些 EaselJS 显示对象（即，不适用于 Shapes，准确度因 Text 而异）。

var bounds = ship.getBounds();
var w = bounds.width;

备注：

根据@Spencer 的消息，您可以访问 .image，并获得 width/height，但它将是图像的原始大小，因此如果您转换位图实例，或任何的父容器，该值将是错误的。 getBounds 会考虑尺度变换（如果存在的话）
如果旋转项目，值可能不正确。
边界基于注册点，因此 x/y 可能不为零。
如果图像尚未加载

对于你的弹丸，如果它是一个形状，边界将永远是空的，但如果你知道它们，你可以手动设置它们，它们将是正确的calculated/transformed:

var p = new createjs.Shape();
p.graphics.beginFill("red").drawCircle(0,0,20);
p.setBounds(new createjs.Rectangle(-20,-20,40,40));

这里有一些关于为什么没有 .width 或 .height 的信息：http://blog.createjs.com/update-width-height-in-easeljs/

调用 object.width 在 JavaScript 中返回 NaN

calling object.width is returning NaN in JavaScript

javascript

arrays

width

collision

createjs