質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

91.36%

  • JavaScript

    11226questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    6173questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • jQuery

    4900questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • HTML5

    2845questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • canvas

    193questions

    HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

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

解決済

回答 1

投稿 2017/11/29 15:15 ・編集 2017/11/29 15:41

  • 評価
  • クリップ 0
  • VIEW 106

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;
    };
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • sasanohasarasar

    2017/11/29 15:42 編集

    -

    キャンセル

  • h_3478

    2017/11/29 15:36

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

    キャンセル

  • sasanohasarasar

    2017/11/29 15:38

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

    キャンセル

回答 1

checkベストアンサー

+2

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

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

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

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

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

投稿 2017/11/29 16:00

編集 2017/11/29 16:03

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/11/29 16:17

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

ただいまの回答率

91.36%

関連した質問

同じタグがついた質問を見る

  • JavaScript

    11226questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    6173questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • jQuery

    4900questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • HTML5

    2845questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • canvas

    193questions

    HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。