javascript removing from array

Question

hello okay my code runs but when i make a collision with the star it erases everything on my screen but what i need it to do is just remove the star from the screen but keep everything else in place because i plan to make a scoreboard for each star collected later on.

stars=[];
 stars.push({
 x: 420,
 y: 580,
width: 5,
height: 5
 });
function update() {
var score = 0; // score starts at 0
// check keys
if (keys[38] || keys[32]) {
 // up arrow or space
 if (!player.jumping && player.grounded) {
 player.jumping = true;
 player.grounded = false;
 player.velY = -player.speed * 2;
 }
}
if (keys[39]) {
 // right arrow
 if (player.velX < player.speed) {
 player.velX++;
 }
}
if (keys[37]) {
 // left arrow
 if (player.velX > -player.speed) {
 player.velX--;
 }
}
player.velX *= friction;
player.velY += gravity;
ctx.clearRect(0, 0, width, height);
ctx.fillStyle = "black";
ctx.beginPath();
player.grounded = false;
for (var i = 0; i < boxes.length; i++) {
 ctx.rect(boxes[i].x, boxes[i].y, boxes[i].width, boxes[i].height);
 var dir = colCheck(player, boxes[i]);
 if (dir === "left" || dir === "right") {
 player.velX = 0;
 player.jumping = false;
 } else if (dir === "bottom") {
 player.grounded = true;
 player.jumping = false;
 } else if (dir === "top") {
 player.velY *= -1;
 }
 }
for (var i = 0; i < stars.length; i++) {
 ctx.rect(stars[i].x, stars[i].y, stars[i].width, stars[i].height);
 var dir = colCheck(player, stars[i]);
 if(dir != null)
 {
delete stars[0];
//stars.splice(a);
//var resultObject = search.splice(0,1);
 }
 if (dir === "left" || dir === "right") {
 player.velX = 0;
 player.jumping = false;
 } else if (dir === "bottom") {
 player.grounded = true;
 player.jumping = false;
 } else if (dir === "top") {
 player.velY *= -1;
 }
}
 if(player.grounded){
 player.velY = 0;
}
player.x += player.velX;
player.y += player.velY;
ctx.fill();
ctx.fillStyle = "blue";
ctx.fillRect(player.x, player.y, player.width, player.height);
 requestAnimationFrame(update);
 }

Answer 1

replace

delete stars[0];

with

stars.splice(i,1);
i--;

I don't see anything else that is wrong.

• harris: i figured it out its stars.splice(i,1); :D i was bothered by this for past 2 hours but simple mistake :P
• deme72: if you dont want to change the loop direction like Pluto said just add i--; after the splice as i edited it to show
• Pluto: Just make sure the i-- only appears where you remove an element. Otherwise you'll have an infinite loop.

Answer 2

You'll want to traverse through the array backwards. This is because the length of the array will change when you remove elements (and indices of elements at the end will be reduced by one), so your current code would skip some of the elements. In addition, as deme72 said, you'll want to use .splice(index, count) to remove items from the array. See the updated code below:

for (var i = stars.length - 1; i >= 0; i--) {
 // Other code
 stars.splice(i, 1);
}