Javascript Стрельба по глиняным голубям - PullRequest
0 голосов
/ 15 января 2020

В моей игре javascript есть ошибка, и я не знаю, как ее исправить:

Если я ударил глиняного голубя и продолжу стрелять, старая пуля не исчезнет (если вы выстрелите, а затем go вверх, вы увидите, как я это имею в виду)

Вот мой код:

size = 20;
startingRadiusX = 880;
endingRadiusX = 500;
startingY = 880;
endingY = 500;
actionDetected = false;
score = 0;
schuss_abgegeben = false;
var map = {
  37: false,
  38: false,
  39: false,
  40: false,
  83: false
};



function startGame() {
  mySound = new sound("sounds/background.mp3");
  myMusic = new sound("sounds/background.mp3");
  myMusic.play();
  gamearea.start();
  clock();
}

function sound(src) {
  this.sound = document.createElement("audio");
  this.sound.src = src;
  this.sound.setAttribute("preload", "auto");
  this.sound.setAttribute("controls", "none");
  this.sound.style.display = "none";
  document.body.appendChild(this.sound);

  this.play = function() {
    this.sound.play();
  }
  this.stop = function() {
    this.sound.pause();
  }
}

function updateScore() {
  gamearea.context.fillStyle = "Black"; <!--Score-->
  gamearea.context.font = "40px Verdana";
  gamearea.context.fillText("Score:" + score, 1000, 50);

}

function moveShooter(event) {
  if (!actionDetected) {
    actionDetected = true;
    movingInterval = setInterval(function() {
      shooter.move(event);
    }, 15);
  }
}

function stopShooter(event) {
  actionDetected = false;
  schuss_abgegeben = false;
  if (event.keyCode in map) {
    map[event.keyCode] = false;
  }
  clearInterval(movingInterval);
}

function canYouSpotTheProblem() {
  "use strict";
  for (counter = 0; counter < 10; counter++) {
    console.log("Happy happy");
  }
}

var gamearea = {
  canvas: document.createElement("canvas"),
  start: function() {
    this.canvas.width = 1900;
    this.canvas.height = 850;
    this.context = this.canvas.getContext("2d");
    document.body.insertBefore(this.canvas, document.body.childNodes[0]);
    t1 = new target();
    t2 = new target();
    t3 = new target();
    image = new Image();
    image.src = "Bildmaterial/explosion.png";

    this.interval = setInterval(this.updateGameArea, 100);

    window.addEventListener("keydown", moveShooter, event, function() {
      this.interval
    }); <!---Nicht fertig--->
    window.addEventListener("keyup", stopShooter, event, function() {
      this.interval
    }); <!---Nicht fertig--->
  },

  stop: function() {
    myMusic.stop();
    clearInterval(this.interval);
  },


  updateGameArea: function() {
    gamearea.clear();
    ang1 = Math.PI * cnt * 0.002;
    ((ang1 == Math.PI) ? t1 = new target() : cnt++);
    ang2 = Math.PI * cnt * 0.002;
    ((ang2 == Math.PI) ? t2 = new target() : cnt++);
    ang3 = Math.PI * cnt * 0.002;
    ((ang3 == Math.PI) ? t3 = new target() : cnt++);
    shooter.draw();
    updateScore();

    if (t1.shooted != 1) {
      t1.update(ang1);
      t1.draw("red");
    }

    if (t2.shooted != 1) {
      t2.update(ang2);
      t2.draw("green");
    }
    if (t3.shooted != 1) {
      t3.update(ang3);
      t3.draw("yellow");
    }

    if (t1.shooted == 1 && t2.shooted == 1 && t3.shooted == 1) {
      t1 = new target();
      t2 = new target();
      t3 = new target();
    }
  },
  clear: function() {
    gamearea.context.clearRect(0, 0, gamearea.canvas.width, gamearea.canvas.height);
  }
}




var shooter = {
  x: 590,
  y: 850,
  draw: function() {
    gamearea.context.fillStyle = "black";
    gamearea.context.fillRect(this.x, this.y, size, size);
    viewer.draw();
  },
  shoot: function() {
    b = new bullet(this.x);
    b.draw();
    shootingInterval = setInterval(function() {
      b.update();
    }, 10);
  },
  clear: function() {
    gamearea.context.clearRect(this.x, this.y, size, size);
    gamearea.context.clearRect(viewer.x - 60, viewer.y - 60, 120, 120);
  },
  move: function(event) {
    if (event.keyCode in map) {
      map[event.keyCode] = true;
    }
    if ((event.keyCode == 37 && shooter.x > 0) ||
      (event.keyCode == 38 && viewer.y > 0) ||
      (event.keyCode == 39 && shooter.x < 1900) ||
      (event.keyCode == 40 && viewer.y < 850) || event.keyCode == 83) {

      shooter.clear();

      if (event.keyCode == 37) {
        if (map[37] && map[38]) {
          this.x -= 10;
          viewer.x -= 10;
          viewer.y -= 10;
        } else {
          if (map[37] && map[40]) {
            this.x -= 10;
            viewer.x -= 10;
            viewer.y += 10;
          } else {
            this.x -= 10;
            viewer.x -= 10;
          }
        }
      }
      if (event.keyCode == 38) {
        if (map[38] && map[37]) {
          this.x -= 10;
          viewer.x -= 10;
          viewer.y -= 10;
        } else {
          if (map[38] && map[39]) {
            this.x += 10;
            viewer.x += 10;
            viewer.y -= 10;
          } else {
            viewer.y -= 10;
          }
        }
      }
      if (event.keyCode == 39) {
        if (map[39] && map[38]) {
          this.x += 10;
          viewer.x += 10;
          viewer.y -= 10;
        } else {
          if (map[39] && map[40]) {
            this.x += 10;
            viewer.x += 10;
            viewer.y += 10;
          } else {
            this.x += 10;
            viewer.x += 10;
          }
        }
      }
      if (event.keyCode == 40) {
        if (map[40] && map[37]) {
          this.x -= 10;
          viewer.x -= 10;
          viewer.y += 10;
        } else {
          if (map[40] && map[39]) {
            this.x += 10;
            viewer.x += 10;
            viewer.y += 10;
          } else {
            viewer.y += 10;
          }
        }
      }

      if (event.keyCode == 83) {
        if (schuss_abgegeben != true) {
          shooter.shoot();
          schuss_abgegeben = true;
          //stopShooter(event);
        }
      }

      shooter.draw();

    } else {
      //stopShooter(event);
    }
  }
}

