上からイメージが落下してきて溜まっていくようなJSを組んだサイト

Question

html5、jQueryを勉強中の初心者です。
とあるサイトの動きが楽しくて、自分のサイトで表現できないかと悪戦苦闘中の為
教えていただけると幸いです・・・。

リンク内容
こちらのサイトを参考にし、上から画像（お菓子）がぽろぽろと降ってきてその後停滞する動きをつけたく、
一旦ソースを見ながらコードを組んでいっているのですが自分のサイトだとお菓子の動きの部分だけが表示されません。
ディペロッパーツールでエラーを吐いている所も確認しましたが、js部分が難しく・・・
どこがどういった理由でエラーになっているのか、何かが足りなくて反映されないのでしょうか・・・。
また、お菓子が降ってこない理由がわかる方何卒お力添えを頂きたく思います。

###発生している問題・エラーメッセージ

Uncaught ReferenceError: Box2D is not defined
    at physics.js:2
(anonymous) @ physics.js:2

//box2dクラスの短縮変数
var b2Vec2 = Box2D.Common.Math.b2Vec2, b2AABB = Box2D.Collision.b2AABB, b2BodyDef = Box2D.Dynamics.b2BodyDef, b2Body = Box2D.Dynamics.b2Body, b2FixtureDef = Box2D.Dynamics.b2FixtureDef, b2Fixture = Box2D.Dynamics.b2Fixture, b2World = Box2D.Dynamics.b2World, b2MassData = Box2D.Collision.Shapes.b2MassData, b2PolygonShape = Box2D.Collision.Shapes.b2PolygonShape, b2CircleShape = Box2D.Collision.Shapes.b2CircleShape, b2DebugDraw = Box2D.Dynamics.b2DebugDraw, b2MouseJointDef = Box2D.Dynamics.Joints.b2MouseJointDef;

//クッキーの画像URLと頂点の座標
var cookieImages = {
    'logo': {
        'width': 420,
        'height': 211,
        'src': './images/cookies/logo.png',
        'vertices': [
            [0, -106],
            [160, -71],
            [211, 0],
            [122, 83],
            [0, 106],
            [-156, 73],
            [-209, 0],
            [-155, -73]
        ]
    },
    'cookies': [
        {
            'width': 83,
            'height': 48,
            'src': './images/cookies/01.png',
            'vertices': [
                [42, -11],
                [31, 17],
                [-37, 24],
                [-37, 24],
                [-41, -12],
                [0, -24],
                [26, -21]
            ]
        },
        {
            'width': 86,
            'height': 109,
            'src': './images/cookies/02.png',
            'vertices': [
                [0, -55],
                [23, -30],
                [43, 39],
                [0, 54],
                [-42, 44],
                [-28, 5]
            ]
        },
        {
            'width': 79,
            'height': 55,
            'src': './images/cookies/03.png',
            'vertices': [
                [32, -24],
                [37, 23],
                [-38, 26],
                [-25, -20],
                [-7, -25]
            ]
        },
        {
            'width': 65,
            'height': 71,
            'src': './images/cookies/04.png',
            'vertices': [
                [-6, -34],
                [29, 10],
                [32, 29],
                [3, 36],
                [-31, 23],
                [-23, -8]
            ]
        },
        {
            'width': 151,
            'height': 94,
            'src': './images/cookies/05.png',
            'vertices': [
                [-74, -29],
                [-17, -46],
                [48, -17],
                [74, 37],
                [-49, 41],
                [-69, 0]
            ]
        },
        {
            'width': 107,
            'height': 60,
            'src': './images/cookies/06.png',
            'vertices': [
                [54, -12],
                [37, 24],
                [-18, 27],
                [-52, -6],
                [7, -29],
                [31, -25]
            ]
        },
        {
            'width': 181,
            'height': 82,
            'src': './images/cookies/07.png',
            'vertices': [
                [0, -40],
                [56, -23],
                [91, 29],
                [-27, 41],
                [-90, 24],
                [-54, -24]
            ]
        }
    ]
};
    //ロゴを再生成
    Physics.prototype.recreateLogo = function () {
        if (this.logoExist) {
            this.destroyLogo();
            this.createLogo();
        }
    };

    //クッキーを創る
    Physics.prototype.createCookie = function () {
        var random = (Math.random() + Math.random()) / 2;
        var cookieNum = Math.floor(random * (cookieImages['cookies'].length - 0.000001));
        var cookie = cookieImages['cookies'][cookieNum];
        var canvasWidth = this.canvas.width;
        var applyForce;
        if (this.canvas.width < 769) {
            applyForce = (10 * Math.random()) - 5;
        } else {
            applyForce = (30 * Math.random()) - 15;
        }
        this.createBody({ type: 'dynamic', x: (canvasWidth * Math.random()), y: -30, width: cookie['width'], height: cookie['height'], angle: 360 * Math.random(), force: [applyForce, 0], image: cookie });
    };
    //すべてのオブジェクトを消す
    Physics.prototype.destroyAll = function () {
        for (var bodyItem = this.world.GetBodyList(); bodyItem; bodyItem = bodyItem.GetNext()) {
            this.world.DestroyBody(bodyItem);
        }
    };

    //box2dのbodyを生成
    Physics.prototype.createBody = function (opts) {
        //オプションのデフォルト値
        var defaults = {
            type: 'static',
            x: 0,
            y: 0,
            width: 10,
            height: 10,
            angle: 0,
            restitution: 0.2,
            friction: 0.7,
            density: 2.65,
            force: [0, 0],
            image: null
        };

        //デフォルト値を上書き
        $.extend(defaults, opts);

        var type;
        switch (defaults['type']) {
            case 'static':
                type = b2Body.b2_staticBody;
                break;
            case 'dynamic':
                type = b2Body.b2_dynamicBody;
                break;
            default:
                type = b2Body.b2_staticBody;
                break;
        }
        var x = this.pixelToMeter(defaults['x']);
        var y = this.pixelToMeter(defaults['y']);
        var width = this.pixelToMeter(defaults['width']);
        var height = this.pixelToMeter(defaults['height']);
        var angle = this.degreeToRadians(defaults['angle']);
        var restitution = defaults['restitution'];
        var friction = defaults['friction'];
        var density = defaults['density'];
        var force = defaults['force'];
        var image = defaults['image'];

        //bodyを生成
        var body = this.world.CreateBody(bodyDef);
        body.CreateFixture(fixDef);

        //物体に力を作用させる
        body.ApplyForce(new b2Vec2(force[0], force[1]), body.GetWorldCenter());

        return body;
    };

    //描く
    Physics.prototype.draw = function () {
        for (var bodyItem = this.world.GetBodyList(); bodyItem; bodyItem = bodyItem.GetNext()) {
            //if ( bodyItem.GetType() == b2Body.b2_dynamicBody ) {
            var position = bodyItem.GetPosition();
            var userData = bodyItem.GetUserData();

            this.context.save();
            if (userData && userData.img && userData.img.complete) {
                if (userData.shape_type && userData.shape_type == 'circle') {
                    var slideX = position.x * this.worldScale;
                    var slideY = position.y * this.worldScale;

                    this.context.translate(slideX, slideY);
                    this.context.rotate(bodyItem.GetAngle());
                    this.context.drawImage(userData.img, -userData.radius, -userData.radius);
                }
                if (userData.shape_type && userData.shape_type == 'box') {
                    var slideX = position.x * this.worldScale;
                    var slideY = position.y * this.worldScale;

                    this.context.translate(slideX, slideY);
                    this.context.rotate(bodyItem.GetAngle());
                    this.context.drawImage(userData.img, -userData.width / 2.0, -userData.height / 2.0, userData.width, userData.height);
                }
            }
            this.context.restore();
            //}
        }
    };

    //重力加速度を変える
    Physics.prototype.setGravity = function (gravity) {
        if (typeof gravity === "undefined") { gravity = [0, 9.8]; }
        this.world.SetGravity(new b2Vec2(gravity[0], gravity[1]));
    };

    //座標の配列をb2Vec2の配列で出力
    Physics.prototype.getB2Vec2 = function (array) {
        var b2Vec2Array = new Array(array.length);
        for (var i = 0; i < array.length; i++) {
            b2Vec2Array[i] = new b2Vec2(this.pixelToMeter(array[i][0]) * this.getViewScale(), this.pixelToMeter(array[i][1]) * this.getViewScale());
        }
        return b2Vec2Array;
    };

