Javascript 如何检测画布对象脱离画布？

当一个数组中的对象离开画布时，我试图从该数组中删除该对象。我看到这个代码适用于另一个游戏，但它不适用于我的。相反，它过早地从数组中删除对象，并且没有在正确的时间删除它们。此外，画布是用户屏幕的全尺寸。谢谢

我尝试过的代码：

while (bubbleDataIndex.val < bubbleData.length) {
        if (bubbleData[bubbleDataIndex.val].x > canvasWidth) {
            bubbleData.splice(bubbleDataIndex.val, 1);
        } 
        else {
            bubbleDataIndex.val += 1;
            console.log(bubbleDataIndex.val);
        }
    }

while（bubbleDataIndex.valcanvasWidth）{
拼接（bubbleDataIndex.val，1）；
} 
否则{
bubbleDataIndex.val+=1；
log（bubbleDataIndex.val）；
}
}

完整代码：

var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var canvasWidth=canvas.width；
var canvasHeight=canvas.height；
var canvasLeft=（canvasWidth-canvasWidth）；
var bubbleData=generateBubbles（）；
var bubbleDataIndex={
瓦尔：0
};
var possibleBubbleIndex={
x:0,，
y:0
};
无功电流x；
无功电流；
函数generateBubbles（）{
var generatedBubbleData=[]；//bubbleData从中获取其值的数组
var bubbleCount=0；
var-bubbleX=0；
var bubbleY=0；
函数yCalc（）{//生成每个圆的“y”值
无功电流；
var mathRandom=Math.floor（Math.random（）*101）；
如果（mathRandom<21）{
布普利=600；
}
如果（mathRandom<41&&mathRandom>20）{
布普利=500；
}
如果（mathRandom<61&&mathRandom>40）{
布普利=400；
}
如果（mathRandom<81&&mathRandom>60）{
布普利=300；
}
如果（mathRandom<101&&mathRandom>80）{
布普利=200；
}
返回电流；
}
var mathRandom=Math.floor（Math.random（）*101）；
函数xCalc（）{//生成每个圆的“x”值
无功电流x；
如果（mathRandom<26）{
bubbleX=Math.random（）*250；
}
如果（mathRandom<51&&mathRandom>25）{
bubbleX=Math.random（）*350；
}
如果（mathRandom<76&&mathRandom>50）{
bubbleX=Math.random（）*400；
}
如果（mathRandom>75）{
bubbleX=Math.random（）*450；
}
返回电流x；
}
而（bubbleCount<25）{//如果有25个圆，则停止生成“x”和“y”值
currentX=xCalc（）；
电流y=yCalc（）；
push（{//将“x”和“y”值添加到generatedBubbleData数组中
x:bubbleX，
y:布布利
});
if（气泡计数画布宽度+20）{
控制台日志（“删除”）；
}
否则{
bubbleDataIndex++；
}
if（泡泡数据长度<25）{
}
}*/
//ctx.imageSmoothingEnabled=false；//使图像清晰
函数gameLoop（timestamp）{//始终更新圆的位置等。
设lastTime=0；
设deltaTime=时间戳-最后时间；
lastTime=时间戳；
ctx.clearRect（0,0,800,600）；
forEach（函数（bblData）{
bblData.x+=10；
bblData.y-=1；
})
while（bubbleDataIndex.valcanvasWidth）{
拼接（bubbleDataIndex.val，1）；
}否则{
bubbleDataIndex.val+=1；
log（bubbleDataIndex.val）；
}
}
更新（deltaTime）；
draw（）；
requestAnimationFrame（gameLoop）；
}
gameLoop（）；

---

你有没有尝试过在比较x坐标时增加/减少它们的宽度？但当它们超过画布边缘时，它们甚至都不会删除。我从网站上使用了这个代码。它适用于他们的游戏，并且索引会随着时间的循环而增加，不像我的。哦，我想我知道问题出在哪里了，

>bubbleDataIndex.val

在删除循环发生之前不会重置为0。如何将其重置为0？我从中获取此代码的网站没有任何代码将其设置为0，但它总是通过0循环到最高值。关键是

canvasWidth

应该反映画布的大小。您应该在确定在使用它之前，它不会改变。它工作的一些地方是：设置它之后（在绘图功能中），使用它之前（在非画布检查之前的更新中），或者只是不断更新它（也在更新中）。例如：

…canvasWidth=canvas.width；bubbleDataIndex.val=0；而（bubbleDataIndex.val