hit function when hits a enemy makes all bullets disapear

Im trying to make a function that when hitting a enemy makes that bullet in the array disappear.

Ive tried useing pop, slice, shift but i cant get those to work.

the closest thing Ive found is to just make the array empty but it really should be the array -1 or minus that bullet.

js fiddle: https://jsfiddle.net/tmanrocks999/64thbvm3/309/

code:

var myGamePiece;
var endGoalPiece;
var myEnemy1;
var bullets = [];
var myEnemy1Hp = 10;
var myEnemy1Armor = 0;
var damage = 1;
var playerExp = 0;
var playerMaxExp = 10;

function startGame() {
  myGameArea.start();
  myGamePiece = new component(30, 30, 'red', 0, 240);
  endGoalPiece = new component(30, 30, 'black', 450, 240);
  myEnemy1 = new component(30, 30, 'green', 200, 240);
}

var myGameArea = {
  canvas: document.createElement('canvas'),
  start: function() {
    this.canvas.width = 480;
    this.canvas.height = 270;
    this.context = this.canvas.getContext('2d');
    document.body.insertBefore(this.canvas, document.body.childNodes[0]);
    this.interval = setInterval(updateGameArea, 20);
    window.addEventListener('keydown', function(e) {
      myGameArea.key = e.keyCode;
    })
    window.addEventListener('keyup', function(e) {
      myGameArea.key = false;
    })
  },
  clear: function() {
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
  }
};

function component(width, height, color, x, y) {
  this.gamearea = myGameArea;
  this.width = width;
  this.height = height;
  this.speedX = 0;
  this.speedY = 0;
  //this.gravity = 0.05;
  //this.gravitySpeed = 0;
  this.x = x;
  this.y = y;
  this.color = color;
  this.update = function() {
    ctx = myGameArea.context;
    ctx.fillStyle = this.color;
    ctx.fillRect(this.x, this.y, this.width, this.height);
  }
  this.newPos = function() {
    this.gravitySpeed += this.gravity;
    this.x += this.speedX;
    this.y += this.speedY; //+ this.gravitySpeed;
    this.hitBottom();
    this.hitTop();
    this.hitRight();
    this.hitLeft();
    this.hitObject();
  }
  this.hitBottom = function() {
    var rockbottom = myGameArea.canvas.height - this.height;
    if (this.y > rockbottom) {
      this.y = rockbottom;
    }
  }
  this.hitTop = function() {
    var rockTop = 0;
    if (this.y < rockTop) {
      this.y = rockTop;
    }
  }

  this.hitRight = function() {
    var rockRight = myGameArea.canvas.width - this.width;
    if (this.x > rockRight) {
      this.x = rockRight;
    }
  }

  this.hitLeft = function() {
    var rockLeft = 0;
    if (this.x < rockLeft) {
      this.x = rockLeft;
    }
  }

  function enemyRespawn() {
    myEnemy1 = new component(30, 30, "green", 200, 240);
    myEnemy1Hp = 10;
    document.getElementById('myEnemy1Hp').innerHTML = myEnemy1Hp;
  }

  this.hitObject = function() {
    myGamePiece.update();
    var enemy = myEnemy1.x - 11;
    if (this.x == enemy) {
      myEnemy1Hp = myEnemy1Hp - (damage - myEnemy1Armor);
      bullets = [];

      document.getElementById('myEnemy1Hp').innerHTML = myEnemy1Hp;
      if (myEnemy1Hp <=0) {
        myEnemy1Hp = 0;
        document.getElementById('myEnemy1Hp').innerHTML = myEnemy1Hp;
        playerExp = playerExp+1;
        document.getElementById('playerExp').innerHTML = playerExp;
        if (playerExp >= playerMaxExp) {
          playerExp = 0;
          playerMaxExp = playerMaxExp * 1.5;
          damage = damage + 1;
          document.getElementById('playerExp').innerHTML = playerExp;
          document.getElementById('playerMaxExp').innerHTML = playerMaxExp;
        }
        myEnemy1 = new component(0, 0, 'green', 0, 0);
        myEnemy1.update();
        setTimeout(enemyRespawn, 5000);
      }
    }
  }
}

function shootGun() {
  let bullet = new component(11, 5, 'blue', myGamePiece.x + 27, myGamePiece.y + 13);
  bullet.newPos();
  bullet.speedX = 1;
  bullets.push(bullet);
}

function updateGameArea() {
  myGameArea.clear();
  myGamePiece.speedX = 0;
  myGamePiece.speedY = 0;
  if (myGameArea.key && myGameArea.key == 37) {
    myGamePiece.speedX = -1;
  } //left
  if (myGameArea.key && myGameArea.key == 39) {
    myGamePiece.speedX = 1;
  } //right
  if (myGameArea.key && myGameArea.key == 38) {
    myGamePiece.gravitySpeed = -1;
  } //jump
  if (myGameArea.key && myGameArea.key == 32) {
    shootGun()
  } //shoot gun
  //if (myGameArea.key && myGameArea.key == 40) {myGamePiece.speedY = 1; }// down
  myEnemy1.update();
  endGoalPiece.update();
  myGamePiece.newPos();
  myGamePiece.update();
  bullets.forEach((bullet) => {
    bullet.newPos() 
    bullet.update();
  });
  // bullet.newPos();
  // bullet.update();
}

startGame();

canvas {
  border: 4px solid #d3d3d3;
  background-color: #f1f1f1;
}

<p>use the arrow keys on you keyboard to move the red square.</p>
<span id="myEnemy1Hp">10</span> <br>
<span id="playerExp">0</span> / <span id="playerMaxExp">10</span> 🐺

