Version initiale du jeu
on peut se déplacer horizontalement et tirer sur des obstacles, qui disparaissent en poussant un crimain
Pierre Martin
7 months ago
commit
c7cf8d67c5
@ -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>
|
||||
@ -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;
|
||||
}
|
||||
@ -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>
|
||||
@ -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();
|
||||
}
|
||||
});
|
||||
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 193 KiB |
Binary file not shown.
@ -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