javascript - 使用 Crafty.js 和 Box2d 绘制一个简单的圆圈

Question

我正在尝试使用 box2d 和 crafty.js 绘制一个简单的圆圈，但我似乎无法绘制它这是jsfiddle:http://jsfiddle.net/B5UsC/2/

看这部分代码:

var ball = Crafty.e("2D, Canvas,Color, Box2D,ball")
                .attr({ x: 10, y: 15, z:5 })
                .color("#fff")
            .box2d({
                bodyType: 'dynamic',
                density: 1.0,
                friction: 2,
                restitution: 0.2,
                shape: 'circle'
            }).onContact("Floor",
                        function (data) { 
                        alert("Hi");
                        });

奇怪的是，alert 已执行，但球没有显示。我错过了什么请帮忙

Answer 1

外部资源

Box2dWeb-2.1.a.3.js

box2d.js

crafty.js

这会定向到 Unavailable Page这就是为什么它在 fiddle 中不起作用的原因

<小时/>

尝试下载源代码CraftyJS , Box2dweb和 Box2d

尝试看看这是否适合您。

好的，我让你的代码工作了，看来引用库 crafty+box2d 是制作 pong 游戏的用户制作的 mod。

您忘记将宽度 w 和高度 h 属性放入球对象的 .attr 中。

        var ball = Crafty.e("2D, Canvas,Color, Box2D,Ball")
            .attr({ x: 10, y: 15, z:5 , w:25,h:25 })
            .color("#dddddd")
        .box2d({
            bodyType: 'dynamic',
            density: 1.0,
            friction: 2,
            restitution: 0.2,
            shape: 'circle'
        }).onContact("Floor",
                    function (data) { 
                    alert("Hi");
                    });

另一方面，如果你想让盒子轮廓吃掉圆圈删除 Crafty.e 字符串参数中的文本 ,color 并删除 .color 属性

        var ball = Crafty.e("2D, Canvas,ball, Box2D,")
            .attr({ x: 10, y: 15, z:5 , w:25,h:25 })

        .box2d({
            bodyType: 'dynamic',
            density: 1.0,
            friction: 2,
            restitution: 0.2,
            shape: 'circle'
        }).onContact("Floor",
                    function (data) { 
                    alert("Hi");
                    });

希望这有帮助:)