javascript - 递归调用扰乱了游戏中的渲染

Question

我有以下代码(忽略 sleep 的事情:

function game_loop(snake){
    sleep(200);

    background(200);
    draw_borders();

    const r = snake_draw(snake_move(snake.x, snake.y));
    game_loop(r);
}

function setup() {
    createCanvas(w, h);
    frameRate(10);
    noLoop();
}

function draw() {
    game_loop({x: snake_initial_x, y: snake_initial_y});
}

function sleep(delay) {
    var start = new Date().getTime();
    while (new Date().getTime() < start + delay);
}

function snake_move(x, y){
    const x_speed = 1;
    const y_speed = 0;

    return {x: x + x_speed, y: y + y_speed };
}

function snake_draw(position){
    const snake_color = 255 ;

    fill(snake_color);
    rect(position.x * sqr_size, position.y * sqr_size, sqr_size, sqr_size);

    return position;
};

const border_color = 81;

function draw_borders(){
    draw_row_borders(0);
    draw_column_borders(1);
}

function draw_row_borders(x){
    if(x >= 0 && x < cols) {
        fill(border_color);
        rect(x * sqr_size, 0, sqr_size, sqr_size);
        fill(border_color);
        rect(x * sqr_size, (rows - 1) * sqr_size, sqr_size, sqr_size);

        draw_row_borders(x + 1, 0);
    }
}

function draw_column_borders(y){
    if(y >= 1 && y < rows - 1) {
        fill(border_color);
        rect(0, y * sqr_size, sqr_size, sqr_size);
        fill(border_color);
        rect((cols - 1) * sqr_size,  y * sqr_size, sqr_size, sqr_size);

        draw_column_borders(y + 1);
    } 
}

代码的最后部分不是必需的，但我添加它们以防万一。

我的问题是，当我调用 game_loop(r) 或 game_loop(snake_draw(snake_move(snake.x, Snake.y))) 时，游戏停止渲染一切，但如果我将 console.log() 放入 game_loop 中，我可以看到它正在工作(即调用该函数，更新 snake.x，蛇.y)。

为什么这个递归调用会把一切搞乱？

顺便说一句，我正在使用 p5js 框架。

Answer 1

要获得“功能风格” - 捕获下一次迭代的参数并使用 setInterval 安排它:

function game_loop(r) {
     // draw r
     r = nextStep(r); // compute next immutable state

     var next_iteration = function(){ 
        game_loop(r); // capture state 
     } 
     setInterval(next_iteration, 10);
}