当前位置：首页 > JavaScript

js实现祖玛

2026-02-28 19:25:28JavaScript

实现祖玛游戏的基本思路

祖玛游戏的核心玩法是控制发射器发射彩色珠子，形成三个或更多同色珠子相连即可消除。以下是实现祖玛游戏的几个关键步骤：

游戏场景和元素设计

创建游戏画布并初始化基本元素，包括发射器、珠子轨道、珠子序列等。使用HTML5 Canvas或DOM元素渲染游戏界面。

const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const emitter = { x: canvas.width / 2, y: canvas.height - 50, angle: 0 };
const path = []; // 存储轨道坐标点
const balls = []; // 存储轨道上的珠子

珠子发射逻辑

监听鼠标或触摸事件控制发射角度，点击发射珠子。珠子沿发射角度直线运动，直到碰到轨道后加入轨道序列。

canvas.addEventListener('mousemove', (e) => {
    const dx = e.clientX - emitter.x;
    const dy = e.clientY - emitter.y;
    emitter.angle = Math.atan2(dy, dx);
});

canvas.addEventListener('click', () => {
    const speed = 5;
    const ball = {
        x: emitter.x,
        y: emitter.y,
        vx: Math.cos(emitter.angle) * speed,
        vy: Math.sin(emitter.angle) * speed,
        color: getRandomColor(),
        radius: 10
    };
    flyingBalls.push(ball);
});

轨道运动逻辑

珠子在轨道上按预定路径移动，需要实现路径跟随算法。可以使用贝塞尔曲线或预计算路径点。

function followPath(ball) {
    const closestPoint = findClosestPathPoint(ball);
    const targetPoint = path[(closestPoint.index + 1) % path.length];
    const dx = targetPoint.x - ball.x;
    const dy = targetPoint.y - ball.y;
    const dist = Math.sqrt(dx * dx + dy * dy);
    ball.x += (dx / dist) * ball.speed;
    ball.y += (dy / dist) * ball.speed;
}

消除检测

每次新珠子插入轨道后，检查是否有三个或以上同色珠子相连，实现消除逻辑。

function checkMatches(insertedIndex) {
    let start = insertedIndex;
    let end = insertedIndex;
    const color = balls[insertedIndex].color;

    while (start > 0 && balls[start - 1].color === color) start--;
    while (end < balls.length - 1 && balls[end + 1].color === color) end++;

    if (end - start + 1 >= 3) {
        balls.splice(start, end - start + 1);
        return true;
    }
    return false;
}

游戏循环

实现游戏主循环，处理渲染、碰撞检测、消除逻辑等。

function gameLoop() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // 更新飞行中的珠子
    flyingBalls.forEach(ball => {
        ball.x += ball.vx;
        ball.y += ball.vy;

        if (checkCollisionWithPath(ball)) {
            const insertIndex = findInsertPosition(ball);
            balls.splice(insertIndex, 0, ball);
            flyingBalls.splice(flyingBalls.indexOf(ball), 1);
            checkMatches(insertIndex);
        }
    });

    // 渲染所有元素
    drawEmitter();
    drawPath();
    balls.forEach(drawBall);
    flyingBalls.forEach(drawBall);

    requestAnimationFrame(gameLoop);
}