Question

我正在尝试创建一个在地图上生成随机地牢的游戏；我无法生成房间并使它们彼此连接。

我正在尝试创建一种算法，一旦玩家通过一扇门，它就会生成一个房间。我使用创建了一个大小可变的地图，并创建了第一个房间。但是我不知道如何使用第一个房间作为参考来开始生成新房间，以及如何解决随机地牢生成器所遇到的各种问题（让房间与地图限制或另一个房间相撞，检查是否有足够的空间一个房间（如果空间不够，则不创建门），让房间重复使用另一个房间放置的门等）。我想到的创建房间的想法是，一旦玩家踏上一扇门；算法运行一个函数来计算玩家和最近的墙壁之间的距离（从房间或地图限制）；一旦生成器知道该空间中房间的最大大小；它滚动一个随机数来确定房间的宽度和高度（在某些参数下）；当房间产生时，它将有4扇门；这样一来，我就可以消除拥有无法进入的房间的可能性。我将在下面留下我开发的代码；您可以为我提供的有关此操作的任何帮助或想法都将非常有用。感谢您的关注:)。

<html lang="es">
 <head>
  <title>Mi primera página</title>
    <meta charset="utf-8"/>
    <script type="text/javascript">

    let mapa = [];
    let ancho;
    let alto;
    let zoom;

    function crearMapa(){
        var color='';
        var cuadro=zoom;

        zoom.oninput=cuadro; 

        document.getElementById('pantalla').innerHTML = ''; 
        mapa = [];
        let div = document.createElement('div');
        div.id = 'mesa';
        div.style.width = ancho*cuadro + 'px';
        div.style.height = alto*cuadro + 'px';

        for (var j=0;j<alto;j++){

            let fila = [];

            for(var i=0;i<ancho;i++){
                if((i+j)%2==0) color='#ffffff'; else color='#cccccc';

                let casilla = document.createElement('div');
                casilla.id = 'cuadro-x-y';
                casilla.style.width = cuadro + 'px';
                casilla.style.height = cuadro + 'px';
                casilla.style.float = 'left';
                casilla.style.backgroundColor = color;

                fila.push(casilla);
                div.appendChild(casilla);
            }
            mapa.push(fila);
        }

        document.getElementById('pantalla').appendChild(div);
    }


    function pintaMapa(){
        ancho=parseInt(document.getElementById('ancho').value);
        alto=parseInt(document.getElementById('alto').value);
        zoom=document.getElementById('slider').value;

        crearMapa(); 
        generaSalaInicial();
    }

const MAX_ALTURA = 10;
const MAX_ANCHURA = 10;
const MIN_ALTURA = 5;
const MIN_ANCHURA = 5;
const MURO = 'red';
const MURO2 = 'green';
const MURO3 = 'blue';



function generaAltura() {
    return Math.floor(Math.random() * MAX_ALTURA + MIN_ALTURA);
}

function generaAnchura() {
    return Math.floor(Math.random() * MAX_ANCHURA + MIN_ANCHURA);
}

    let altura;
    let anchura;
function generaSalaInicial() {
     altura = generaAltura();
     anchura = generaAnchura();
    let anchura0 = 0;
    let altura0 = 0;
    let mitadAltura = Math.trunc(altura / 2);
    let mitadAnchura = Math.trunc(anchura / 2);

    for (let i = 0; i <= anchura; i++) {
            mapa[anchura0][i].style.backgroundColor = MURO;
        if (i != mitadAnchura) {
            mapa[altura][i].style.backgroundColor = MURO;
        }
    }

    for (let i = 0; i <= altura; i++) {
            mapa[i][altura0].style.backgroundColor = MURO;
        if (i != mitadAltura) {
            mapa[i][anchura].style.backgroundColor = MURO;
        }
    }

}


var disDer;
var disIzq;
var disArr;
var disAbj;

function distDer(){
         disDer = ancho - anchura - 1 ;
}

function distIzq(){//broken
         disIzq = anchura + 1;
}

function distArr(){//broken
         disArr = altura + 1;
}

function distAbj(){
         disAbj = alto - altura - 1;
}

function genHabDer(){//broken

    distDer()
    alert(disDer)

    let anchura0 = anchura +1;
    let altura0 = altura +1;
altura = generaAltura();
anchura = generaAnchura();
    let mitadAltura = Math.trunc(altura / 2);
    let mitadAnchura = Math.trunc(anchura / 2);
    for (let i = 0; i <= anchura; i++) {
            mapa[anchura0][i].style.backgroundColor = MURO2;
        if (i != mitadAnchura) {
            mapa[altura][i].style.backgroundColor = MURO2;
        }
    }

    for (let i = 0; i <= altura; i++) {
            mapa[i][altura0].style.backgroundColor = MURO2;
        if (i != mitadAltura) {
            mapa[i][anchura].style.backgroundColor = MURO2;
        }
    }



}   


    </script>
 </head>
 <body onkeypress="mover(event)">


    AnchoMapa (en cuadritos): <input type="text" id="ancho" value="40"><br>
    AltoMapa (en cuadritos): <input type="text" id="alto" value="40"><br>
    Tamaño de la cuadricula (zoom) (se mide en pixels):<input type="range" id="slider" min="1" max="50" value="10"  onchange="pintaMapa()">
    <br>
    <input type="button" value="Crear Mapa" onclick="pintaMapa()"><br>
    <div id="pantalla"></div>

 </body>
</html>```

尝试创建JS随机地牢生成器

0 个答案: