如何使用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);
});