javascript - 如何使用 Javascript 防止随机生成的图像重叠

Question

我正在尝试使用一个函数在屏幕上生成随机生成的目标，以使用窗口对象属性复制要在屏幕内随机位置生成的目标的不可见图像。 为了发生这种情况，我认为图像必须将位置设置为绝对位置，但是随后可能会以重叠的方式生成多个图像，如何防止这种情况发生？

div 元素，我在其中复制第一张图像并存储其他副本。

<div id="targetsDiv">
    <img src="target2.png" alt="target_shot" class="target" />      
</div>

脚本内部:

var x_pixels = window.innerWidth - 180;
var y_pixels = window.innerHeight - 180;
var x_midScreen = window.innerWidth / 2;
var y_midScreen = window.innerHeight / 2;

var xRandom = Math.floor(Math.random()*x_pixels) +1;
var yRandom = Math.floor(Math.random()*y_pixels) +1;

var targetCollection = document.getElementById("targetsDiv");
var targetCopy = targetCollection.innerHTML
var targetList = document.getElementsByClassName("target");
targetList[0].style.display = "none";
var targetNr = 1;

var numberOfSpawns = 3;

function spawnTargets () {
    while (targetNr <= numberOfSpawns) {
        if ((xRandom < x_midScreen - 126 || xRandom > x_midScreen + 26) || (yRandom < y_midScreen - 126 || yRandom > y_midScreen + 26)) {
            targetCollection.innerHTML += targetCopy;
            targetList[targetNr].style.left = xRandom + "px";
            targetList[targetNr].style.top = yRandom + "px";
            targetNr++;
        } 
            xRandom = Math.floor(Math.random()*x_pixels) +1;
            yRandom = Math.floor(Math.random()*y_pixels) +1;
    }
}

PS:我感谢你们提供的所有帮助、提示和调整:)感谢您的帮助

Answer 1

您想要在屏幕中心排除的区域相当大，在我的小笔记本电脑上，甚至没有任何空间来显示随机定位的图像。

但无论如何，这段代码应该可以完成这项工作——我添加了一些无限循环保护，这在我的电脑上是一个救星:

HTML(添加style属性)

<div id="targetsDiv">
    <img src="target2.png" alt="target_shot" class="target" 
        style="visibility:hidden"/>
</div>

JavaScript:

window.addEventListener('load', function () {
    var targetCollection = document.getElementById("targetsDiv");
    var template = document.getElementsByClassName("target")[0];

    var targetWidth = template.offsetWidth;
    var targetHeight = template.offsetHeight;
    var x_pixels = window.innerWidth - targetWidth;
    var y_pixels = window.innerHeight - targetHeight;
    var x_midScreen = window.innerWidth / 2;
    var y_midScreen = window.innerHeight / 2;
    function spawnTargets (numberOfSpawns) {
        var targets = [];
        var count = 0; // infinite recursion protection
        for (var i = 0; i < numberOfSpawns; i++) {
            do {
                do {
                    var x = Math.floor(Math.random()*x_pixels);
                    var y = Math.floor(Math.random()*y_pixels);
                    if (count++ > 200) {
                        console.log('give up');
                        return;
                    }
                } while ((x >= x_midScreen-450 && x <= x_midScreen+300) && (y >= y_midScreen-350 || y <= y_midScreen+200));

                for (var j = 0; j < i; j++) {
                    if (x >= targets[j].x - targetWidth && x <= targets[j].x + targetWidth && 
                        y >= targets[j].y - targetHeight && y <= targets[j].y + targetHeight) break; // not ok!
                }
            } while (j < i);
            targets.push({x, y});

            img = document.createElement('img');
            img.src = template.src;
            img.setAttribute('width', targetWidth + 'px');
            img.setAttribute('height', targetHeight + 'px');
            img.className = template.className;
            targetCollection.appendChild(img);
            img.style.left = x + "px";
            img.style.top = y + "px";
        }
    }
    spawnTargets(3);
});