JavaScript 房间自动生成器演示动画

Room Generator. 调整参数，切分房屋空间生成你想要的房型。

JavaScript

《使用js把svg图形转成png图像》申请公开！

第三方库
作品简介 2138
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

(function() {
    var $, Room, RoomGenerator, Tile, TileContainer, genInterval, height, maxVolume, minVolume, reset, tiles, width,
        indexOf = [].indexOf || function(item) {
            for (var i = 0, l = this.length; i < l; i++) {
                if (i in this && this[i] === item) return i;
            }
            return -1;
        };

$ = jQuery;

width = 30;

height = 15;

minVolume = 25;

maxVolume = 50;

Tile = (function() {
        function Tile(x1, y1) {
            this.x = x1;
            this.y = y1;
            this.draw();
        }

Tile.prototype.draw = function() {
            var newDiv;
            newDiv = document.createElement("div");
            return this.display = jQuery(newDiv).addClass('tile').appendTo('body').css({
                top: this.y * 20,
                left: this.x * 20
            });
        };

Tile.prototype.remove = function() {
            return this.display.remove();
        };

return Tile;

})();

Room = (function() {
        function Room() {
            this.tiles = [];
            this.walls = [];
            this.doors = [];
            this.color = surfacecurve.color("#336").hue(Math.random() * 255).hex6();
        }

Room.prototype.addTile = function(tile) {
            this.tiles.push(tile);
            tile.room = this;
            return tile.display.addClass('allocated').css({
                'background': this.color
            });
        };

Room.prototype.containsWall = function(tile) {
            var k, len, ref, wall;
            ref = this.walls;
            for (k = 0, len = ref.length; k < len; k++) {
                wall = ref[k];
                if (wall.tile === tile) {
                    return wall;
                }
            }
            return false;
        };

Room.prototype.addWall = function(tile, nextRoom) {
            var existing;
            existing = this.containsWall(tile);
            if (existing) {
                existing.nextRoom = nextRoom;
            } else {
                this.walls.push({
                    tile: tile,
                    nextRoom: nextRoom
                });
            }
            return tile.display.addClass('wall');
        };

Room.prototype.wallsByRooms = function() {
            var k, len, pos, ref, res, rooms, wall;
            rooms = [];
            res = [];
            ref = this.walls;
            for (k = 0, len = ref.length; k < len; k++) {
                wall = ref[k];
                pos = rooms.indexOf(wall.nextRoom);
                if (pos === -1) {
                    pos = rooms.length;
                    rooms.push(wall.nextRoom);
                    res.push({
                        room: wall.nextRoom,
                        tiles: []
                    });
                }
                res[pos].tiles.push(wall.tile);
            }
            return res;
        };

Room.prototype.addDoor = function(tile, nextRoom) {
            this.doors.push({
                tile: tile,
                nextRoom: nextRoom
            });
            return tile.display.addClass('door');
        };

Room.prototype.doorsForRoom = function(room) {
            var door, k, len, ref, res;
            res = [];
            ref = this.doors;
            for (k = 0, len = ref.length; k < len; k++) {
                door = ref[k];
                if (door.nextRoom === room) {
                    res.push(door.tile);
                }
            }
            return res;
        };

return Room;

})();

RoomGenerator = (function() {
        function RoomGenerator(tiles1, minVolume1, maxVolume1) {
            this.tiles = tiles1;
            this.minVolume = minVolume1;
            this.maxVolume = maxVolume1;
            this.directions = [{
                x: 1,
                y: 0
            }, {
                x: -1,
                y: 0
            }, {
                x: 0,
                y: 1
            }, {
                x: 0,
                y: -1
            }];
            this.corners = [{
                x: 1,
                y: 1
            }, {
                x: -1,
                y: -1
            }, {
                x: -1,
                y: 1
            }, {
                x: 1,
                y: -1
            }];
            this.allDirections = this.directions.concat(this.corners);
            this.rooms = [];
            this.free = this.tiles.allTiles().filter((function(_this) {
                return function(tile) {
                    var direction, k, len, next, ref;
                    ref = _this.allDirections;
                    for (k = 0, len = ref.length; k < len; k++) {
                        direction = ref[k];
                        next = _this.tiles.getTile(tile.x + direction.x, tile.y + direction.y);
                        if (next == null) {
                            return false;
                        }
                    }
                    return true;
                };
            })(this));
        }

RoomGenerator.prototype.calcul = function() {
            var i;
            i = 0;
            while (this.step() || this.newRoom()) {
                i++;
            }
            this.createDoors();
            return this.rooms;
        };

RoomGenerator.prototype.newRoom = function() {
            if (this.free.length) {
                this.volume = Math.floor(Math.random() * (this.maxVolume - this.minVolume)) + this.minVolume;
                return this.room = new Room();
            }
        };

RoomGenerator.prototype.randomDirections = function() {
            var i, j, o, x;
            o = this.directions.slice();
            j = void 0;
            x = void 0;
            i = o.length;
            while (i) {
                j = Math.floor(Math.random() * i);
                x = o[--i];
                o[i] = o[j];
                o[j] = x;
            }
            return o;
        };

RoomGenerator.prototype.step = function() {
            var success, tries;
            if (this.room) {
                if (this.free.length && this.room.tiles.length < this.volume - 1) {
                    if (this.room.tiles.length) {
                        tries = this.randomDirections();
                        success = false;
                        while (tries.length && !success) {
                            success = this.expand(this.room, tries.pop(), this.volume);
                        }
                        if (!success) {
                            this.RoomDone();
                        }
                        return success;
                    } else {
                        this.allocateTile(this.randomFreeTile(), this.room);
                        return true;
                    }
                } else {
                    this.RoomDone();
                    return false;
                }
            }
        };

RoomGenerator.prototype.RoomDone = function() {
            this.rooms.push(this.room);
            this.allocateWalls(this.room);
            return this.room = null;
        };

RoomGenerator.prototype.expand = function(room, direction, max) {
            var k, len, next, ref, second, success, tile;
            if (max == null) {
                max = 0;
            }
            success = false;
            ref = room.tiles;
            for (k = 0, len = ref.length; k < len; k++) {
                tile = ref[k];
                if (max === 0 || room.tiles.length < max) {
                    if (next = this.tileOffsetIsFree(tile, direction)) {
                        this.allocateTile(next, room);
                        success = true;
                    }
                    if ((second = this.tileOffsetIsFree(tile, direction, 2)) && !this.tileOffsetIsFree(tile, direction, 3)) {
                        this.allocateTile(second, room);
                    }
                }
            }
            return success;
        };

RoomGenerator.prototype.allocateWalls = function(room) {
            var direction, k, len, next, nextRoom, otherSide, ref, results, tile;
            ref = room.tiles;
            results = [];
            for (k = 0, len = ref.length; k < len; k++) {
                tile = ref[k];
                results.push((function() {
                    var l, len1, ref1, results1;
                    ref1 = this.allDirections;
                    results1 = [];
                    for (l = 0, len1 = ref1.length; l < len1; l++) {
                        direction = ref1[l];
                        next = this.tiles.getTile(tile.x + direction.x, tile.y + direction.y);
                        if ((next != null) && next.room !== room) {
                            if (indexOf.call(this.corners, direction) < 0) {
                                otherSide = this.tiles.getTile(tile.x + direction.x * 2, tile.y + direction.y * 2);
                                nextRoom = (otherSide != null ? otherSide.room : void 0) != null ? otherSide.room : null;
                                room.addWall(next, nextRoom);
                                if (nextRoom != null) {
                                    nextRoom.addWall(next, room);
                                }
                            }
                            results1.push(this.allocateTile(next));
                        } else {
                            results1.push(void 0);
                        }
                    }
                    return results1;
                }).call(this));
            }
            return results;
        };

RoomGenerator.prototype.createDoors = function() {
            var door, k, len, ref, results, room, walls;
            ref = this.rooms;
            results = [];
            for (k = 0, len = ref.length; k < len; k++) {
                room = ref[k];
                results.push((function() {
                    var l, len1, ref1, results1;
                    ref1 = room.wallsByRooms();
                    results1 = [];
                    for (l = 0, len1 = ref1.length; l < len1; l++) {
                        walls = ref1[l];
                        if ((walls.room != null) && room.doorsForRoom(walls.room) < 1) {
                            door = walls.tiles[Math.floor(Math.random() * walls.tiles.length)];
                            room.addDoor(door, walls.room);
                            results1.push(walls.room.addDoor(door, room));
                        } else {
                            results1.push(void 0);
                        }
                    }
                    return results1;
                })());
            }
            return results;
        };

RoomGenerator.prototype.allocateTile = function(tile, room) {
            var index;
            if (room == null) {
                room = null;
            }
            if (room != null) {
                room.addTile(tile);
            }
            index = this.free.indexOf(tile);
            if (index > -1) {
                return this.free.splice(index, 1);
            }
        };

RoomGenerator.prototype.tileOffsetIsFree = function(tile, direction, multiply) {
            if (multiply == null) {
                multiply = 1;
            }
            return this.tileIsFree(tile.x + direction.x * multiply, tile.y + direction.y * multiply);
        };

RoomGenerator.prototype.tileIsFree = function(x, y) {
            var tile;
            tile = this.tiles.getTile(x, y);
            if ((tile != null) && indexOf.call(this.free, tile) >= 0) {
                return tile;
            } else {
                return false;
            }
        };

RoomGenerator.prototype.randomFreeTile = function() {
            return this.free[Math.floor(Math.random() * this.free.length)];
        };

return RoomGenerator;

})();

TileContainer = (function() {
        function TileContainer() {
            this.coords = {};
            this.tiles = [];
        }

TileContainer.prototype.addTile = function(tile) {
            this.tiles.push(tile);
            if (this.coords[tile.x] == null) {
                this.coords[tile.x] = {};
            }
            return this.coords[tile.x][tile.y] = tile;
        };

TileContainer.prototype.getTile = function(x, y) {
            var ref;
            if (((ref = this.coords[x]) != null ? ref[y] : void 0) != null) {
                return this.coords[x][y];
            }
        };

TileContainer.prototype.allTiles = function() {
            return this.tiles.slice();
        };

TileContainer.prototype.clearAll = function() {
            var k, len, ref, tile;
            ref = this.tiles;
            for (k = 0, len = ref.length; k < len; k++) {
                tile = ref[k];
                tile.remove();
            }
            this.coords = {};
            return this.tiles = [];
        };

return TileContainer;

})();

this.tiles = tiles = new TileContainer();

reset = function() {
        var gen, k, l, ref, ref1, x, y;
        tiles.clearAll();
        for (x = k = 0, ref = width; 0 <= ref ? k <= ref : k >= ref; x = 0 <= ref ? ++k : --k) {
            for (y = l = 0, ref1 = height; 0 <= ref1 ? l <= ref1 : l >= ref1; y = 0 <= ref1 ? ++l : --l) {
                tiles.addTile(new Tile(x, y));
            }
        }
        return this.gen = gen = new RoomGenerator(tiles, minVolume, maxVolume);
    };

reset();

this.rooms = gen.calcul();

$(".widthInput").val(width).change(function() {
        return width = $(this).val();
    });

$(".heightInput").val(height).change(function() {
        return height = $(this).val();
    });

$(".minVolumeInput").val(minVolume).change(function() {
        return minVolume = $(this).val();
    });

$(".maxVolumeInput").val(maxVolume).change(function() {
        return maxVolume = $(this).val();
    });

genInterval = null;

$('.controls .calcul').click(function() {
        reset();
        return genInterval = setInterval((function(_this) {
            return function() {
                if (!(gen.step() || gen.newRoom())) {
                    gen.createDoors();
                    _this.rooms = gen.rooms;
                    return clearInterval(genInterval);
                }
            };
        })(this), 30);
    });

}).call(this);

编译

CSS

HTML

Room Generator. 调整参数，切分房屋空间生成你想要的房型。

JavaScript

编辑器支持Emmet

快捷键

Room Generator. 调整参数，切分房屋空间生成你想要的房型。

JavaScript

JavaScript 自动旋转的色彩演示动画

JavaScript 冰球随机进球位置概率演示动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：