Question

https://www.gamasutra.com/blogs/AAdonaac/20150903/252889/Procedural_Dungeon_Generation_Algorithm.php

我试图做类似jquery中的链接，但我遇到了一些麻烦。

1）我创建10（x）个不同的矩形并将它们放在画布的中间，所有这些矩形相互混合 - 没问题

2）单独的房间，让每个房间在画布上找到一个空位 - 大问题

计划1：我比较两个房间，如果它们相互接触，那么将其中一个房间移动到另一个房间的边缘。但如果那里已经有房间怎么办？然后我就有了两个相互接触的新房间......

计划2：制作一个空/占用点阵列，并将每个房间移动到空位。但我怎么知道要移动哪个方向，所以所有房间都放在中心周围？

Plz帮助！

试用代码：

<canvas id="cnvs" width="500" height="500" style="background-color: #333;"></canvas>

var rooms = [],
  gw = 25, //grid width
  gh = 25; //grid height

//Room
function Room(x,y,w,h){
  this.x = x; this.y = y;
  this.w = w; this.h = h;
  };

//Setup
for(var i=0; i<10; i++){
  var w = Math.floor(2+Math.random()*3),
    h = Math.floor(2+Math.random()*3),
    x = Math.floor(gw/2)-Math.floor(w/2),
    y = Math.floor(gh/2)-Math.floor(h/2),
    room = new Room(x,y,w,h);
  rooms.push(room);
  };

//Draw in canvas
var ctx = $("#cnvs")[0].getContext("2d"),
  sz = 20;
ctx.lineWidth = "2";
ctx.strokeStyle = 'white';

for(var i=0; i<rooms.length; i++){
  ctx.rect(rooms[i].x*sz,rooms[i].y*sz,rooms[i].w*sz,rooms[i].h*sz);
  ctx.stroke();
  };

Answer 1

现在我做了第2步。我认为它可以更优雅，所以随意让它更聪明。

var rooms = [],
  grid = [],
  gw = 25, //grid width
  gh = 25; //grid height

//Room
Room = function(x,y,w,h){
  this.x = x; this.y = y;
  this.w = w; this.h = h;
  };

//functions
refreshGrid = function(){
  for(var i=0; i<grid.length; i++){
    for(var j=0; j<grid[i].length; j++) grid[i][j] = -1;
    };
  return;
  };

roomDistance = function(x,y,c){
  if(grid[y][x]==-1 || grid[y][x]>c){
    grid[y][x] = c;
    if(x>0) roomDistance(x-1, y, c+1);
    if(x<gw-1) roomDistance(x+1, y, c+1);
    if(y>0) roomDistance(x, y-1, c+1);
    if(y<gh-1) roomDistance(x, y+1, c+1);
    };
  return;
  };

roomFit = function(x,y,w,h){
  var tmp = true;
  if( x+w>=gw ) tmp = false;
    else if( y+h>=gh ) tmp = false;
      else {
        for(var i=y; i<y+h; i++){
          for(var j=x;j<x+w; j++){
            if( grid[i][j]<0 ) tmp = false;
            };
          };
  return tmp;
  };

blockSpaces = function(w,h){
  for(var i=0; i<rooms.length; i++){
    var rx = rooms[i].x,
      ry = rooms[i].y,
      rw = rooms[i].w,
      rh = rooms[i].h;
    if(rx+rw<gw) rw = rw+1;
    if(rx>0){ rx = rx-1; rw = rw+1; };
    if(ry+rh<gh) rh = rh+1;
    if(ry>0){ ry = ry-1; rh = rh+1; };
    for(var j=0;j<rh; j++){
      for(var k=0;k<rw; k++){
        grid[ry+j][rx+k] = -1;
        };
      };
    };
  for(var i=0; i<grid.length; i++){
    for(var j=0;j<grid[i].length; j++){
      if( roomFit(j,i,w,h)==false ) grid[i][j] = -1;
      };
    };
  };

findPlace = function(room){
  var x=0, y=0, c=-1;
  for(var i=0; i<grid.length; i++){
    for(var j=0;j<grid[i].length; j++){
      if(grid[i][j]>=0 && (c==-1 || grid[i][j]<c) ){
        c = grid[i][j];
        x= j;
        y = i;
        };
      };
    };
  room.x = x;
  room.y = y;
  };

//Setup
for(var i=0; i<gh; i++){
  var arr = [];
  for(var j=0; j<gw; j++) arr.push(0);
  grid.push(arr);
  };

for(var i=0; i<15; i++){
  var w = Math.floor(2+Math.random()*3),
    h = Math.floor(2+Math.random()*3),
    x = Math.floor(gw/2)-Math.floor(w/2),
    y = Math.floor(gh/2)-Math.floor(h/2);
  refreshGrid();
  roomDistance(x,y,0);
  blockSpaces(w,h);
  var room = new Room(x,y,w,h);
  findPlace(room);
  rooms.push(room);
  };

//Draw in canvas
var ctx = $("#cnvs")[0].getContext("2d"),
  sz = 20;
ctx.beginPath();
ctx.lineWidth = '1';
ctx.strokeStyle = '#666';
for(var i=0; i<gh; i++){ ctx.moveTo(0,i*sz); ctx.lineTo(gw*sz,i*sz); };
for(var i=0; i<gw; i++){ ctx.moveTo(i*sz,0); ctx.lineTo(i*sz,gh*sz); };
ctx.stroke();

ctx.beginPath();
ctx.lineWidth = "2";
ctx.strokeStyle = '#fff';
for(var i=0; i<rooms.length; i++){ ctx.rect(rooms[i].x*sz,rooms[i].y*sz,rooms[i].w*sz,rooms[i].h*sz); ctx.stroke(); };

<canvas id="cnvs" width="500" height="500" style="background-color: #333;"></canvas>

Answer 2

我认为这更好：

<script type="application/javascript">
jQuery(document).ready(function () {
    jQuery('.images').append('<div id="loadMore">See more sample configuration</div><div id="showLess">Hide</div>');
    jQuery(".thumbnails a").hide();

    size_li = jQuery(".thumbnails a").size();
    x=3;
    jQuery('.thumbnails a:lt('+x+')').show();
    jQuery('#loadMore').click(function () {
        x= (x+5 <= size_li) ? x+3 : size_li;
        jQuery('.thumbnails a:lt('+x+')').show();
    });
    jQuery('#showLess').click(function () {
        x=(x-5<0) ? 3 : x-3;
        jQuery('.thumbnails a').not(':lt('+x+')').hide();
    });
});
</script>

Jquery中的Dungeon生成器

2 个答案: