jeu-laser/jeu.js

// sélectionne le vaisseau sur la page HTML
const vaisseau = document.querySelector(".vaisseau");
const cadreGris = vaisseau.parentElement;

// gestion des obstacles
const obstacles = document.querySelectorAll(".obstacle");
obstacles.forEach(positionneObstacleAleatoirement);
// crée 1 nouvel obstacles régulièrement
setInterval(function () {
  const nouvelObstacle = document.createElement("div");
  nouvelObstacle.classList.add("obstacle");
  cadreGris.appendChild(nouvelObstacle);
  positionneObstacleAleatoirement(nouvelObstacle);
}, 3000);

function positionneObstacleAleatoirement(obstacle) {
  // taille de l'obstacle aléatoire (max 50px par 30px)
  const [MIN_WIDTH, MAX_WIDTH] = [30, 50];
  const [MIN_HEIGHT, MAX_HEIGHT] = [30, 50];
  const width =
    Math.floor(Math.random() * (MAX_WIDTH - MIN_WIDTH + 1)) + MIN_WIDTH;
  const height =
    Math.floor(Math.random() * (MAX_HEIGHT - MIN_HEIGHT + 1)) + MIN_HEIGHT;
  obstacle.style.width = width + "px";
  obstacle.style.height = height + "px";

  // positionne l'obstacle de manière aléatoire sur le plateau (cadre gris)
  const [MIN_HORIZONTAL, MAX_HORIZONTAL] = [
    cadreGris.offsetLeft,
    cadreGris.offsetLeft + cadreGris.offsetWidth - obstacle.offsetWidth,
  ];
  const [MIN_VERTICAL, MAX_VERTICAL] = [
    cadreGris.offsetTop + vaisseau.offsetHeight + 10,
    cadreGris.offsetTop + cadreGris.offsetHeight - obstacle.offsetHeight,
  ];

  obstacle.style.top =
    Math.floor(Math.random() * (MAX_VERTICAL - MIN_VERTICAL + 1)) +
    MIN_VERTICAL +
    "px";
  obstacle.style.left =
    Math.floor(Math.random() * (MAX_HORIZONTAL - MIN_HORIZONTAL + 1)) +
    MIN_HORIZONTAL +
    "px";
}

// fais bouger le vaisseau horizontalement lorsque l'on tape "flèche droite" ou "flèche gauche"
document.addEventListener("keydown", function (event) {
  const [MIN, MAX] = [
    cadreGris.offsetLeft,
    cadreGris.offsetLeft + cadreGris.offsetWidth - vaisseau.offsetWidth,
  ];
  const PAS = 10;

  if (event.key == "ArrowRight") {
    console.debug("DROITE");
    if (vaisseau.offsetLeft >= MAX - PAS) {
      vaisseau.style.left = MAX + "px";
    } else {
      vaisseau.style.left = vaisseau.offsetLeft + PAS + "px";
    }
  } else if (event.key == "ArrowLeft") {
    console.debug("GAUCHE");
    if (vaisseau.offsetLeft <= MIN + PAS) {
      vaisseau.style.left = MIN + "px";
    } else {
      vaisseau.style.left = vaisseau.offsetLeft - PAS + "px";
    }
  } else if (event.key == " ") {
    console.debug("TIR");

    // tir avec un rayon vert vers le bas
    const rayon = document.createElement("div");
    rayon.classList.add("rayon");
    rayon.style.top = vaisseau.offsetTop + vaisseau.offsetHeight + "px";
    rayon.style.left = vaisseau.offsetLeft + vaisseau.offsetWidth / 2 + "px";
    cadreGris.appendChild(rayon);

    // animation du rayon vers le bas
    const ANIMATION_PAS = 10;
    const ANIMATION_VITESSE = Math.floor(Math.random() * 100) + 1;
    const intervalId = setInterval(function () {
      rayon.style.top = rayon.offsetTop + ANIMATION_PAS + "px";
      // si le rayon sort du cadre gris, on l'arrête
      if (rayon.offsetTop >= cadreGris.offsetHeight + cadreGris.offsetTop) {
        clearInterval(intervalId);
        rayon.remove();
        return;
      }

      // si le rayon touche un obstacle (x / y), on l'arrête et on supprime l'obstacle
      const obstacles = document.querySelectorAll(".obstacle");
      obstacles.forEach(function (obstacle) {
        if (
          rayon.offsetLeft >= obstacle.offsetLeft &&
          rayon.offsetLeft <= obstacle.offsetLeft + obstacle.offsetWidth &&
          rayon.offsetTop >= obstacle.offsetTop &&
          rayon.offsetTop <= obstacle.offsetTop + obstacle.offsetHeight
        ) {
          clearInterval(intervalId);
          rayon.remove();
          obstacle.remove();
          // joue un son d'explosion
          setTimeout(function () {
            const sonExplosion = document.getElementById("explosion");
            sonExplosion.currentTime = 0;
            sonExplosion.volume = 0.35;
            sonExplosion.play();
          }, 100);
        }
      });
    }, ANIMATION_VITESSE);

    // joue un son de tir
    const sonTir = document.getElementById("tir");
    sonTir.currentTime = 0;
    sonTir.play();
  }
});