Рисование простого круга с использованием 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

это указывает на недоступную страницу, поэтому она не работает в скрипке

---

Попробуйте загрузить исходный код CraftyJS, Box2dweb и Box2d

Попробуйте и посмотрите, работает ли это для вас.

Хорошо, ваш код работает, похоже, что справочная библиотека crafty+box2d - это мод, созданный пользователем, который создал игру в понг.

Вы забыли поставить ширину 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");
                    });

С другой стороны, если вы хотите, чтобы контур рамки, поедая кружок, удалите текст ,color в строковом аргументе Crafty.e и удалите свойство.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");
                    });

Надеюсь это поможет:)