javascript - 我的太空侵略者游戏命中检测不起作用，因为子弹的 x 和 y 位置尽管已定义但“未定义”

Question

我正在制作太空侵略者游戏，而且进展顺利。然而，我已经广泛地寻找在游戏中实现命中检测的方法。我即将完成一个，但我遇到了我不理解且无法修复的错误。

当我定义我的玩家子弹对象时，我从 开始var playerShot，然后在第 3259 行调用该变量，playerShot = new PlayerShot(player.x, player.y, player.speedX, player.speedY);。我在第 180 行定义了 PlayerShot 函数：function PlayerShot(x, y, speedX, speedY) {

this.x = x;

this.y = y;

this.speedX = speedX;

this.speedY = speedY;

this.draw = function() {

    context.fillStyle = "white";

    context.fillRect(this.x + 25, this.y, playerSize-15, playerSize+1); 

};

this.move = function() {

    this.x = this.x + this.speedX;

    this.y = this.y + this.speedY;

};

我的错误是在参考第 220、242 和 3101 行时说“未定义不是构造”，即使我已经写过：if (playerShot.y >= this.y && playerShot.y <= this.y + AlienSize && playerShot.x >= this.x && playerShot.x <= this.x + AlienSize) {。

我不明白为什么会出现此错误，感谢您提供任何帮助。这是我的网页，我的代码在检查中

var score = 0;

var lives = 2;

function showScore() {

  var currentScore = document.getElementById("playerScore").innerHTML = score;

}

function showLives() {

  var currentLives = document.getElementById("playerLives").innerHTML = lives;

}

var playerShot;

var canShoot = true;

// A canvas is used to draw graphics (using a 2d context)

var canvas = document.getElementById('mainGame');

var context = canvas.getContext('2d');

// The size of the player (width and height)

var playerSize = 20;

var AlienSize = 5;

var smallAlienArray = [];

var mediumAlienArray = [];

var largeAlienArray = [];

var playerShotArray = [];

var alienBombArray = [];

// Object storing properties for the player

var player = {

  // Variables for storing the position of the player, and their speed

  x: 100 - playerSize / 2,

  y: 700 - playerSize / 2,

  speedX: 0,

  speedY: 0,

  // This uses the position variables to draw a lime rectangle

  drawMain: function() {

    context.fillStyle = 'lime';

    context.fillRect(this.x, this.y, playerSize + 40, playerSize - 1);

  },

  // This updates the position variables, by adding/subtracting the current speed variables

  move: function() {

    this.x = this.x + this.speedX;

    this.y = this.y + this.speedY;

  },

  hp: function() {


    if (lives == 3) {

      context.fillStyle = 'lime';

      context.fillRect(this.x, this.y, playerSize + 40, playerSize - 1);

    } else if (lives == 2) {

      context.fillStyle = 'orange';

      context.fillRect(this.x, this.y, playerSize + 40, playerSize - 1);

    } else if (lives == 1) {

      context.fillStyle = 'red';

      context.fillRect(this.x, this.y, playerSize + 40, playerSize - 1);

    }

  }

};
var playerGun = {

  x: 125 - playerSize / 2,

  y: 677 - playerSize / 2,

  speedX: 0,

  speedY: 0,

  drawGun: function() {

    context.fillStyle = 'lime';

    context.fillRect(this.x, this.y, playerSize - 10, playerSize + 3);

  },

  shoot: function() {

    bulletShot = true;


  },

  move: function() {

    this.x = this.x + this.speedX;

    this.y = this.y + this.speedY;

  }

};

function alienBomb(x, y, speedX, speedY) {

  this.x = x;

  this.y = y;

  this.speedX = speedX;

  this.speedY = speedY;

  this.draw = function() {

    context.fillStyle = 'white';

    context.beginPath();

    context.arc(this.x, this.y, 5, 0, 2 * Math.PI);

    context.stroke();

    context.fill();

  };

  this.move = function() {

    this.x = this.x + this.speedX;

    this.y = this.y + this.speedY;

  };

}

function PlayerShot(x, y, speedX, speedY) {

  this.x = x;

  this.y = y;

  this.speedX = speedX;

  this.speedY = speedY;

  this.draw = function() {

    context.fillStyle = "white";

    context.fillRect(this.x + 25, this.y, playerSize - 15, playerSize + 1);

  };

  this.move = function() {

    this.x = this.x + this.speedX;

    this.y = this.y + this.speedY;

  };

}

//alien drawings go here

function loop() {

  function testForHit() {

    while (barricade1.HP > 0) {

      if (playerShot.x == barricade1.x && playerShot.y == barricade1.y) {

        barricade1.HP = barricade1.HP - 1;

        if (barricade1.HP == 0 && barricade1.isVisible()) {

          barricade1.removeVisiblilty();

        }

      }
    }

    while (barricade2.HP > 0) {

      if (playerShot.x == barricade2.x && playerShot.y == barricade2.y) {

        barricade2.HP = barricade2.HP - 1;

        if (barricade2.HP == 0 && barricade2.isVisible()) {

          barricade2.removeVisiblilty();

        }

      }

    }

    if (playerShot.x == mediumAlien.x && playerShot.y == mediumAlien.y) {
      //delete mediumAlien from array and canvas
      //delete bullet from canvas

      score = score + 75;
    } else if (playerShot.x == smallAlien.x && playerShot.y == smallAlien.y) {
      //delete smallAlien from array and canvas
      //delete bullet from canvas

      score = score + 100;
    } else if (playerShot.x == largeAlien.x && playerShot.y == largeAlien.y) {
      //delete bigAlien from array and canvas
      //delete bullet from canvas

      score = score + 50
    } else if (playerShot.x == ufo.x && playerShot.y == ufo.y) {

      var i = Math.floor((Math.random() * 250) + 50);

      score = score + i;
    } else if (alienBomb.x == player.x && alienBomb.y == player.y) {

      lives = lives - 1;

      if (lives == 0) {

        document.write("<h1>GAME OVER</h1>");

      }

    }
  }

  function testForAlienShot(alienType, alienBombNumber) {

    if (alienBombNumber <= 4 && alienType == 1) {

      var alienBomb = new alienBomb(largeAlien.x, largeAlien.y, largeAlien.speedX, largeAlien.speedY);

      alienBomb.speedX = 0;

      alienBomb.speedY = 2;

      alienBombArray.push(alienBomb);

      testForHit();

    } else if (alienBombNumber <= 4 && alienType == 2) {

      var alienBomb = new alienBomb(mediumAlien.x, mediumAlien.y, mediumAlien.speedX, mediumAlien.speedY);

      alienBomb.speedX = 0;

      alienBomb.speedY = 2;

      alienBombArray.push(alienBomb);

      testForHit();

    } else if (alienBombNumber <= 4 && alienType == 3) {

      var alienBomb = new alienBomb(smallAlien.x, smallAlien.y, smallAlien.speedX, smallAlien.speedY);

      alienBomb.speedX = 0;

      alienBomb.speedY = 2;

      alienBombArray.push(alienBomb);

      testForHit();

    }

  }

  // Clear context

  context.clearRect(0, 0, canvas.width, canvas.height);

  //make the aliens

  //medium alien sprite

  mediumAlienArray.push(mediumAlien.drawMediumAlien());

  mediumAlienArray.push(mediumAlien.drawMediumAlien2());

  mediumAlienArray.push(mediumAlien.drawMediumAlien3());

  mediumAlienArray.push(mediumAlien.drawMediumAlien4());

  mediumAlienArray.push(mediumAlien.drawMediumAlien5());

  mediumAlienArray.push(mediumAlien.drawMediumAlien6());

  mediumAlien.move();

  mediumAlien.mediumAlienMovement();

  //small alien
  smallAlienArray.push(smallAlien.drawSmallAlien());

  smallAlienArray.push(smallAlien.drawSmallAlien2());

  smallAlienArray.push(smallAlien.drawSmallAlien3());

  smallAlien.move();

  smallAlien.smallAlienMovement();

  //large alien
  largeAlienArray.push(largeAlien.drawLargeAlienPosY());

  largeAlienArray.push(largeAlien.drawLargeAlien2());

  largeAlienArray.push(largeAlien.drawLargeAlien3());

  largeAlienArray.push(largeAlien.drawLargeAlien4());

  largeAlienArray.push(largeAlien.drawLargeAlien5());

  largeAlienArray.push(largeAlien.drawLargeAlien6());

  //drawing the 2nd row of aliens large aliens

  largeAlienArray.push(largeAlien.drawLargeAlien7());

  largeAlienArray.push(largeAlien.drawLargeAlien8());

  largeAlienArray.push(largeAlien.drawLargeAlien9());

  largeAlienArray.push(largeAlien.drawLargeAlien10());

  largeAlienArray.push(largeAlien.drawLargeAlien11());

  largeAlienArray.push(largeAlien.drawLargeAlienNegY());

  largeAlienArray.push(largeAlien.move());

  largeAlienArray.push(largeAlien.largeAlienMovement());

  //make the UFO
  ufo.drawUFO();

  ufo.move();

  ufo.testForUfoBounds();

  //make the barricades
  barricade.drawBarricade1();

  barricade.drawBarricade2();

  barricade.drawBarricade3();

  barricade.drawBarricade4();

  barricade.drawBarricade5();

  for (var i = 0; i < playerShotArray.length; i += 1) {

    var playerShotObject = playerShotArray[i];

    playerShotObject.move();

    playerShotObject.draw();

  }

  // make the player
  player.move();

  player.drawMain();

  player.hp();

  playerGun.drawGun();

  playerGun.move();

  for (var x = 0; x < alienBombArray.length; x += 1) {

    var alienBombObject = alienBombArray[i];

    alienBombObject.move();

    alienBombObject.draw();

    setTimeout(Math.floor((Math.random() * 5000) + 1));

  }
  // Keep looping through new frames

  requestAnimationFrame(loop);
}

// Event listeners enable the players to interact, with events such as mouse clicks or keys being pressed 

document.addEventListener('keydown', function(e) {

  // Player arrow keys, create movement using speedX and speedY 

  if (e.key == "ArrowRight") {

    player.speedX = 4;

    playerGun.speedX = 4;

  } else if (e.key == "ArrowLeft") {

    player.speedX = -4;

    playerGun.speedX = -4;

  }

});

document.addEventListener('keyup', function(f) {

  if (f.key == "ArrowRight") {

    player.speedX = 0;

    playerGun.speedX = 0;

  } else if (f.key == "ArrowLeft") {

    playerGun.speedX = 0;

    player.speedX = 0;

  }

});

document.addEventListener('keydown', function(fire) {

  if (fire.keyCode == 32 && canShoot == true) {

    // Create a new playershot
    playerShot = new PlayerShot(player.x, player.y, player.speedX, player.speedY);

    playerShot.speedX = 0;

    playerShot.speedY = -8;

    playerShotArray.push(playerShot);

    canShoot = false;

  }

});

document.addEventListener('keyup', function(rest) {

  if (rest.keyCode == 32) {

    canShoot = true;

  }

});

// Start the game by calling the first frame

requestAnimationFrame(loop);

@font-face {
  font-family: "Arcade";
  src: url("retroFont.TFF");
  /* Font source: dafont.com */
}

body {
  text-align: center;
  color: white;
  background-color: black;
  font-family: "Arcade";
  font-size: 25px;
}

#lives {
  float: right;
  padding-left: 850px;
  position: absolute;
}

#score {
  float: left;
  padding-left: 340px;
  position: absolute;
}

