commit c7cf8d67c5ebaaf783c897b47164dbad2b7dec8f Author: Pierre Martin Date: Sat Oct 14 16:54:02 2023 +0200 Version initiale du jeu on peut se déplacer horizontalement et tirer sur des obstacles, qui disparaissent en poussant un cri diff --git a/index.html b/index.html new file mode 100644 index 0000000..670eb06 --- /dev/null +++ b/index.html @@ -0,0 +1,155 @@ + + + + + + Jeu laser + + + +

Jeu laser

+ + Jouer immédiatement + +

Description

+

+ Le jeu laser est un jeu de réflexes dans lequel il faut viser des cibles + avec un laser. Le but est de faire le meilleur score possible en touchant + le plus de cibles en un minimum de temps. +

+

Pour jouer il faut :

+ + +

Technologies utilisées

+

+ Ce jeu utilise des technologies web. On peut y jouer depuis un navigateur + web. +

+ + +

Graphismes

+

+ Le style graphique est inspiré de l'espace et des jeux vidéo des années + 80. +

+ +

Crédits

+

+ Ce jeu a été réalisé par Luka et son père pour découvrir la programmation. + Nous avons été aidés par l'intelligence artificielle !
+ Les graphismes sont de Luka. +

+

+ Images par + Bing Images +
+ Sons par + La Sonothèque +

+ + + + diff --git a/jeu.css b/jeu.css new file mode 100644 index 0000000..cc78426 --- /dev/null +++ b/jeu.css @@ -0,0 +1,88 @@ +/* Styles pour le fond de page: spatial! */ +body { + background-image: url("media/fond.jpeg"); + background-size: cover; + background-repeat: no-repeat; + background-attachment: fixed; +} + +/* Styles pour le plateau de jeu */ +#plateau { + display: grid; + grid-template-columns: repeat(10, 1fr); + grid-template-rows: repeat(10, 1fr); + gap: 5px; + width: 500px; + height: 500px; + margin: 0 auto; + background-color: #1c004e; + padding: 10px; + box-shadow: 0 0 50px white; +} + +/* Styles pour le rayon laser */ +.rayon { + position: absolute; + width: 5px; + height: 15px; + background-color: rgb(3, 211, 3); + border-radius: 50%; + z-index: 1; +} + +/* Styles pour le vaisseau spatial: triangle vers le bas */ +.vaisseau { + position: absolute; + width: 0; + height: 0; + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-top: 40px solid rgb(242, 1, 1); + z-index: 2; +} + +/** Styles pour les obstacles: rectangles blancs */ +.obstacle { + position: absolute; + background-color: gray; + width: 50px; + height: 30px; + border-radius: 50%; + z-index: 4; + box-shadow: 0 0 10px white; +} + +/* Centrer le titre et le mettre en gros */ +h1 { + text-align: center; + font-size: 3em; + margin-top: 0; + color: #fffb01; +} +/* le paragraphe d'introduction avec de la marge */ +.intro { + margin: 1em auto; + font-size: 1.3em; + line-height: 1.5em; + color: #fffb01; + max-width: 500px; +} + +/* le paragraphe d'aide discret mais visible centré sous le plateau */ +.aide { + text-align: center; + font-size: 1.1em; + line-height: 1.5em; + background-color: rgb(195, 195, 195); + color: black; + margin: 1em auto; + padding: 1em 0; + max-width: 500px; +} +kbd { + background-color: rgb(0, 0, 0); + font-size: 1.3em; + color: rgb(255, 255, 255); + padding: 0.1em 0.3em; + border-radius: 0.2em; +} diff --git a/jeu.html b/jeu.html new file mode 100644 index 0000000..a2f64c4 --- /dev/null +++ b/jeu.html @@ -0,0 +1,42 @@ + + + + + + Jeu Laser + + + +

Jeu laser

+ +

+ Bienvenue dans le jeu laser !
+ Le jeu laser est un jeu de réflexes dans lequel il faut viser des + obstacles avec un laser. +

+ +
+ +
+ + +
+
+
+
+
+ +

+ Appuyez sur la barre Espace pour tirer un rayon laser. +
+ Utilisez les flèches ← et → pour vous déplacer. +

+ + + + + + + + + diff --git a/jeu.js b/jeu.js new file mode 100644 index 0000000..c627896 --- /dev/null +++ b/jeu.js @@ -0,0 +1,119 @@ +// 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(); + } +}); diff --git a/media/cri.wav b/media/cri.wav new file mode 100644 index 0000000..8b449d4 Binary files /dev/null and b/media/cri.wav differ diff --git a/media/fond.jpeg b/media/fond.jpeg new file mode 100644 index 0000000..1a79d8a Binary files /dev/null and b/media/fond.jpeg differ diff --git a/media/tir.wav b/media/tir.wav new file mode 100644 index 0000000..e7dad2f Binary files /dev/null and b/media/tir.wav differ diff --git a/readme.md b/readme.md new file mode 100644 index 0000000..6da65a3 --- /dev/null +++ b/readme.md @@ -0,0 +1,54 @@ +# Jeu laser + +## Description + +Le jeu laser est un jeu de réflexes dans lequel il faut viser des obstacles avec un laser. Le but est de toucher tous les obstacles en un minimum de temps. + +De nouveaux obstacles apparaissent régulièrement. + +Pour jouer il faut : + +- se déplacer avec les flèches du clavier +- tirer avec la barre espace + +## Technologies utilisées + +Ce jeu utilise des technologies web. On peut y jouer depuis un navigateur web. + +- HTML pour la structure de la page +- CSS pour la mise en forme +- JavaScript pour la logique du jeu et l'interaction avec le joueur + +## Graphismes + +Le style graphique est inspiré de l'espace et des jeux vidéo des années 80. + +## Évolutions possibles + +### Victoire + +Le jeu pourrait être amélioré en ajoutant un système de victoire. Par exemple, le joueur pourrait gagner lorsqu'il n'y a plus d'obstacles à l'écran. + +### Défaite + +Le jeu pourrait être amélioré en ajoutant un système de défaite. Par exemple, le joueur pourrait perdre lorsqu'il y a trop d'obstacles à l'écran. + +### Munitions limitées + +Le jeu pourrait être amélioré en ajoutant un système de munitions limitées. Par exemple, le joueur pourrait avoir un nombre de tirs limité qui se recharge au fil du temps. + +### Compatibilité mobile + +Le jeu pourrait être amélioré en ajoutant une compatibilité mobile. Par exemple, le joueur pourrait tirer en appuyant sur un bouton à l'écran et se déplacer en inclinant son téléphone. + +## Bugs connus + +- En cas de redimensionnement de la fenêtre, le jeu ne se redimensionne pas correctement et les obstacles peuvent se retrouver en dehors de la zone de jeu. + +## Développement + +Démarrer la prévisualisation du jeu : + +```bash +npx live-server . +```