Javascript 如何在创建图像库时解决全局变量的问题？

我正在尝试为pixi.js中的一个项目创建一个点击式图像库。你可以在我的小提琴中看到，当你点击屏幕右侧时，它会添加下一个图像。问题是，当您单击左侧删除图像时，它只会删除一个图像，而不会删除其余的图像

我知道为什么会这样，因为“image”是一个全局变量，它只包含最后添加的图像。我的函数无法获取之前添加的图像。然而，我被困在试图想出一个解决办法。有人能帮我调整代码吗？我的JS和小提琴在下面

const bodyTag=document.querySelector（“body”）
const nextTag=document.querySelector（“div.right”）
const backTag=document.querySelector（“div.left”）
let type=“WebGL”
如果（！PIXI.utils.isWebGLSupported（））{
type=“画布”
}
//别名
让Application=PIXI.Application，
loader=PIXI.loader，
resources=PIXI.loader.resources，
雪碧=PIXI.Sprite；
//创建pixi应用程序
让app=new PIXI.Application({
宽度：2000，
身高：2000，
透明：假，
反别名：是的，
决议：1
})
//将Pixi自动为您创建的画布添加到html文档中
bodyTag.appendChild（app.view）；
设image=null
设image2=null
设imageCreated=false
设阶跃=0
设左=0
变量图像=[
"https://i.imgur.com/HEwZDoW.jpg",
"https://i.imgur.com/F5XOYH7.jpg",
"https://i.imgur.com/e29HpQj.jpg",
"https://i.imgur.com/2FaU2fI.jpg",
"https://i.imgur.com/fsyrScY.jpg"
]
装载机
.添加([
图像
])
const createSprite=函数（）{
imageCreated=true
图像=新精灵（参考资料[图像[步骤]].纹理）
image.width=400；
image.height=300；
image.x=左
app.stage.addChild（图）
步骤+=1
左+=40
}
const removeSprite=函数（）{
app.stage.removeChild（图）
步骤-=1
}
loader.load（（加载器，资源）=>{
createSprite（）
})
nextTag.addEventListener（“单击”，函数（）{
console.log（“下一步”）
createSprite（）
})
addEventListener（“单击”，函数（）{
控制台日志（“返回”）
removeSprite（）
})

*{
填充：0；
保证金：0；
}
身体{
保证金：0；
填充：0；
溢出：隐藏；
}
帆布{
显示：块；
}
左分区{
位置：固定；
排名：0；
左：0；
宽度：50vw；
高度：100vh；
光标：指针；
}
右分区{
位置：固定；
排名：0；
右：0；
宽度：50vw；
高度：100vh；
光标：指针；
}

---

使用数组保存添加到屏幕上的图像，而不是将每个图像保存到单个变量和

单击左div执行图像数组上的pop，它将给出最后添加的图像并将其删除

const bodyTag=document.querySelector（“body”）
const nextTag=document.querySelector（“div.right”）
const backTag=document.querySelector（“div.left”）
let type=“WebGL”
如果（！PIXI.utils.isWebGLSupported（））{
type=“画布”
}
//别名
让Application=PIXI.Application，
loader=PIXI.loader，
resources=PIXI.loader.resources，
雪碧=PIXI.Sprite；
//创建pixi应用程序
让app=new PIXI.Application({
宽度：2000，
身高：2000，
透明：假，
反别名：是的，
决议：1
})
//将Pixi自动为您创建的画布添加到html文档中
bodyTag.appendChild（app.view）；
//使用数组存储图像
让imageSet=[]
设image2=null
设imageCreated=false
设阶跃=0
设左=0
变量图像=[
"https://i.imgur.com/HEwZDoW.jpg",
"https://i.imgur.com/F5XOYH7.jpg",
"https://i.imgur.com/e29HpQj.jpg",
"https://i.imgur.com/2FaU2fI.jpg",
"https://i.imgur.com/fsyrScY.jpg"
]
装载机
.添加([
图像
])
const createSprite=函数（）{
imageCreated=true
//创建一个图像
让图像=新精灵（参考资料[图像[步骤]].纹理）
image.width=400；
image.height=300；
image.x=左
//将创建的图像引用推送到图像数组中
imageSet.push（图像）
app.stage.addChild（图）
步骤+=1
左+=40
}
const removeSprite=函数（）{
//从图像数组中获取最后一个元素
让image=imageSet.pop（）；
app.stage.removeChild（图）
步骤-=1
//向左复位
左-=40
}
loader.load（（加载器，资源）=>{
createSprite（）
})
nextTag.addEventListener（“单击”，函数（）{
console.log（“下一步”）
createSprite（）
})
backTag.addEventListener（“单击”），函数（事件）{
控制台日志（“返回”）
removeSprite（）
})

*{
填充：0；
保证金：0；
}
身体{
保证金：0；
填充：0；
溢出：隐藏；
}
帆布{
显示：块；
}
左分区{
位置：固定；
排名：0；
左：0；
宽度：50vw；
高度：100vh；
光标：指针；
}
右分区{
位置：固定；
排名：0；
右：0；
宽度：50vw；
高度：100vh；
光标：指针；
}