击中敌人时的击中功能使所有子弹消失

时间：2019-11-04 18:34:15

标签： javascript html

我正在尝试创建一种功能，当击中敌人时会使阵列中的子弹消失。

我曾经尝试使用弹出，切片，移位，但是我无法使它们正常工作。

我发现的最接近的东西就是将数组设为空，但实际上应该是数组-1或减去该项目符号。

js小提琴：https://jsfiddle.net/tmanrocks999/64thbvm3/309/

代码：

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> ?

我希望当子弹击中敌人以使其消失时，敌人会受到1点伤害。但是目前这是可行的，但是如果您在屏幕上有1枚以上的子弹，当1击中敌人时，所有的子弹就会消失。我如何使其成为当前的项目符号或数组=数组-1

1 个答案:

答案 0 :(得分：0)

我相信您正在寻找array.splice()

在您的hitObject方法的上下文中，代码如下所示：

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

此外，my answer to a similar question中有很多笔记可能对您有用。

...这是您的更新游戏：

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> ?

相关问题
最新问题