p5 中的多个画布

Question

我正在为一个应该学习玩蛇游戏的神经进化项目编写代码。 我正在使用 js 和 p5.js。 我想让 10 个游戏画布平行，每个游戏都应该单独玩游戏。

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

 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

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

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

    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);
    }

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

（根据上下文，可能值得通过使用不允许未声明的变量的严格模式来防止此类问题的发生）。