image auteur
Lucas BENTO-VERSACE 4min • 27-12-2021

TP Javascript - Concevoir un jeu dans le navigateur

TP Javascript - Concevoir un jeu dans le navigateur

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és top et left.
  • 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

Auteur

image auteur
Lucas BENTO-VERSACE Alternant chez Codewise / Étudiant en développement web lucas.bentoversace@ynov.com
"Alternant chez Codewise, passioné par l'informatique et les technologies depuis mon plus jeune âge. J'ai découvert le monde du web et depuis je ne m'en lasse pas ! Fan de jeux vidéos, de sports et de musiques. "