使 p5js 迷宫生成器运行得更快

问题描述 投票:0回答:0

我根据 TheCodingTrain 的 YouTube 教程编写了一个迷宫生成器。 我正在努力改进项目,以便为迷宫提供更多可能性,但我正在努力解决性能问题。这是因为画布尺寸很大,因为我想得到大迷宫作为输出,而且由于 p5js 基于像素,所以我必须这样做。

有什么方法可以改进我的代码吗?也许 draw() 函数中有一些我可以省略的不必要的部分,或者一般来说有更好的算法?提前致谢!

// Variables
var cols, rows;
var w = 5;
var grid = [];
var canvX = 256*10;
var canvY = 144*10;

var current;

var stack = [];

// Setup
function setup() {
  createCanvas(canvX, canvY);
  stroke(0);
  strokeWeight(0.5);
  rect(0, 0, canvX, canvY);
  cols = floor(width/w);
  rows = floor(height/w);
  frameRate(60);
  
  for(var j = 0; j < rows; j++){
    for (var i = 0; i < cols; i++){
      var cell = new Cell(i,j);
      grid.push(cell);
    }
  }
  
  current = grid[0];
}

// Draw
function draw() {
  background(51);
  for(var i = 0; i < grid.length; i++){
    grid[i].show();
  }
  
  current.visited = true;
  current.highlight();
  // STEP 1
  var next = current.checkNeighbors();
  if(next) {
    next.visited = true;
    
    // STEP 2
    stack.push(current);
    
    
    // STEP 3
    removeWalls(current,next);
    
    // STEP 4
    current = next;
  } else if (stack.length > 0) {
    current = stack.pop();
  }
  if (current === grid[0]) {
    noStroke();
    fill(0, 255, 0);
    rect(canvX-w+2, canvY-w+2, w-4, w-4);
  }
}

function index(i,j) {
  if(i < 0 || j < 0 || i > cols-1 || j > rows-1) {
    return -1;
  }
  
  return i + j * cols;
}

function Cell(i,j){
  this.i = i;
  this.j = j;
  this.walls = [true, true, true, true];
  this.visited = false;
  
  this.checkNeighbors = function() {
    var neighbors = [];
    
    var top    = grid[index(i,j-1)];
    var right  = grid[index(i+1,j)];
    var bottom = grid[index(i,j+1)];
    var left   = grid[index(i-1,j)];

    if(top && !top.visited) {
      neighbors.push(top);
    }
    if(right && !right.visited) {
      neighbors.push(right);
    }
    if(bottom && !bottom.visited) {
      neighbors.push(bottom);
    }
    if(left && !left.visited) {
      neighbors.push(left);
    }
    
    if(neighbors.length > 0) {
      var r = floor(random(0, neighbors.length));
      return neighbors[r];
    } else {
      return undefined;
    }
  }
  this.highlight = function() {
    var x = this.i*w;
    var y = this.j*w;
    noStroke();
    fill(255, 0, 0);
    rect(x+2, y+2, w-4, w-4);
  }
  
  this.show = function() {
    var x = this.i*w;
    var y = this.j*w;
    stroke(0);
    if(this.walls[0]){
      line(x    ,y    ,x + w,y    );
    } 
    if(this.walls[1]){
      line(x + w,y    ,x + w,y + w);
    }
    if(this.walls[2]){
      line(x + w,y + w,x    ,y + w);
    }
    if(this.walls[3]){
      line(x    ,y + w,x    ,y    );
    }
    
    if(this.visited){
         noStroke();
      fill(255);
      rect(x, y, w, w);
    }
  }
}

function removeWalls(a, b) {
  
  var x = a.i - b.i;
  if (x === 1) {
    a.walls[3] = false;
    b.walls[1] = false;
  } else if (x === -1) {
    a.walls[1] = false;
    b.walls[3] = false;
  }
  
  var y = a.j - b.j;
  if (y === 1) {
    a.walls[0] = false;
    b.walls[2] = false;
  } else if (y === -1) {
    a.walls[2] = false;
    b.walls[0] = false;
  }
}

我在不同的设备上运行代码。我没有任何性能出色的设备,甚至我的 iPad 也比我的 2012 iMac 做得更好。所以我的设备不是很好,这导致了我的问题

javascript p5.js
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.