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

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

复制第一个图像并存储其他副本的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;
    }
}

var x_pixels=window.innerWidth-180；
var y_pixels=window.innerHeight-180；
var x_中屏幕=window.innerWidth/2；
var y_中屏幕=window.innerHeight/2；
var xRandom=Math.floor（Math.random（）*x_像素）+1；
var yRandom=Math.floor（Math.random（）*y_像素）+1；
var targetCollection=document.getElementById（“targetsDiv”）；
var targetCopy=targetCollection.innerHTML
var targetList=document.getElementsByClassName（“目标”）；
targetList[0]。style.display=“无”；
var targetNr=1；
var numberOfSpawns=3；
函数目标（）{
而（targetNr x|U中屏+26）|（yRandomy|U中屏+26））{
targetCollection.innerHTML+=targetCopy；
targetList[targetNr].style.left=xRandom+“px”；
targetList[targetNr].style.top=yRandom+“px”；
targetNr++；
} 
xRandom=Math.floor（Math.random（）*x_像素）+1；
yRandom=Math.floor（Math.random（）*y_像素）+1；
}
}

---

PS：我感谢你们提供的所有帮助、提示和调整：）感谢你们的帮助

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

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

HTML（添加了

style

属性）

JavaScript:

window.addEventListener（'load'，function（）{
var targetCollection=document.getElementById（“targetsDiv”）；
var template=document.getElementsByClassName（“目标”）[0]；
var targetWidth=template.offsetWidth；
var targetHeight=template.offsetHeight；
var x_pixels=window.innerWidth-targetWidth；
var y_pixels=window.innerHeight-targetHeight；
var x_中屏幕=window.innerWidth/2；
var y_中屏幕=window.innerHeight/2；
函数spawnTargets（numberOfSpawns）{
var目标=[]；
var count=0；//无限递归保护
对于（var i=0；i200）{
console.log（“放弃”）；
返回；
}
}而（（x>=x_midScreen-450&&x=y_midScreen-350 | | y=targets[j].x-targetWidth&&x=targets[j].y-targetSight&&y你想排除在屏幕中央的区域相当大，在我的小笔记本电脑上，甚至没有任何空间来显示随机定位的图像

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

HTML（添加了
style
属性）


JavaScript:
window.addEventListener（'load'，function（）{
var targetCollection=document.getElementById（“targetsDiv”）；
var template=document.getElementsByClassName（“目标”）[0]；
var targetWidth=template.offsetWidth；
var targetHeight=template.offsetHeight；
var x_pixels=window.innerWidth-targetWidth；
var y_pixels=window.innerHeight-targetHeight；
var x_中屏幕=window.innerWidth/2；
var y_中屏幕=window.innerHeight/2；
函数spawnTargets（numberOfSpawns）{
var目标=[]；
var count=0；//无限递归保护
对于（var i=0；i200）{
console.log（“放弃”）；
返回；
}
}而（（x>=x_midScreen-450&&x=y_midScreen-350 | | y=targets[j].x-targetWidth&&x=targets[j].y-targetSight&&y使用如下检查：
函数genNewTarget（）{/*Target gen code*/for（var i=0；itargets[i].x&&newTarget.xtargets[i]Y& & NealTalk.YNoTe:这只是伪代码，它不使用真实的变量/函数名。数字450, 300的意义是什么？……等等。你似乎有其他的规则，关于图像可以在哪里出现。你能解释吗？是的，我在屏幕中间有一个按钮。图像在水平面上不会出现300 px。按钮或垂直面上的200px（图像为150px）。可能有更好的方法，但我对JavaScript还比较陌生，这是我能想到的最好的笔记本电脑屏幕分辨率，在这种情况下，任何图像都不适合。你将x坐标中的750像素和y坐标中的550像素排除在外，这相当多，占据了我大部分的屏幕大小。你如何规划你的屏幕分辨率应用程序将在分辨率较小或浏览器未最大化的设备上运行？请使用如下检查：
function genNewTarget（）{/*Target gen code*/for（var i=0；itargets[i].x&&newTarget.xtargets[i].y&&newTarget.yNote:这只是伪代码，它不使用实数变量/函数名。数字450、300……等的意义是什么？关于图像可以显示在哪里，您似乎有其他规则。可以吗
<div id="targetsDiv">
    <img src="target2.png" alt="target_shot" class="target" 
        style="visibility:hidden"/>
</div>

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