Version initiale du jeu
on peut se déplacer horizontalement et tirer sur des obstacles, qui disparaissent en poussant un cri
This commit is contained in:
Pierre Martin
commit
c7cf8d67c5
155
index.html
Normal file
155
index.html
Normal file
@ -0,0 +1,155 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Jeu laser</title>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
background-color: black;
|
||||||
|
color: white;
|
||||||
|
font-family: Arial, sans-serif;
|
||||||
|
padding: 1em;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
color: #ffcc00;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 3em;
|
||||||
|
margin-top: 0;
|
||||||
|
color: grey;
|
||||||
|
}
|
||||||
|
h2 {
|
||||||
|
font-size: 2em;
|
||||||
|
margin-top: 0;
|
||||||
|
color: #ffcc00;
|
||||||
|
}
|
||||||
|
ul {
|
||||||
|
margin-top: 0;
|
||||||
|
padding: 1em;
|
||||||
|
}
|
||||||
|
li {
|
||||||
|
margin-left: 2em;
|
||||||
|
padding: 0.5em;
|
||||||
|
}
|
||||||
|
li:hover {
|
||||||
|
border: 1px solid rgba(211, 211, 211, 0.333);
|
||||||
|
background-color: #16165778;
|
||||||
|
cursor: crosshair;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Définition de l'animation */
|
||||||
|
@keyframes clignoter {
|
||||||
|
0% {
|
||||||
|
background-color: #161657;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
background-color: transparent;
|
||||||
|
opacity: 0.4;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
background-color: #161657;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.jouer {
|
||||||
|
display: block;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 2em;
|
||||||
|
color: white;
|
||||||
|
background-color: #161657;
|
||||||
|
margin: 2em auto;
|
||||||
|
padding: 1em;
|
||||||
|
border: 1px solid grey;
|
||||||
|
text-decoration: none;
|
||||||
|
/* faire clignoter */
|
||||||
|
animation: clignoter 2s infinite;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Jeu laser</h1>
|
||||||
|
|
||||||
|
<a href="jeu.html" class="jouer">Jouer immédiatement</a>
|
||||||
|
|
||||||
|
<h2>Description</h2>
|
||||||
|
<p>
|
||||||
|
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.
|
||||||
|
</p>
|
||||||
|
<p>Pour jouer il faut :</p>
|
||||||
|
<ul>
|
||||||
|
<li>se déplacer avec les flèches du clavier</li>
|
||||||
|
<li>tirer avec la barre espace</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h2>Technologies utilisées</h2>
|
||||||
|
<p>
|
||||||
|
Ce jeu utilise des technologies web. On peut y jouer depuis un navigateur
|
||||||
|
web.
|
||||||
|
</p>
|
||||||
|
<ul>
|
||||||
|
<li>HTML pour la structure de la page</li>
|
||||||
|
<li>CSS pour la mise en forme</li>
|
||||||
|
<li>JavaScript pour la logique du jeu et l'interaction avec le joueur</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h2>Graphismes</h2>
|
||||||
|
<p>
|
||||||
|
Le style graphique est inspiré de l'espace et des jeux vidéo des années
|
||||||
|
80.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2>Crédits</h2>
|
||||||
|
<p>
|
||||||
|
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 !<br />
|
||||||
|
Les graphismes sont de Luka.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Images par
|
||||||
|
<a
|
||||||
|
href="https://www.bing.com/images/create/fonds-de-jeu-vidc3a9o-sur-le-thc3a8me-de-l27espace3a-c3a9toil/652a9ad6375640e29c54e4d2990116a9?id=IdiiRi%2fpPop3IC6QFRSp4Q%3d%3d&view=detailv2&idpp=genimg&FORM=GCRIDP&mode=overlay"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
>Bing Images</a
|
||||||
|
>
|
||||||
|
<br />
|
||||||
|
Sons par
|
||||||
|
<a
|
||||||
|
href="https://lasonotheque.org/"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
>La Sonothèque</a
|
||||||
|
>
|
||||||
|
</p>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
<script type="text/javascript">
|
||||||
|
// lorsque l'on clique sur un élément de liste, il disparait
|
||||||
|
const elementDeListe = document.querySelectorAll("li");
|
||||||
|
console.log("Les éléments de liste", elementDeListe);
|
||||||
|
|
||||||
|
// on écoute le clic sur chaque élément de liste
|
||||||
|
elementDeListe.forEach(function (element) {
|
||||||
|
element.addEventListener("click", function () {
|
||||||
|
console.log(
|
||||||
|
"On a cliqué sur un élément de liste:",
|
||||||
|
element.textContent
|
||||||
|
);
|
||||||
|
|
||||||
|
// on ne fait rien si l'élément contient le mot "HTML"
|
||||||
|
if (element.textContent.includes("HTML")) {
|
||||||
|
window.alert("Même pas en rêve !");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// on supprime l'élément de la page
|
||||||
|
element.remove();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</html>
|
||||||
88
jeu.css
Normal file
88
jeu.css
Normal file
@ -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;
|
||||||
|
}
|
||||||
42
jeu.html
Normal file
42
jeu.html
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Jeu Laser</title>
|
||||||
|
<link rel="stylesheet" href="jeu.css" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Jeu laser</h1>
|
||||||
|
|
||||||
|
<p class="intro">
|
||||||
|
Bienvenue dans le jeu laser !<br />
|
||||||
|
Le jeu laser est un jeu de réflexes dans lequel il faut viser des
|
||||||
|
obstacles avec un laser.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div id="plateau">
|
||||||
|
<!-- Vaisseau spatial -->
|
||||||
|
<div class="vaisseau"></div>
|
||||||
|
|
||||||
|
<!-- Obstacles -->
|
||||||
|
<div class="obstacle"></div>
|
||||||
|
<div class="obstacle"></div>
|
||||||
|
<div class="obstacle"></div>
|
||||||
|
<div class="obstacle"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="aide">
|
||||||
|
Appuyez sur la barre <kbd>Espace</kbd> pour tirer un rayon laser.
|
||||||
|
<br />
|
||||||
|
Utilisez les flèches <kbd>←</kbd> et <kbd>→</kbd> pour vous déplacer.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<!-- Le son du tir et de l'explosion -->
|
||||||
|
<audio id="tir" src="media/tir.wav"></audio>
|
||||||
|
<audio id="explosion" src="media/cri.wav"></audio>
|
||||||
|
|
||||||
|
<!-- Script pour le jeu -->
|
||||||
|
<script src="jeu.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
119
jeu.js
Normal file
119
jeu.js
Normal file
@ -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();
|
||||||
|
}
|
||||||
|
});
|
||||||
BIN
media/cri.wav
Normal file
BIN
media/cri.wav
Normal file
Binary file not shown.
BIN
media/fond.jpeg
Normal file
BIN
media/fond.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 193 KiB |
BIN
media/tir.wav
Normal file
BIN
media/tir.wav
Normal file
Binary file not shown.
54
readme.md
Normal file
54
readme.md
Normal file
@ -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 .
|
||||||
|
```
|
||||||
Loading…
Reference in New Issue
Block a user