I expect when the bullet hit the enemy for it to disappear then enemy takes 1 damage. but at the moment this works but if u have more then 1 bullet on the screen all the bullets disappear when 1 hits the enemy. How do i make it current bullet or array = array -1

Solution

I believe you are looking for array.splice()

In the context of your hitObject method, the code would look like this:

bullets.splice(bullets.indexOf(this), 1);

Also, there are a ton of notes in my answer to a similar question which you may find useful.

...and here's your updated game:

var myGamePiece;
var endGoalPiece;
var myEnemy1;
var bullets = [];
var myEnemy1Hp = 10;
var myEnemy1Armor = 0;
var damage = 1;
var playerExp = 0;
var playerMaxExp = 10;

function startGame() {
  myGameArea.start();
  myGamePiece = new component(30, 30, 'red', 0, 240);
  endGoalPiece = new component(30, 30, 'black', 450, 240);
  myEnemy1 = new component(30, 30, 'green', 200, 240);
}

var myGameArea = {
  canvas: document.createElement('canvas'),
  start: function() {
    this.canvas.width = 480;
    this.canvas.height = 270;
    this.context = this.canvas.getContext('2d');
    document.body.insertBefore(this.canvas, document.body.childNodes[0]);
    this.interval = setInterval(updateGameArea, 20);
    window.addEventListener('keydown', function(e) {
      myGameArea.key = e.keyCode;
    })
    window.addEventListener('keyup', function(e) {
      myGameArea.key = false;
    })
  },
  clear: function() {
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
  }
};

function component(width, height, color, x, y) {
  this.gamearea = myGameArea;
  this.width = width;
  this.height = height;
  this.speedX = 0;
  this.speedY = 0;
  //this.gravity = 0.05;
  //this.gravitySpeed = 0;
  this.x = x;
  this.y = y;
  this.color = color;
  this.update = function() {
    ctx = myGameArea.context;
    ctx.fillStyle = this.color;
    ctx.fillRect(this.x, this.y, this.width, this.height);
  }
  this.newPos = function() {
    this.gravitySpeed += this.gravity;
    this.x += this.speedX;
    this.y += this.speedY; //+ this.gravitySpeed;
    this.hitBottom();
    this.hitTop();
    this.hitRight();
    this.hitLeft();
    this.hitObject();
  }
  this.hitBottom = function() {
    var rockbottom = myGameArea.canvas.height - this.height;
    if (this.y > rockbottom) {
      this.y = rockbottom;
    }
  }
  this.hitTop = function() {
    var rockTop = 0;
    if (this.y < rockTop) {
      this.y = rockTop;
    }
  }

  this.hitRight = function() {
    var rockRight = myGameArea.canvas.width - this.width;
    if (this.x > rockRight) {
      this.x = rockRight;
    }
  }

  this.hitLeft = function() {
    var rockLeft = 0;
    if (this.x < rockLeft) {
      this.x = rockLeft;
    }
  }

  function enemyRespawn() {
    myEnemy1 = new component(30, 30, 'green', 200, 240);
    myEnemy1Hp = 10;
    document.getElementById('myEnemy1Hp').innerHTML = myEnemy1Hp;
  }

  this.hitObject = function() {
    myGamePiece.update();
    var enemy = myEnemy1.x - 11;
    if (this.x == enemy) {
      myEnemy1Hp = myEnemy1Hp - (damage - myEnemy1Armor);
      // bullets = []; // replaces all bullets
      const index = bullets.indexOf(this)
      bullets.splice(index, 1)

      document.getElementById('myEnemy1Hp').innerHTML = myEnemy1Hp;
      if (myEnemy1Hp <= 0) {
        myEnemy1Hp = 0;
        document.getElementById('myEnemy1Hp').innerHTML = myEnemy1Hp;
        playerExp = playerExp + 1;
        document.getElementById('playerExp').innerHTML = playerExp;
        if (playerExp >= playerMaxExp) {
          playerExp = 0;
          playerMaxExp = playerMaxExp * 1.5;
          damage = damage + 1;
          document.getElementById('playerExp').innerHTML = playerExp;
          document.getElementById('playerMaxExp').innerHTML = playerMaxExp;
        }
        myEnemy1 = new component(0, 0, 'green', 0, 0);
        myEnemy1.update();
        setTimeout(enemyRespawn, 5000);
      }
    }
  }
}

function shootGun() {
  let bullet = new component(11, 5, 'blue', myGamePiece.x + 27, myGamePiece.y + 13);
  bullet.newPos();
  bullet.speedX = 1;
  bullets.push(bullet);
}

function updateGameArea() {
  myGameArea.clear();
  myGamePiece.speedX = 0;
  myGamePiece.speedY = 0;
  if (myGameArea.key && myGameArea.key == 37) {
    myGamePiece.speedX = -1;
  } //left
  if (myGameArea.key && myGameArea.key == 39) {
    myGamePiece.speedX = 1;
  } //right
  if (myGameArea.key && myGameArea.key == 38) {
    myGamePiece.gravitySpeed = -1;
  } //jump
  if (myGameArea.key && myGameArea.key == 32) {
    shootGun()
  } //shoot gun
  //if (myGameArea.key && myGameArea.key == 40) {myGamePiece.speedY = 1; }// down
  myEnemy1.update();
  endGoalPiece.update();
  myGamePiece.newPos();
  myGamePiece.update();
  bullets.forEach((bullet) => {
    bullet.newPos(); // update and check for collisions
    bullet.update();
  });
  // bullet.newPos();
  // bullet.update();
}

startGame();

canvas {
  border: 4px solid #d3d3d3;
  background-color: #f1f1f1;
}

<p>use the arrow keys on you keyboard to move the red square.</p>
<span id="myEnemy1Hp">10</span> <br>
<span id="playerExp">0</span> / <span id="playerMaxExp">10</span> 🐺