随机矩形生成生成彼此相邻的所有矩形

Question

我正在为 canvas 中的一款游戏随机生成矩形，我添加了一些代码来防止随机生成的矩形重叠，但它并没有阻止我的矩形重叠，而是让所以它必须重叠，否则它不会放置它。这是我的代码（我知道它很乱而且没有优化）

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

乱码就是有bug的代码

我无法弄清楚你做错了什么，因为代码很乱。

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

我没有修复您的代码，而是 re-written 创建了一些函数并重命名了许多对象。

部分重写

创建随机矩形

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);
    }
}

希望这能帮助您解决问题。

随机矩形生成生成彼此相邻的所有矩形

Random rect generation generating all rects next to each other

javascript

random

canvas

html5-canvas

乱码就是有bug的代码

部分重写