Javascript添加四个&；每秒减去两张图像

我试图建立一个网站，每秒钟，四张图片会出现在页面上的一个随机位置，然后两张图片会消失。因此，四个图像将在半秒钟内出现，两个图像将在半秒钟内消失，使其成为1秒的执行

我试图用视觉来表现地球上每秒钟有四个人出生，两个人去世。我使用一个名为“sunflower.png”的图像来执行此操作

我的朋友建议我这样开始我的代码，但我不能让它正常工作。相反，我的图片会弹出一秒钟，然后一个图像错误图标会继续重复。我做错了什么？多谢各位

无标题文件
.向日葵{
宽度：100px；
高度：100px；
}
函数deleteImage（）{
const imagesAlreadyOnScreen=document.getElementsByClassName（“sunflower”）；
const indexToRemove=Math.floor（Math.random（）*imagesAlreadyOnScreen.length）；
ImagesReadyOnScreen[indexToRemove].remove（）；
}
const parentElement=document.getElementById（“主容器”）；
函数addImage（）{
const img=document.createElement（“img”）；
setAttribute（'src'，'imageLink'）；
parentElement.appendChild（img）
}
设置间隔（deleteImage，500）；
窗口设置间隔（addImage，250）；

要添加的图像有两个方面：

a） src属性需要设置为“images/sunflower.png”-这将停止图像损坏问题

b） 它需要一类“sunflower”，以便它显示在可删除图像列表中

function addImage() {
    const img = document.createElement("img");    

    img.setAttribute('src', 'images/sunflower.png');

    img.classList.add('sunflower');

    parentElement.appendChild(img) 
}

首先，我们需要某种网格，这样我们就不会在另一个人的图片上显示一个人的图片。我创建了一个样本10x10网格，其中包含100px x 100px的图像

我已经为Person对象创建了一个类，该类将根据出生和死亡间隔创建和删除

根据可用网格位置的数量，我初始化了一个包含100个元素（最大人数）的数组，范围从0到99

设定出生间隔，每500ms出生4个新的人（对象）

然后，1000毫秒后，死亡间隔开始，2人死亡

当然，这只是一个示例代码，可以帮助您开始。您可以完全删除网格逻辑并在父元素上使用随机的x、y位置

您还可以注释掉TransformCSS规则以查看完整大小的网格

//网格可以容纳的所有位置：0-99
常量网格=[…数组（100）].map（（（ux，idx）=>idx）；
//从栅格阵列获取随机位置（0-99）：
函数getRandomPos（）{
返回grid.splice（Math.floor（Math.random（）*grid.length-1），1）[0]；
}
//从随机位置获取x和y栅格坐标：
函数getXYfromPos（randomPos）{
常数x=随机位置%10；
常数y=数学楼层（随机位置/10）；
返回{x，y}
}
//从人物数组中随机获取一个人（将死亡），该数组包含所有当前活着的人：
函数getRandomPerson（）{
返回人物[Math.floor（Math.random（）*people.length-1）]；
}
//显示随机图像的URL：
常量URL=[”https://picsum.photos/id", "100/100" ];
//要递增的计数器，以便每次创建一个新人时，我们都会得到一个新图像：
设计数器=0；
//将容纳出生的人的阵列：
const people=[]；
班主任{
构造函数（）{
this.img=document.createElement（“img”）；
this.img.setAttribute（“src”，`${URL[0]}/${++counter}/${URL[1]}`）；
this.randomPos=getRandomPos（）；
常量xy=getXYfromPos（this.randomPos）
这个.x=xy.x；
这个.y=xy.y；
this.img.style.left=（this.x*100）+'px'；
this.img.style.top=（this.y*100）+'px'；
document.querySelector（“content”）.appendChild（this.img）；
人,推(这个),；
}
删除（）{
this.img.remove（）；
grid.push（this.randomPos）；
people.splice（people.indexOf（this），1）；
}
}
让出生间隔；
让死亡区间；
函数start（）{
birthInterval=setInterval（函数（）{
新人（）；
新人（）；
新人（）；
新人（）；
//console.log（“4个人出生：）”；
如果（！死亡区间）{
deathInterval=setInterval（函数（）{
const randomPerson1=getRandomPerson（）；
randomPerson1&&randomPerson1.remove（）；
const randomPerson2=getRandomPerson（）；
randomPerson2&&randomPerson2.remove（）；
//日志（“2人死亡：（”）；
}, 500  );
}
}, 500 );
}
document.querySelector（“#start”）.onclick=start；
document.querySelector（“#stop”）.onclick=function（）{
出生间隔；
净空间隔（死亡间隔）；
}

*{框大小：边框框；}
img{
显示：内联块；
位置：绝对位置；
}
身体{
保证金：0；
填充：0；
背景：黑色；
}
#内容{
边框：1px纯白；
保证金：0自动；
宽度：1000px；
高度：1000px；
位置：相对位置；
排名：0；
左：0；
背景图像：
线性梯度（0度，白色0%，白色1%，透明2%，透明），
线性梯度（90度，白色0%，白色1%，透明2%，透明）；
背景尺寸：100px 100px；
变换：比例（0.6）translateY（-200px）；
}

StartStop