代码之家 › 专栏 › 技术社区 › Bestlogo56

我随机生成的平铺集未按预期工作。我怎样才能解决这个问题?

html5-canvas random arrays javascript

Bestlogo56 · 技术社区 · 6 年前

因此,我试图从数组中生成一个随机平铺集。我想创建除“lake”平铺(代码中为4,最终图形中为蓝色)以外的所有平铺。在下面的代码中,我尝试使其能够计算生成过程沿行的距离以及行中是否生成了湖。如果该行中已经生成了湖,则该过程将尝试创建湖以外的平铺。最后,我也不想在集合中创造超过五个湖泊。

这就是问题所在。当我运行这个程序时,它会完全创建瓷砖集,但是湖面是各种不稳定的。随机数量的湖泊以及每行的多个湖泊。我显然不想要这个。如果有人能帮我指出解决这个问题的正确方向,我将不胜感激。如果你完全重写的话,我很好。我只是想弄明白。

如果代码马虎且制作不好,也很抱歉。几个月前我刚刚开始编程。感谢您的反馈!!

var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
var t = Math.round(Math.random()*10/2);
var lakecount = 0;
  var arr = [];
var ln = row = 0;
//create initial array
for(let i = 0; i < 10; i++) {
  arr.push([]);
};
//create second part of 2d array
for(let i = 0; i < arr.length; i++) {
  for(let j = 0; j < 10; j++) {
    //check if there are more then five lakes.
    if(lakecount > 5) {
      //if there is, reset until the new tile generated isn't a lake.
      while(t == 4) {
        t = Math.round(Math.random()*10/2);
      }
      //create new tile
      arr[i].push([t,0,0,0]);
      t = Math.round(Math.random()*10/2);
    }
    else {
      if(t == 4 && ln == 1) {
        //check if the program generated a lake and there is one already in the row, regenerate tile until a lake hasn't been generated for the tile
        while(t == 4) {
          t = Math.round(Math.random()*10/2);
        }
        console.log("one per row");
      }
      //create tile
      arr[i].push([t,0,0,0]);
      t = Math.round(Math.random()*10/2);
      console.log(arr[i][j]);
      if(t == 4) {
        //if there is a lake generated, add to the amount of overall lakes, then say there is a lake in the row.
        lakecount++
        ln++;
        console.log("add");
      }
      if(row < 10) {
        //add for each tile, until you reach end of row.
        row++	
        console.log("row add");
      }
      else {
        //reset row, reset if lakes are in that row.
        row = 0;
        ln = 0;
        console.log("row reset");
      }
    }
  }
};
//color everything
for(let i = 0; i < arr.length; i++) {
  for(let j = 0; j < 10; j++) {
    switch(arr[i][j][0]) {
      case 0:
        ctx.fillStyle = "lime"
        ctx.fillRect(j*48,i*48,48,48);
        break;
      case 1:
        ctx.fillStyle = "black"
        ctx.fillRect(j*48,i*48,48,48);
        break;
      case 2:
        ctx.fillStyle = "green"
        ctx.fillRect(j*48,i*48,48,48);
        break;
      case 3:
        ctx.fillStyle = "gray"
        ctx.fillRect(j*48,i*48,48,48);
        break;
      case 4:
        ctx.fillStyle = "blue"
        ctx.fillRect(j*48,i*48,48,48);
        break;
      case 5:
        ctx.fillStyle = "bisque"
        ctx.fillRect(j*48,i*48,48,48);
        break;
    }
  }
}

<canvas id="canvas" height="480" width="480"></canvas>

1 回复 | 直到 6 年前

radcore 6 年前

//check if there are more then five lakes
//regen if more than 5 lakes or we already have a lake for this row.
if(lakecount > 5 || ln > 1)

您的逻辑也可以简单得多,而不是先在for循环之前再在for循环结束之前进行随机生成(这很难读取和遵循逻辑),在进行任何检查之前,尝试将随机生成作为for循环中的第一行执行。如果简化逻辑,代码将更容易调试。