Vous voulez apprendre à développer un jeu ? Dans cet article, vous trouverez un exercice guidé pour concevoir un mini-jeu sur navigateur en JS.
Pour cet exercice, vous aurez besoin d'avoir des bases en JavaScript, et en manipulation du DOM avec JavaScript.
But du jeu
Le but du jeu est simple : il faut réussir à cliquer sur le chat !
Consigne
Votre but en tant que développeur est de créer ce jeu. Pour démarrer, voici un fichier HTML :
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cliquez sur le chat !</title>
</head>
<body>
<h1>Cliquez sur le chat</h1>
<img src="https://placekitten.com/g/200/300" alt="chat incliquable" id="image-chat">
</body>
</html>
Votre but est d'ajouter un script JS à ce fichier tel que :
- Lorsque la souris survole l’image du chat, l’image se déplace de manière aléatoire dans la fenêtre de l’utilisateur
- Si l’utilisateur réussit à cliquer sur l’image, une popup s'ouvre qui annonce : "Vous avez gagné !"
Voilà tout ! Vous ne voyez pas comment faire ? Voici quelques indications pour vous aider.
Indications
- Commencez par ajoutez une balise link ou une balise script pour y entrer votre script.
- L'évènement qui déclenche un déplacement de l'image est "mouseover".
- Récupérer la largeur / longueur de l'écran : window.innerWidth et window.innerHeight.
-
Générer un nombre entier aléatoire entre 0 et "max" :
Math.floor(Math.random() * max) -
Il y a plusieurs manières de positionner un élément via du CSS ! Une de ces méthodes est d'ajouter la propriété CSS "
position: absolute" sur l'image et de régler les propriétéstopetleft. - Ouvrir une fenêtre pop-up (pour annoncer la victoire) : alert('Vous avez gagné !')
Correction
Vous ne vous en sortez pas ? Cliquez sur le bouton pour découvrir la correction !
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cliquez sur le chat !</title>
</head>
<body>
<h1>Cliquez sur le chat</h1>
<img src="https://placekitten.com/g/200/300" alt="chat incliquable" id="image-chat">
<script>
const imgChat = document.getElementById('image-chat');
imgChat.style.position = 'absolute';
imgChat.addEventListener('mouseover', (event) => {
const top = Math.round(Math.random() * (innerHeight - event.target.height));
const left = Math.round(Math.random() * (innerWidth - event.target.width));
event.target.style.top = top + 'px';
event.target.style.left = left + 'px';
});
imgChat.addEventListener('click', () => {
if (confirm('Voulez-vous vraiment cliquer sur le chat ?')
&& confirm('Vous êtes vraiment sûr de vouloir cliquer sur ce chat ?')) {
alert('Félicitations ! Vous avez gagné :D')
}
})
</script>
</body>
</html>
Conclusion
Si vous avez des idées d’amélioration pour cet article, laissez-nous un commentaire !
Sources
- Developer Mozzila : Les fonctions
- Pierre Giraud - Javascript apprendre à coder : Les tableaux en JavaScript et l’objet global Array
- Dev : Comment manipuler le DOM en javascript ?
Auteur