var viewer = {
  x: 600,
  y: 300,
  draw: function() {
    gamearea.context.beginPath();
    gamearea.context.lineWidth = "3";
    gamearea.context.strokeStyle = "blue";
    gamearea.context.arc(this.x, this.y, 30, 0, 2 * Math.PI);
    gamearea.context.stroke();
    gamearea.context.closePath();
    gamearea.context.beginPath();
    gamearea.context.moveTo(this.x, this.y - 60);
    gamearea.context.lineTo(this.x, this.y + 60);
    gamearea.context.stroke();
    gamearea.context.closePath();
    gamearea.context.beginPath();
    gamearea.context.moveTo(this.x - 60, this.y);
    gamearea.context.lineTo(this.x + 60, this.y);
    gamearea.context.stroke();
    gamearea.context.closePath();
  }
}

function bullet(x) {
  this.y = 850;
  this.x = x;
  this.size = 20;
  this.draw = function() {
    gamearea.context.fillStyle = "blue";
    gamearea.context.fillRect(this.x, this.y, this.size, this.size);
  }
  this.update = function() {
    if (this.y <= viewer.y) {
      if (this.x > t1.x - this.size && this.x < t1.x + size &&
        this.y > t1.y - this.size && this.y < t1.y + size) {
        clearInterval(shootingInterval);
        if (t1.shooted != 1) {
          gamearea.context.drawImage(image, this.x, this.y, 40, 40);
          score += t1.targetScore;
        }
        t1.shooted = 1;
      }
      if (this.x > t2.x - this.size && this.x < t2.x + size &&
        this.y > t2.y - this.size && this.y < t2.y + size) {
        clearInterval(shootingInterval);
        if (t2.shooted != 1) {
          gamearea.context.drawImage(image, this.x, this.y, 40, 40);
          score += t2.targetScore;
        }
        t2.shooted = 1;
      }
      if (this.x > t3.x - this.size && this.x < t3.x + size &&
        this.y > t3.y - this.size && this.y < t3.y + size) {
        clearInterval(shootingInterval);
        if (t3.shooted != 1) {
          gamearea.context.drawImage(image, this.x, this.y, 40, 40);
          score += t3.targetScore;
        }
        t3.shooted = 1;
      }
      clearInterval(shootingInterval);

    } else {
      this.clear();
      this.y -= 20;
      this.x += 0.5;
      this.size -= 0.5;
      this.draw();
    }

  }
  this.clear = function() {
    gamearea.context.clearRect(this.x, this.y, this.size, this.size);
  }
}

function target() {
  this.y = 580;
  this.radiusY = startingY + Math.floor(Math.random() * (endingY - startingY + 1));
  this.radiusX = startingRadiusX + Math.floor(Math.random() * (endingRadiusX - startingRadiusX + 1));
  this.centerX = 900;
  this.centerY = 900;
  this.targetScore = 100;
  this.shooted = 0;
  cnt = 0;
  this.x = this.radiusX + this.centerX;
  this.draw = function(aktcol) {
    gamearea.context.fillStyle = aktcol;
    gamearea.context.fillRect(this.x, this.y, size, size);
  }
  this.update = function(aktang) {
    this.x = this.centerX + this.radiusX * Math.cos(aktang);
    this.y = this.centerY - this.radiusY * Math.sin(aktang);
  }

}


<!---Timer--->
var myTimer;

function clock() {
  myTimer = setInterval(myClock, 1000);
  var c = 120;

  function myClock() {
    document.getElementById("demo").innerHTML = --c;
    if (c == 0) {
      clearInterval(myTimer);
      alert("ZIT VERBI;)");
      gamearea.stop();
      score = 0;
    }
  }
}
canvas {
  background-image: url("Bildmaterial/landscape.jpg");
  border: 1px solid #000000;
  display: block;
  margin: auto;
}
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
  <title>Tontaubenschiessen</title>

</head>

<body>
  <p id="demo">120</p>
  <button onclick="startGame()" ; document.getElementById(&#39;demo&#39;).innerHTML=&#39;120&#39;; ">Starte das Spiel</button>

</body>
</html>

Буду очень признателен, если вы сможете мне помочь!

...