Comments

[退会済みユーザー]

エラーの内容的にphysics.jsファイルの方に原因があるようなので、htmlソースだけでは判断できません。jsファイルも公開していただけますか？

[sasanohasarasar]

コメントありがとうございます。長くなってしまった為分割致しました。https://teratail.com/questions/102553?modal=q-comp　お願いいたします。

[sasanohasarasar]

こちらのscriptも参考にしております。ご査収いただければ幸いです。https://teratail.com/questions/102551?modal=q-comp

[退会済みユーザー]

えーっと、長くても構わないのでここに貼り付けていただけますか？ソースだけ分割で載せるのはよろしくないです。

[退会済みユーザー]

あと、参考にしているscriptではなく、physics.jsそのものを載せてくれると幸いです。

[sasanohasarasar]

ありがとうございます。途方に暮れていたのでとても心強いです。よろしくお願いいたします。

[sasanohasarasar]

-

[退会済みユーザー]

えーっと、質問を編集というボタンがありますよね？そこから直接編集していただけますか？

[sasanohasarasar]

失礼致しました・・・；；サイトの仕様に慣れてなくもうしわけありません。

Answer 1

HTMLソースが消えちゃってますが、今後質問する際は該当のソースを全て公開すると良いです。今回で言えばHTMLソースとjsソースですね。

続いて回答なのですが、おそらく質問者さんはこちらのサイトのソースをコピー＆ペースして作っていると思われます。まぁ簡単な処理ならそれでもいいんですが、あのサイトははっきりいってコピペでどうになるような代物ではないです。私自身もかなり時間をかけないと作れないでしょうねｗ なのでまずはここで質問するより知識をつけた方が良いかと思います。

具体的にあのサイトでは何が使われているかというと、Box2Dという物理演算エンジンが使われています。なのでああいったサイトを作りたいのであればその辺を勉強しないといけません。

第28回　物理演算エンジンBox2Dでボールを落とす
http://gihyo.jp/design/serial/01/createjs/0028

例として参考になりそうなサイトを載せておきます。ちなみに今回のエラー自体は、そのBox2D本体のファイルが読み込まれていないのが原因です。

Comments

[sasanohasarasar]

ありがとうございます。
初心者の自分に何から何まで親身なって頂き、本当に助かりました。
h_3437さん程の方でも時間がかかるとのことで、自分はまだまだ知識不足すぎて難しいですね・・。
しかし、煮詰まってしまっていてどうにもならなかったので一旦は解決方法（？）がわかり良かったです。
物理演算エンジンというものは知っておりましたが、
知っているだけでまったくの無知なため、いちから勉強していきます。
本当にありがとうございました！