pierre/jeu-laser
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Version initiale du jeu

Browse Source 
on peut se déplacer horizontalement et tirer sur des obstacles, qui
disparaissent en poussant un cri
This commit is contained in:
Pierre Martin
2023-10-14 16:54:02 +02:00
commit c7cf8d67c5
8 changed files with 458 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

155
index.html Normal file
View 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>