随机矩形生成，生成所有相邻的矩形

Question

我正在为画布中的游戏生成随机矩形，我添加了一些代码来防止随机生成的矩形重叠，但是不是防止我的矩形重叠，就像它使它必须重叠否则它不会放置它。这是我的代码（我知道它很乱且未优化）

function random_place(){
var x,y,height,width
x = Math.floor(Math.random() * 10000);
y = Math.floor(Math.random() * 100);
width = Math.floor(Math.random() * (85 - 20 + 1) + 20);
height = Math.floor(Math.random() * (85 - 20 + 1) + 20);
return([x,y,width,height])
}



function generate_obstacles(obstacles_count){
var counter = 0
var placement
var placement_colide = false;
console.log(obstacle_array.length)
while(counter < obstacles_count){
placement_colide = false;
x = Math.floor(Math.random() * 10000);
y = Math.floor(Math.random() * 10000);
width = Math.floor(Math.random() * 85);
height = Math.floor(Math.random() * 60);
placement = random_place();
for(let i=0; i<obstacle_array.length; i++){
if(obstacle_array[i][0]+100 > placement[0]+(placement[2]/2)+100 || obstacle_array[i][0]+(obstacle_array[i][2]/2)+40 < placement[0]) {
if(obstacle_array[i][1]+35 > placement[1]+(placement[3]/2)+35 || obstacle_array[i][1]+(obstacle_array[i][3]/2)+35 < placement[1]){placement_colide = true; break}
}
placement_colide = true; break
}
if((placement[0] > (player_x*2)+5 || placement[0] < (player_x/2)+1.5) && placement_colide == true){
obstacle_array.push(placement);
counter++;
i = obstacle_array.length
}
}

如果更容易阅读，我也有完整的 jsfiddle 代码 https://jsfiddle.net/Fightingox/1dk0oaty/54/

有人知道这个问题吗？

Answer 1

凌乱的代码就是错误的代码

我无法弄清楚你做错了什么，因为代码一团糟。

名字太长了。您将属性设置为数组索引而不是命名属性。还有更多……

我没有修复您的代码，而是重新编写了一些函数并重命名了许多对象。

部分重写

创建一个随机矩形

const randI = range => Math.random() * range | 0; // only for positive ints
function randomGameRect() {
    const x = randI(10000);
    const y = randI(100);
    const w = randI(61) + 20;
    const h = randI(61) + 20;
    return {x, y, w, h};
}

检查两个矩形是否重叠。

function doRectsOverlay(rectA, rectB) {
    return !(                           // Overlaps if not any of...
        rectA.x > rectB.x + rectB.w ||  // left of rectA right of right of rectB
        rectB.x > rectA.x + rectA.w ||  // right of rectA left of left of rectB
        rectA.y > rectB.y + rectB.h ||  // top of rectA below bottom of rectB
        rectB.y > rectA.y + rectA.h);   // bottom of rectA above top of rectB
}

如果没有重叠，则将矩形rect 添加到矩形数组rects。

请注意，我还添加了您所做的播放器检查。我不知道你为什么这样做，所以我只是把它放进去。

function addIfNotOverlap(rect, rects) {
    if (!rects.some(r => doRectsOverlay(r, rect)) {
        
        // check player stuff. I don't know why you do this.
        if (place.x > (player_x * 2) + 5 || place.x < (player_x / 2) + 1.5) {
            rects.push(rect);
        }
    }    
}

最后一个函数取代了你的。它将count 矩形添加到矩形数组obstacleArray。该功能需要以上所有功能

function generateObstacles(count) {
    while (count-- > 0) {
        addIfNotOverlap(randomGameRect(), obstacleArray);
    }
}

希望这可以帮助您解决问题。