这里有点问题。我正在尝试使用java并使room_count来自HTML页面中的值。和房间大小一样。如果你改变代码里面的值，那么orional代码（最后一组代码）很有用...但是当我尝试用当前（第一组代码）点击按钮时它会滞后而且我必须杀死互联网使用它的标签....任何帮助都会很好
<piece> <!-- Body of the page -->
<canvas id='canvas'></canvas>
<p>Room Count</p>
<label for="MinRoomCount">Minimum</label>
<input type="number" id="MinRoomCount" name="MinRoomCount" value="1"></input>
<label for="MaxRoomCount">Maximum</label>
<input type="number" id="MaxRoomCount" name="MaxRoomCount" value="10"></input>
<p>Room Size</p>
<label for="MinRoomSize">Minimum</label>
<input type="number" id="MinRoomSize" name="MinRoomSize" value="5"></input>
<label for="MaxRoomSize">Maximum</label>
<input type="number" id="MaxRoomSize" name="MaxRoomSize" value="15"></input>
<input type="button" onclick="regenerate()"></input>
<script>
function regenerate(){
var Dungeon = {
map: null,
map_size: 200,
rooms: [],
Generate: function () {
var MaxA = document.getElementById("MaxRoomCount").value;
var MinA = document.getElementById("MinRoomCount").value;
var MaxB = document.getElementById("MaxRoomSize").value;
var MinB = document.getElementById("MinRoomSize").value;
this.map = [];
for (var x = 0; x < this.map_size; x++) {
this.map[x] = [];
for (var y = 0; y < this.map_size; y++) {
this.map[x][y] = 0;
}
}
var room_count = Helpers.GetRandom(MinA, MaxA);
var min_size = MinB;
var max_size = MaxB;
for (var i = 0; i < room_count; i++) {
var room = {};
room.x = Helpers.GetRandom(1, this.map_size - max_size - 1);
room.y = Helpers.GetRandom(1, this.map_size - max_size - 1);
room.w = Helpers.GetRandom(min_size, max_size);
room.h = Helpers.GetRandom(min_size, max_size);
if (this.DoesCollide(room)) {
i--;
continue;
}
room.w--;
room.h--;
this.rooms.push(room);
}
this.SquashRooms();
for (i = 0; i < room_count; i++) {
var roomA = this.rooms[i];
var roomB = this.FindClosestRoom(roomA);
pointA = {
x: Helpers.GetRandom(roomA.x, roomA.x + roomA.w),
y: Helpers.GetRandom(roomA.y, roomA.y + roomA.h)
};
pointB = {
x: Helpers.GetRandom(roomB.x, roomB.x + roomB.w),
y: Helpers.GetRandom(roomB.y, roomB.y + roomB.h)
};
while ((pointB.x != pointA.x) || (pointB.y != pointA.y)) {
if (pointB.x != pointA.x) {
if (pointB.x > pointA.x) pointB.x--;
else pointB.x++;
} else if (pointB.y != pointA.y) {
if (pointB.y > pointA.y) pointB.y--;
else pointB.y++;
}
this.map[pointB.x][pointB.y] = 1;
}
}
for (i = 0; i < room_count; i++) {
var room = this.rooms[i];
for (var x = room.x; x < room.x + room.w; x++) {
for (var y = room.y; y < room.y + room.h; y++) {
this.map[x][y] = 1;
}
}
}
for (var x = 0; x < this.map_size; x++) {
for (var y = 0; y < this.map_size; y++) {
if (this.map[x][y] == 1) {
for (var xx = x - 1; xx <= x + 1; xx++) {
for (var yy = y - 1; yy <= y + 1; yy++) {
if (this.map[xx][yy] == 0) this.map[xx][yy] = 2;
}
}
}
}
}
},
FindClosestRoom: function (room) {
var mid = {
x: room.x + (room.w / 2),
y: room.y + (room.h / 2)
};
var closest = null;
var closest_distance = 1000;
for (var i = 0; i < this.rooms.length; i++) {
var check = this.rooms[i];
if (check == room) continue;
var check_mid = {
x: check.x + (check.w / 2),
y: check.y + (check.h / 2)
};
var distance = Math.min(Math.abs(mid.x - check_mid.x) - (room.w / 2) - (check.w / 2), Math.abs(mid.y - check_mid.y) - (room.h / 2) - (check.h / 2));
if (distance < closest_distance) {
closest_distance = distance;
closest = check;
}
}
return closest;
},
SquashRooms: function () {
for (var i = 0; i < 10; i++) {
for (var j = 0; j < this.rooms.length; j++) {
var room = this.rooms[j];
while (true) {
var old_position = {
x: room.x,
y: room.y
};
if (room.x > 1) room.x--;
if (room.y > 1) room.y--;
if ((room.x == 1) && (room.y == 1)) break;
if (this.DoesCollide(room, j)) {
room.x = old_position.x;
room.y = old_position.y;
break;
}
}
}
}
},
DoesCollide: function (room, ignore) {
for (var i = 0; i < this.rooms.length; i++) {
if (i == ignore) continue;
var check = this.rooms[i];
if (!((room.x + room.w < check.x) || (room.x > check.x + check.w) || (room.y + room.h < check.y) || (room.y > check.y + check.h))) return true;
}
return false;
}
}
var Renderer = {
canvas: null,
ctx: null,
size: 512,
scale: 0,
Initialize: function () {
this.canvas = document.getElementById('canvas');
this.canvas.width = this.size;
this.canvas.height = this.size;
this.ctx = canvas.getContext('2d');
this.scale = this.canvas.width / Dungeon.map_size;
},
Update: function () {
for (var y = 0; y < Dungeon.map_size; y++) {
for (var x = 0; x < Dungeon.map_size; x++) {
var tile = Dungeon.map[x][y];
if (tile == 0) this.ctx.fillStyle = '#351330';
else if (tile == 1) this.ctx.fillStyle = '#64908A';
else this.ctx.fillStyle = '#424254';
this.ctx.fillRect(x * this.scale, y * this.scale, this.scale, this.scale);
}
}
}
};
var Helpers = {
GetRandom: function (low, high) {
return~~ (Math.random() * (high - low)) + low;
}
};
Dungeon.Generate();
Renderer.Initialize();
Renderer.Update(Dungeon.map);
}
</script>
这是Origional
<piece> <!-- Body of the page -->
<canvas id='canvas'></canvas>
<p>Room Count</p>
<label for="MinRoomCount">Minimum</label>
<input type="number" id="MinRoomCount" name="MinRoomCount" value="1"></input>
<label for="MaxRoomCount">Maximum</label>
<input type="number" id="MaxRoomCount" name="MaxRoomCount" value="10"></input>
<p>Room Size</p>
<label for="MinRoomSize">Minimum</label>
<input type="number" id="MinRoomSize" name="MinRoomSize" value="5"></input>
<label for="MaxRoomSize">Maximum</label>
<input type="number" id="MaxRoomSize" name="MaxRoomSize" value="15"></input>
<input type="button" onclick="regenerate()"></input>
<script>
function regenerate(){
var Dungeon = {
map: null,
map_size: 200,
rooms: [],
Generate: function () {
this.map = [];
for (var x = 0; x < this.map_size; x++) {
this.map[x] = [];
for (var y = 0; y < this.map_size; y++) {
this.map[x][y] = 0;
}
}
var room_count = Helpers.GetRandom(1, 100);
var min_size = 5;
var max_size = 15;
for (var i = 0; i < room_count; i++) {
var room = {};
room.x = Helpers.GetRandom(1, this.map_size - max_size - 1);
room.y = Helpers.GetRandom(1, this.map_size - max_size - 1);
room.w = Helpers.GetRandom(min_size, max_size);
room.h = Helpers.GetRandom(min_size, max_size);
if (this.DoesCollide(room)) {
i--;
continue;
}
room.w--;
room.h--;
this.rooms.push(room);
}
this.SquashRooms();
for (i = 0; i < room_count; i++) {
var roomA = this.rooms[i];
var roomB = this.FindClosestRoom(roomA);
pointA = {
x: Helpers.GetRandom(roomA.x, roomA.x + roomA.w),
y: Helpers.GetRandom(roomA.y, roomA.y + roomA.h)
};
pointB = {
x: Helpers.GetRandom(roomB.x, roomB.x + roomB.w),
y: Helpers.GetRandom(roomB.y, roomB.y + roomB.h)
};
while ((pointB.x != pointA.x) || (pointB.y != pointA.y)) {
if (pointB.x != pointA.x) {
if (pointB.x > pointA.x) pointB.x--;
else pointB.x++;
} else if (pointB.y != pointA.y) {
if (pointB.y > pointA.y) pointB.y--;
else pointB.y++;
}
this.map[pointB.x][pointB.y] = 1;
}
}
for (i = 0; i < room_count; i++) {
var room = this.rooms[i];
for (var x = room.x; x < room.x + room.w; x++) {
for (var y = room.y; y < room.y + room.h; y++) {
this.map[x][y] = 1;
}
}
}
for (var x = 0; x < this.map_size; x++) {
for (var y = 0; y < this.map_size; y++) {
if (this.map[x][y] == 1) {
for (var xx = x - 1; xx <= x + 1; xx++) {
for (var yy = y - 1; yy <= y + 1; yy++) {
if (this.map[xx][yy] == 0) this.map[xx][yy] = 2;
}
}
}
}
}
},
FindClosestRoom: function (room) {
var mid = {
x: room.x + (room.w / 2),
y: room.y + (room.h / 2)
};
var closest = null;
var closest_distance = 1000;
for (var i = 0; i < this.rooms.length; i++) {
var check = this.rooms[i];
if (check == room) continue;
var check_mid = {
x: check.x + (check.w / 2),
y: check.y + (check.h / 2)
};
var distance = Math.min(Math.abs(mid.x - check_mid.x) - (room.w / 2) - (check.w / 2), Math.abs(mid.y - check_mid.y) - (room.h / 2) - (check.h / 2));
if (distance < closest_distance) {
closest_distance = distance;
closest = check;
}
}
return closest;
},
SquashRooms: function () {
for (var i = 0; i < 10; i++) {
for (var j = 0; j < this.rooms.length; j++) {
var room = this.rooms[j];
while (true) {
var old_position = {
x: room.x,
y: room.y
};
if (room.x > 1) room.x--;
if (room.y > 1) room.y--;
if ((room.x == 1) && (room.y == 1)) break;
if (this.DoesCollide(room, j)) {
room.x = old_position.x;
room.y = old_position.y;
break;
}
}
}
}
},
DoesCollide: function (room, ignore) {
for (var i = 0; i < this.rooms.length; i++) {
if (i == ignore) continue;
var check = this.rooms[i];
if (!((room.x + room.w < check.x) || (room.x > check.x + check.w) || (room.y + room.h < check.y) || (room.y > check.y + check.h))) return true;
}
return false;
}
}
var Renderer = {
canvas: null,
ctx: null,
size: 512,
scale: 0,
Initialize: function () {
this.canvas = document.getElementById('canvas');
this.canvas.width = this.size;
this.canvas.height = this.size;
this.ctx = canvas.getContext('2d');
this.scale = this.canvas.width / Dungeon.map_size;
},
Update: function () {
for (var y = 0; y < Dungeon.map_size; y++) {
for (var x = 0; x < Dungeon.map_size; x++) {
var tile = Dungeon.map[x][y];
if (tile == 0) this.ctx.fillStyle = '#351330';
else if (tile == 1) this.ctx.fillStyle = '#64908A';
else this.ctx.fillStyle = '#424254';
this.ctx.fillRect(x * this.scale, y * this.scale, this.scale, this.scale);
}
}
}
};
var Helpers = {
GetRandom: function (low, high) {
return~~ (Math.random() * (high - low)) + low;
}
};
Dungeon.Generate();
Renderer.Initialize();
Renderer.Update(Dungeon.map);
}
</script>
</piece>