canvas {
  border: 1px solid white;
  margin: auto;
  display: block;
  background: radial-gradient(#585858 5%, black, black 95%);
}

strong {
  color: lime;
}

#livesNumber {
  width: 0;
  height: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-bottom: 50px solid lime;
  margin-bottom: 260px;
  margin-left: 50px;
  position: absolute;
}

#livesNumber2 {
  width: 0;
  height: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-bottom: 50px solid lime;
  margin-bottom: 260px;
  margin-left: 125px;
  position: absolute;
}

#livesNumber3 {
  width: 0;
  height: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-bottom: 50px solid lime;
  margin-bottom: 260px;
  margin-left: 200px;
  position: absolute;
}

#spaceInvaderMediumBackground {
  box-shadow: 0 0 0 1em white, 0 1em 0 1em white, -2.5em 1.5em 0 .5em white, 2.5em 1.5em 0 .5em white, -3em -3em 0 0 white, 3em -3em 0 0 white, -2em -2em 0 0 white, 2em -2em 0 0 white, -3em -1em 0 0 white, -2em -1em 0 0 white, 2em -1em 0 0 white, 3em -1em 0 0 white, -4em 0 0 0 white, -3em 0 0 0 white, 3em 0 0 0 white, 4em 0 0 0 white, -5em 1em 0 0 white, -4em 1em 0 0 white, 4em 1em 0 0 white, 5em 1em 0 0 white, -5em 2em 0 0 white, 5em 2em 0 0 white, -5em 3em 0 0 white, -3em 3em 0 0 white, 3em 3em 0 0 white, 5em 3em 0 0 white, -2em 4em 0 0 white, -1em 4em 0 0 white, 1em 4em 0 0 white, 2em 4em 0 0 white;
  background: white;
  width: 1em;
  height: 1em;
  overflow: hidden;
  position: absolute;
  margin: -50px 0px 70px 65px;
}

