1

paper.js を使用してゲームを作成しようとしていますが、何かが機能していないため、単純化したところ、再び機能しません。

作成済みの名前空間で paper.js で作成しようとしましたpaperscriptが、デバッグが難しすぎたので、javascript を直接使用してみました。

ブラウザの周りでボールを動かす非常に単純なコードでも..動作していません。

これが私のコードです：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Bouncing ball</title>
    <link rel="stylesheet" href="../css/style.css">
    <script type="text/javascript" src="../../lib/paper.js"></script>
    <script type="text/javascript">
        var ball;

        function game(_view) {
            console.log("game!");
            ball = new Ball();
            this.view = _view;
            console.log(ball);
        }

        paper.install(window);
        window.onload = function() {
            var canvas = document.getElementById('canvas');
            paper.setup(canvas);
            view.onFrame = onFrame;
            game(view);
        }

        var Ball = Base.extend({
            initialize: function() {
                this.position = new Point(100, 100);
                this.velocity = new Point(3, 0);

                this.path = new Path.Circle(location, 25);
                this.path.strokeColor = 'black';
                this.path.fillColor = 'black';
            },

            iterate: function() {
                this.position += this.velocity;
                this.path.position = this.position;

                return this;
            }
        });

        function onFrame(event) {
            ball.iterate();
            //console.log(ball);
        };

    </script>
</head>
<body>
    <canvas id="canvas" resize></canvas>
</body>
</html>

私はこのエラーを受け取り続けています：

キャッチされていない TypeError: 未定義のメソッド 'iterate' を呼び出せません

4

3 に答える 3

2

考えられる理由は1つだけで、が呼び出さballれたときにまだ定義されていません。の作成後にonFrame割り当てるか、内部を確認してください。onFrameballballonFrame

于 2013-02-19T23:02:20.270 に答える
2

まさにこれを処理するためのライブラリfolio.jsを作成しました。アニメも扱っています。これが folio.js を使用した例です。

  <!doctype html>
<!--[if lt IE 7]>           <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>              <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>              <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--><html class="no-js"> <!--<![endif]-->
    <head>
        <!-- META -->
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="description" content="">



        <title>Ball</title>



        <script type="text/javascript" src="paper-core.js"></script>
        <script type="text/javascript" src="paper.folio.js"></script>
        <script type="text/javascript">
            // ------------------------------------------------------------------------
            // Properties
            // ------------------------------------------------------------------------
            // the core folio namespace
            var f = folio;

            // define ball variable
            var ball;



            // ------------------------------------------------------------------------
            // Setup
            // ------------------------------------------------------------------------
            function Setup() {
                ball = new Ball();
            };




            // ------------------------------------------------------------------------
            // Update
            // ------------------------------------------------------------------------
            /*
             *  Update() is called every frame
             */
            function Update(event) {
                ball.iterate();
            };



            // ------------------------------------------------------------------------
            // Draw
            // ------------------------------------------------------------------------
            function Draw() {
            };



            // ------------------------------------------------------------------------
            // Classes
            // ------------------------------------------------------------------------
            var Ball = Base.extend({
                initialize: function() {
                    this.position = new Point(100, 100);
                    this.velocity = new Point(3, 0);

                    this.path = new Path.Circle(this.position, 25);
                    this.path.strokeColor = 'black';
                    this.path.fillColor = 'black';
                },

                iterate: function() {
                    this.path.position.x += this.velocity.x;
                    this.path.position.y += this.velocity.y;
                    return this;
                }
            });

        </script>



        <meta http-equiv="x-dns-prefetch-control" content="off"/>
    </head>
    <body>


        <canvas resize="true" id="canvas"></canvas>


    </body>
</html>
于 2013-12-03T09:29:09.703 に答える
2

ハンドラーを割り当てるonFrameと、セッター関数setOnFrameが呼び出され、すぐにフレーム ハンドラーが呼び出されます。このball時点では は初期化されていないため、関数呼び出しは失敗します。

setOnFrame: function(onFrame) {
    this._onFrame = onFrame;
    if (!onFrame) {
        delete this._onFrameCallback;
        return;
    }
    var that = this,
        requested = false,
        before,
        time = 0,
        count = 0;
    this._onFrameCallback = function(param, dontRequest) {
        requested = false;
        if (!that._onFrame)
            return;
        paper = that._scope;
        requested = true;
        if (!dontRequest) {
            DomEvent.requestAnimationFrame(that._onFrameCallback,
                    that._canvas);
        }
        var now = Date.now() / 1000,
            delta = before ? now - before : 0;
        that._onFrame(Base.merge({
            delta: delta, 
            time: time += delta, 
            count: count++
        }));
        before = now;
        that.draw(true);
    };
    if (!requested)
        this._onFrameCallback();  //here your onFrame function is called
},

この jsFiddleを見て、開発ツールで設定break on exceptionsしたことを確認すると、スタックが表示されます。ball解決策は、ハンドラーを割り当てる前に初期化することです。

于 2013-02-19T22:58:10.617 に答える