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>

我不断收到此错误：

未捕获的类型错误：无法调用未定义的方法“迭代”

4

3 回答 3

2

当您分配onFrame处理程序时，会调用一个 setter 函数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 回答
2

只有一个可能的原因，ball尚未定义何时onFrame调用。onFrame要么在创建后赋值，要么在里面ball检查。ballonFrame

于 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 回答