JS敌机矩形路径移动问题求助：添加方向代码后画面空白

核心问题 #

1. 无限递归调用：你每个移动方向函数末尾直接调用下一个函数（比如moveEnemiesDown结束后立刻调用moveEnemiesleft），这会导致函数无限嵌套调用，瞬间占满浏览器调用栈，主线程被完全阻塞，根本没时间渲染画面，所以除了背景全空白。
2. 循环变量拼写错误：moveEnemiesleft、moveEnemiesUp、moveEnemiesRight这三个函数里，循环条件用了未定义的ide代替idx，导致循环根本不会执行，敌机位置完全没更新。
3. 移动逻辑设计错误：你现在的写法是一次性把所有方向的移动代码都执行完，而不是分每一帧逐步移动，不符合游戏帧动画的逻辑。

修复后的代码示例 #

我们用一个状态变量跟踪当前需要执行的移动方向，每一帧只处理当前方向的移动，当敌机到达该方向的目标位置后，再切换到下一个方向：

// 跟踪当前移动方向
let currentMoveDirection = 'down';

function moveEnemies() {
    switch(currentMoveDirection) {
        case 'down':
            moveEnemiesDown();
            break;
        case 'left':
            moveEnemiesLeft();
            break;
        case 'up':
            moveEnemiesUp();
            break;
        case 'right':
            moveEnemiesRight();
            break;
    }
    // 用requestAnimationFrame实现帧动画，每一帧调用一次moveEnemies
    requestAnimationFrame(moveEnemies);
}

function moveEnemiesDown() {
    let allReached = true;
    for(var idx = 0 ; idx < enemies.length; idx++) {
        if(enemies[idx].top <= 360) {  // 未到达目标位置，继续移动
            enemies[idx].top += 2;
            allReached = false;
        }
    }
    // 所有敌机都到达目标位置，切换方向
    if(allReached) {
        currentMoveDirection = 'left';
    }
}

function moveEnemiesLeft() {
    let allReached = true;
    for( var idx = 0 ; idx < enemies.length; idx ++) {
        if(enemies[idx].left > 20) { // 未到达目标位置，继续移动
            enemies[idx].left -= 2;
            allReached = false;
        }
    }
    if(allReached) {
        currentMoveDirection = 'up';
    }
}

function moveEnemiesUp() {
    let allReached = true;
    for( var idx = 0 ; idx < enemies.length; idx ++) {
        if(enemies[idx].top > 10) { // 未到达目标位置，继续移动
            enemies[idx].top -= 2;
            allReached = false;
        }
    }
    if(allReached) {
        currentMoveDirection = 'right';
    }
}

function moveEnemiesRight() {
    let allReached = true;
    for( var idx = 0 ; idx < enemies.length; idx ++) {
        if(enemies[idx].left < 800 ) { // 未到达目标位置，继续移动
            enemies[idx].left += 2;
            allReached = false;
        }
    }
    if(allReached) {
        currentMoveDirection = 'down';
    }
}

// 启动敌机移动
moveEnemies();

关键改动说明 #

• 用currentMoveDirection变量记录当前应该执行的移动方向，避免无限递归。
• 每个方向函数里增加allReached变量，判断是否所有敌机都到达该方向的目标位置，只有全部到达才切换方向。
• 用requestAnimationFrame实现帧动画，确保每一帧只执行一次移动逻辑，让浏览器有时间渲染画面。
• 修正了循环变量ide的拼写错误，改成正确的idx。

内容的提问来源于stack exchange，提问作者wade_hunt91