使用IIFEs开发游戏-代码分离

Question

因此，我目前正在学习如何使用Javascript开发帆布游戏。在查看了几个示例中使用的方法之后，在阅读了这些优点之后，我开始将代码转换为IIFE。

然而，目前，我所有的代码都在一条生命中。我想要做的是开始将我的代码分离到各个文件中。

然而，我坚持的部分是，如何让每个生命函数看到另一个函数中的数据。我真不明白这是怎么回事。

我的完整代码是在这个小提琴，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

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

因此，您只需将类移动到另一个文件中，并拥有一个主文件(画布文件)，该文件负责编排屏幕上的元素。

```javascript

(功能(画布，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();

    }

}

}(画布，ctx)；

您可以这样做并共享globals画布和ctx，也可以在Ball/Paddle构造函数中将画布和ctx作为参数发送。

但是，如果您想在它们之间共享数据，可以在业务流程调用方法中使用特定的参数。