165 lines
4.2 KiB
HTML
165 lines
4.2 KiB
HTML
<!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>
|
|
<p>
|
|
Le code source est disponible sur
|
|
<a
|
|
href="https://git.sans.pub/pierre/jeu-laser"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>git.sans.pub</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>
|