#spaceInvaderMediumBackground2 {
  box-shadow: 0 0 0 1em white, 0 1em 0 1em white, -2.5em 1.5em 0 .5em white, 2.5em 1.5em 0 .5em white, -3em -3em 0 0 white, 3em -3em 0 0 white, -2em -2em 0 0 white, 2em -2em 0 0 white, -3em -1em 0 0 white, -2em -1em 0 0 white, 2em -1em 0 0 white, 3em -1em 0 0 white, -4em 0 0 0 white, -3em 0 0 0 white, 3em 0 0 0 white, 4em 0 0 0 white, -5em 1em 0 0 white, -4em 1em 0 0 white, 4em 1em 0 0 white, 5em 1em 0 0 white, -5em 2em 0 0 white, 5em 2em 0 0 white, -5em 3em 0 0 white, -3em 3em 0 0 white, 3em 3em 0 0 white, 5em 3em 0 0 white, -2em 4em 0 0 white, -1em 4em 0 0 white, 1em 4em 0 0 white, 2em 4em 0 0 white;
  background: white;
  width: 1em;
  height: 1em;
  overflow: hidden;
  position: absolute;
  margin: -50px 0px 70px 1573px;
}

.spaceInvaderMedium {
  box-shadow: 0 0 0 1em white, 0 1em 0 1em white, -2.5em 1.5em 0 .5em white, 2.5em 1.5em 0 .5em white, -3em -3em 0 0 white, 3em -3em 0 0 white, -2em -2em 0 0 white, 2em -2em 0 0 white, -3em -1em 0 0 white, -2em -1em 0 0 white, 2em -1em 0 0 white, 3em -1em 0 0 white, -4em 0 0 0 white, -3em 0 0 0 white, 3em 0 0 0 white, 4em 0 0 0 white, -5em 1em 0 0 white, -4em 1em 0 0 white, 4em 1em 0 0 white, 5em 1em 0 0 white, -5em 2em 0 0 white, 5em 2em 0 0 white, -5em 3em 0 0 white, -3em 3em 0 0 white, 3em 3em 0 0 white, 5em 3em 0 0 white, -2em 4em 0 0 white, -1em 4em 0 0 white, 1em 4em 0 0 white, 2em 4em 0 0 white;
  background: white;
  width: 1em;
  height: 1em;
  overflow: hidden;
}

<!doctype html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>Space Invaders</title>

  <link rel="stylesheet" href="style.css">

</head>

<body onload="getPlayerName()">

  <div onload="showScore()">

    <h1>
      Space Invaders
    </h1>

    <div id="life">

      <p id="lives">

        Lives: <strong id="playerLives"></strong>

      </p>

    </div>

    <p id="score">

      Score: <strong id="playerScore"></strong>

    </p>

    <canvas id="mainGame" width="1000" height="800" style="border: 2px solid lime">

			</canvas>

    <p id="spaceInvaderMediumBackground">

    </p>

    <p id="spaceInvaderMediumBackground2">

    </p>

    <p id="playerName">

    </p>

    <br />

    <script src="spaceinvaders.js"></script>

  </div>

</body>

</html>

标签： javascripthtmlcss