hit function when hits a enemy makes all bullets disapear

Question

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

Please remove any code that is not directly related to your question/problem ([How to create a Minimal, Reproducible Example](https://stackoverflow.com/help/minimal-reproducible-example)) and then fix the indentation. — Andreas, Nov 04 '19 at 18:38
Not a duplicate, but this seems very similar to another recent question: https://stackoverflow.com/q/58646131/757839 — BCDeWitt, Nov 04 '19 at 18:40
well i need a game screen, player, movement, on space press, the other things to prevent hitting a wall . im just dealing with the hitObject function. — tmanrocks909, Nov 04 '19 at 18:43
A snippet would help people but im not sure how to implement that — tmanrocks909, Nov 04 '19 at 18:48
ill try when I get home. ty yea I tried something like that but how u formatted it Is a lot different. — tmanrocks909, Nov 04 '19 at 22:56

score 0 · Accepted Answer · answered Nov 04 '19 at 19:24

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>

the bullet should do 1 damage when it hits enemy then disappear. ill look into splice when I get home. my snippet does exactly what I want but it makes all the bullets disappear on enemy hit. not just the bullet that hits the enemy. so the new one should make only the element of the array that hits the enemy disapear — tmanrocks909, Nov 04 '19 at 22:58
i feel like that is close though. I wish it was easy to do the opposite of ```bullets.push(bullet); bullets.forEach((bullet) => { bullet.newPos(); // update and check for collisions bullet.update();``` — tmanrocks909, Nov 05 '19 at 02:46
acually what u did give me sort of works thanks. now i just need to make it so only 1 bullet comes out at a time. its not perfect tho. if theres a thing to set = to bullets to make it get my desired result id apreciate it. atm i have ```bullets = bullets.splice(bullets.indexOf(this), 1);``` — tmanrocks909, Nov 05 '19 at 02:58
Adding `bullets = ...` to my suggestion is likely not what you want - it will set `bullets` to the one bullet you were looking to remove instead of the "array - 1". Making only one bullet fire at a time is a separate issue which likely deserves its own question...you'd need to store and check against the previous state of each button. If this answers the original question, please don't forget to upvote and/or accept! — BCDeWitt, Nov 05 '19 at 15:50
thanks . yea I was confused why the current one does like 3-4 damage on hit. ill try to figure out single bullet on my own. atm its like 3-4 bullets fire on a good space press. i need that 1 at a time then a attack speed function. — tmanrocks909, Nov 06 '19 at 14:49
didnt accept the answer because bullets wernt doing 1 damage but your answer is the best ive seen to my problem this far. i think i need to change my shoot function first to be difrent. mabey use a for loop to create a bullet on button press then on enemy hit remove that element that hit it. — tmanrocks909, Nov 06 '19 at 14:57

hit function when hits a enemy makes all bullets disapear

1 Answers1