Question

我正在尝试用paper.js制作游戏，但有些东西不起作用，所以我简化了一些事情，而且......再也没有工作了。

我尝试使用已经创建的命名空间paperscript的paper.js，但它太难调试，所以我尝试使用javascript directly。

即使使用超级简单的代码在浏览器周围移动球......它也无效。

这是我的代码：

<!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'

Answer 1

当您分配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
},

如果您查看this jsFiddle，并确保在开发工具中设置break on exceptions，则可以看到堆栈。然后解决方案是在分配处理程序之前初始化ball。

Answer 2

只有一个可能的原因，ball在调用onFrame时尚未定义。在创建onFrame后分配ball，或在ball内查看onFrame。

Answer 3

我已经创建了一个库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>

来自纯JavaScript的Paper.js

3 个答案: