使用 IFSc 的游戏开发 - 代码分离

Question

所以，我目前正在学习如何使用 Javascript 进行 Canvas 游戏开发。在看到几个示例中使用的方法并了解其好处后，我开始将我的代码转移到 IIFE 中。

但是，目前我的所有代码都在一个 IIFE 中。我想要做的是开始将我的代码分离到单独的文件中。

然而，我坚持的部分是如何允许每个 IIFE 函数看到另一个中的数据。我不太明白这是怎么回事。

我的完整代码在 fiddle、https://jsfiddle.net/473z1g2t/1/ 中，而我的代码示例在下面；

(function(){
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');

    function Ball(x, y, radius, color){
        /* .. */
    }

    function Paddle(x, y){
        /* .. */
    }

    var ball = new Ball((canvas.width / 2), canvas.height - 60, 10, 'black');
    var paddle = new Paddle((canvas.width / 2) - 20, 550);

    function initCanvas(){
        canvas.addEventListener('click', function(){
            if(!ball.active)
                ball.active = true;
            else
                ball.active = false;
        });

        canvas.addEventListener('mousemove', function(e){

        });
    }

    initCanvas();

    function Update(){
        Draw();
        requestAnimationFrame(Update);

        if(ball.active){
            /* .. */
        }
    }
    function Draw(){
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ball.draw();
        paddle.draw();
    }

    requestAnimationFrame(Update);
})();

TLDR

我想将 Paddle 和 Ball 逻辑与应用程序的其余部分（可能还有 canvasInit 函数）分开。解决这个问题的首选方法是什么？我知道我可以将参数传递给这些函数，但我在它们之间传递什么？

提前致谢。

Answer 1

据我从你的代码中了解到，你实际上并没有在垫子和球之间进行通信。

因此，您只需将类移动到另一个文件中，并拥有一个主文件（canvas 主文件）来协调屏幕上的元素。

```

(function(canvas, ctx) {
    function Ball(x, y, radius, color){
        this.x = x;
        this.y = y;
        this.r = radius;
        this.c = color;
        this.vx = -3;
        this.vy = -3;
        this.active = false;

        this.draw = function(){
            ctx.beginPath();
            ctx.arc(this.x, this.y, this.r, 0, Math.PI*2);
            ctx.fill();
            ctx.closePath();
        }
    }
})(canvas, ctx);

```

您可以这样做并共享全局变量 canvas 和 ctx，或者您可以发送 canvas 和 ctx 作为 Ball/Paddle 构造函数

中的参数

但是如果你确实想在它们之间共享数据，你可以在带有特定参数的编排调用方法中进行。

使用 IFSc 的游戏开发 - 代码分离

Game Development Using IIFEs - Code Seperation

html

javascript

logic

canvas

TLDR