p5 中的多个画布

Question

我正在为一个应该学会玩贪吃蛇游戏的神经进化项目编写代码。我正在使用 js 和 p5.js。我想有 10 个游戏 canvases 并行，每个游戏应该单独玩游戏。

我正在努力解决的是多个 canvases 部分。当我使用这个时：

let screens = 10;
    for(let k = 0; k < screens ;k++){
        
      var t = function( p ) { 
        p.setup = function() {
            p.createCanvas(200, 200);
            let x = Math.random()*100;
            console.log(x);
            snake = new Snake(x,50);
            food = new Food();
        };
      
        p.draw = function() {
            p.background(0);
            snake.placeSnake(p);
            snake.think(p);

            if(counter % 50 == 0){
                snake.moveSnake();
            }
            if(snake.offScreen(p)){
                //kill snake
            }
            }

            food.placeFood(p);

            if(food.hitsFood(snakes)){
                food.generateFood(p);
            }
            counter++;
        };
      };
      var myp5 = new p5(t);
    }

所有屏幕都与最后生成的屏幕相同。我该怎么做才能让每个 canvas 都是独一无二的？提前致谢。

Answer 1

这可能是一个可变范围问题（未经测试，因为我没有您的所有代码）。

尝试在 var t= function(p){} 定义中添加 let snake, food, counter = 0;，如下所示：

    let screens = 10;
    for(let k = 0; k < screens ;k++){
        
      var t = function( p ) { 
        let snake, food, counter = 0;    // declare here as shared between setup and draw
        p.setup = function() {
            p.createCanvas(200, 200);
            let x = Math.random()*100;
            console.log(x);
            snake = new Snake(x,50);
            food = new Food();
        };
      
        p.draw = function() {
            p.background(0);
            snake.placeSnake(p);
            snake.think(p);

            if(counter % 50 == 0){
                snake.moveSnake();
            }
            if(snake.offScreen(p)){
                //kill snake
            }
            //}

            food.placeFood(p);

            if(food.hitsFood(snakes)){
                food.generateFood(p);
            }
            counter++;
        };
      };

      var myp5 = new p5(t);
    }

对此的解释是，如果您不声明变量，它们将在全局范围内隐式声明，因此每条蛇都指向同一条蛇（食物也一样）。画布是独一无二的，但每个画布的蛇和食物变量只指向最后创建的蛇或食物。

（根据上下文，使用 strict mode 来防止此类问题的发生可能是值得的，它不允许未声明的变量）。

p5 中的多个画布

Multiple canvases in p5

javascript

processing

p5.js