Struggling to remove specific items from an array in javascript, the [array].splice function seems to be causing issues.
This piece of code is designed to detect collisions between SVG objects (for a game). The goal is to eliminate 3 objects that the player intersects with.
Here's what I have so far:
svg=document.getElementById("canvas");
function checkcollision(){
var r0=document.getElementById("rhb1").getBoundingClientRect(), r1=svg.createSVGRect(); r1.x=r0.left; r1.y=r0.top; r1.width=r0.width; r1.height=r0.height;
var collisions=svg.getIntersectionList(r1,null), len=collisions.length;
console.log(collisions);
for(i=len-1;i>=0;i--){
if(collisions[i].id=="renclosure"||collisions[i].id=="cplayer"||collisions[i].id=="rhb1"){
collisions.splice(i,1);
}
}
console.log(collisions);
if(collisions.length>0){
return true;
}
else{
return false;
}
}
An instance of how the collisions array looks on the console:
[<rect id="renclosure" x="0" y="0" width="15360" height="8640" class="st0"></rect>, <circle id="cplayer" cx="960" cy="540" r="50" class="st1"></circle>, <rect id="rhb1" x="0" y="0" width="100" height="100" class="st2" transform="translate(910, 490) rotate(0 050 050)"></rect>]
(directly copied).
Nevertheless, Google Chrome consistently throws up an error "Uncaught TypeError: collisions.splice is not a function" and troubleshooting this proves perplexing.