javascript闭包怎么在Canvas动画中使用

vx

vy

function createBouncingBall(ctx, initialX, initialY, radius, initialDx, initialDy, color) {
    // 这些变量被闭包捕获，成为每个球实例的私有状态
    let x = initialX;
    let y = initialY;
    let dx = initialDx;
    let dy = initialDy;
    let ballColor = color;
    let ballRadius = radius;

    return {
        // 绘制方法，使用闭包中的 x, y, ballColor, ballRadius
        draw: function() {
            ctx.beginPath();
            ctx.arc(x, y, ballRadius, 0, Math.PI * 2);
            ctx.fillStyle = ballColor;
            ctx.fill();
        },
        // 更新方法，修改闭包中的 x, y, dx, dy
        update: function(canvasWidth, canvasHeight) {
            x += dx;
            y += dy;

            // 碰撞检测与反弹
            if (x + ballRadius > canvasWidth || x - ballRadius < 0) {
                dx *= -1;
            }
            if (y + ballRadius > canvasHeight || y - ballRadius < 0) {
                dy *= -1;
            }
        },
        // 暴露一个方法来改变颜色，同样通过闭包操作 ballColor
        setColor: function(newColor) {
            ballColor = newColor;
        },
        // 获取当前位置的方法
        getPosition: function() {
            return { x: x, y: y };
        }
    };
}

// 假设我们有 Canvas 上下文 ctx 和 Canvas 尺寸
// const canvas = document.getElementById('myCanvas');
// const ctx = canvas.getContext('2d');
// const canvasWidth = canvas.width;
// const canvasHeight = canvas.height;

// 创建多个独立的弹跳球实例
// const ball1 = createBouncingBall(ctx, 50, 50, 20, 2, 3, 'blue');
// const ball2 = createBouncingBall(ctx, 150, 100, 30, -3, 2, 'red');
// const ball3 = createBouncingBall(ctx, 250, 70, 15, 4, -1, 'green');

// 将它们放入一个数组，在动画循环中统一处理
// const balls = [ball1, ball2, ball3];

// 动画循环（简化版）
// function animate() {
//     ctx.clearRect(0, 0, canvasWidth, canvasHeight); // 清空画布
//     balls.forEach(ball => {
//         ball.update(canvasWidth, canvasHeight);
//         ball.draw();
//     });
//     requestAnimationFrame(animate);
// }
// animate();

ballColor

ballRadius

createBouncingBall

ball1.x

ball1.getPosition()

ball1.update()

particleX

playerSpeed

backgroundOffset

// 粒子系统模块
function createParticleSystem(ctx, options) {
    let particles = []; // 闭包中的私有数组
    let maxParticles = options.maxParticles || 100;
    // ... 更多私有状态和配置

    function addParticle(x, y) {
        // 添加粒子到 particles 数组，粒子的状态也可能是闭包
        // ...
    }

    return {
        update: function() { /* 更新所有 particles 的状态 */ },
        draw: function() { /* 绘制所有 particles */ },
        explode: function(x, y, count) {
            for (let i = 0; i < count; i++) {
                addParticle(x, y);
            }
        }
    };
}

// 角色控制器模块
function createPlayerController(playerObject, inputManager) {
    let speed = 5; // 闭包中的私有速度
    let isMoving = false;
    // ... 更多私有状态

    inputManager.onKeyDown('ArrowRight', () => {
        isMoving = true;
        // playerObject.moveRight(speed); // 调用 playerObject 的方法
    });

    return {
        update: function() { /* 根据输入更新玩家状态 */ },
        // ...
    };
}

// 实例化并使用
// const particleSystem = createParticleSystem(ctx, { maxParticles: 200 });
// const player = createPlayer(ctx, 100, 100); // 假设 createPlayer 也返回一个闭包对象
// const input = createInputManager();
// const playerController = createPlayerController(player, input);

// 在主循环中调用
// particleSystem.update();
// particleSystem.draw();
// playerController.update();
// player.draw();

particles

maxParticles

createParticleSystem

speed

isMoving

createPlayerController