Joute de Chevaliers
Dans ce projet, tu vas créer un petit jeu de réflexe où deux chevaliers s’affrontent dans une joute médiévale.
Le but est de cliquer au bon moment pour faire gagner ton chevalier.
S’il rate, c’est l’adversaire qui marque le point !
Dans cette page tu trouveras :
Crée tes chevaliers en pixels !
Tu vas créer ton propre combat de chevaliers avec Scratch et Piskel. Tu vas dessiner tes chevaliers en pixels, et les ajouter à Scratch pour créer ton jeu.
Dessiner un premier chevalier avec Piskel
Pour commencer, rends-toi sur le site piskelapp.com et clique sur le bouton « Create Sprite » pour ouvrir un nouvel espace de dessin.
Commence par dessiner ton chevalier ou un animal ou autre. Personnalise en créant ton propre jeu de joutes !
Bonus : Effets de lumière et d’ombre dans Piskel
Tu peux aussi améliorer ton chevalier en lui ajoutant des effets de lumière et d’ombre.
Pour cela, sélectionne l’outil “Lumière”.
Si tu veux éclaircir une zone, clique normalement.
Et si tu veux assombrir, maintiens la touche CTRL en même temps.
Essaie de bien déterminer d’où vient la lumière (par exemple à droite).
Ainsi, le côté opposé de ton chevalier sera naturellement plus sombre.
Cela donnera un effet de volume et ton personnage aura tout de suite plus de relief !
Exporter ton chevalier (format PNG)
Quand tu as fini un dessin, clique sur le bouton « Export » en haut à droite. Choisis le format « PNG » (si tu n’as qu’un seul dessin ou « GIF » si tu as plusieurs images pour une animation). Télécharge le fichier en cliquant sur le bouton « Download » en bas !
Donne-lui un nom facile à reconnaître comme « ChevalierBleu.png »
Dessiner un autre chevalier Ennemi avec Piskel
Une fois que ton chevalier est terminé, et importé dans Scratch. Tu peux retourner sur Piskel et créer un nouveau dessin. Tu peux dupliquer celui existant.
Et tu peux changer sa couleur (exemple le faire en Rouge). Et le télécharger le fichier à chaque fois en lui donnant un nom.
Bonus : Crée ton propre style de combattant
Tu n’es pas obligé de garder le chevalier d’origine. Tu peux modifier son apparence, et créer un nouveau personnage !
Par exemple : un ninja, un robot, un pirate, un gladiateur, ect…
Bonus : Ajoute un décor à ta scène
Enfin, pour rendre ton jeu encore plus joli, tu peux dessiner un décor de fond. Ça peut être une arène médiévale, une forêt enchantée, un château, ou même une arène futuriste selon ton thème !
Puis l’importer dans Scratch comme arrière-plan.
Positions et mouvements des chevaliers !
Place tes chevaliers aux bons endroits
Importe tes deux chevaliers dans scratch, et fais en sorte qu’ils se fassent face.
Pour cela, ouvre l’onglet Costumes du deuxième chevalier, puis clique sur Retourner horizontalement afin qu’il regarde dans la direction opposée.
Ensuite, place-les chacun de leur côté :
- Le premier chevalier à gauche de la scène.
- Le second à droite.
Faire bouger les chevaliers pendant l’attaque
Maintenant, on va faire en sorte que ton chevalier avance vers son adversaire pendant une attaque, puis revienne à sa position de départ. Cela donnera vraiment l’impression qu’il charge, comme dans une vraie joute !
Pour cela, on va créer un message.
Ce message servira à prévenir le chevalier qu’il doit faire son mouvement d’attaque.
C’est très pratique, car ce message pourra être envoyé depuis un autre sprite (par exemple, la flèche) sans avoir besoin de tout recopier dans plusieurs codes différents.
Dans le code du chevalier, ajoute :
- “Quand je reçois [GO HEROS]”
- D’abord, glisser en 1 seconde vers l’autre chevalier.
- Puis glisser en 1 seconde pour revenir à ta position d’origine.
Tester le mouvement
Avant d’aller plus loin, teste ton code !
Tu peux cliquer directement sur le bloc “Quand je reçois [GO HEROS]” pour vérifier que ton chevalier bouge bien : il doit avancer vers son ennemi, puis revenir en arrière.
Le mouvement de l’ennemi
Tu peux maintenant faire de même avec le chevalier Ennemi, crée un nouveau message.
- “Quand je reçois [GO ENNEMI]”
- D’abord, glisser en 1 seconde vers l’autre chevalier.
- Puis glisser en 1 seconde pour revenir à ta position d’origine.
La barre de timing
Dessiner la barre
Maintenant, on va créer une barre de timing, un peu comme une jauge.
Quand tu appuieras sur la bonne touche, il faudra le faire quand la flèche est dans la zone verte !
Clique sur “Peindre un nouveau sprite” pour créer la barre.
Utilise l’outil rectangle pour dessiner :
- Une grande barre rouge (la zone d’échec)
- Et par-dessus, une petite barre verte (la zone de réussite).
Place la barre en haut de l’écran, bien au centre.
Créer la Flèche
Ajoute la flèche mobile
Maintenant, va chercher un sprite de flèche dans la bibliothèque (tape “arrow”).
Choisis une flèche simple, celle qui pointe vers le haut fonctionne très bien.
Tu peux aussi la recolorier pour la rendre plus vive ou plus médiévale.
Place la flèche mobile
Ensuite, on va faire bouger cette flèche de droite à gauche. L’idée est qu’elle glisse en une seconde jusqu’au bout de la barre, puis revienne au début pour recommencer.
Place la flèche à droite de la barre (Fais attention à placer ta flèche assez haut pour être bien en contact de la barre)
Tes chiffres ne seront pas forcément les mêmes que ceux de l’exemple ci-dessous et ce n’est pas grave.
Puis code :
- “Quand le drapeau vert est cliqué”
- “Répéter indéfiniment”
- “Glisser en 1 seconde à x: [valeur de gauche] y: [même hauteur]”
Puis place la flèche à droite de la barre et rajoute au code précédent un nouveau bloc :
- “Glisser en 1 seconde à x: [valeur de droite] y: [même hauteur]”
Ca doit donner quelque chose comme ça :
Coder la flèche mobile
Le but : appuyer sur la barre d’espace quand la flèche passe dans la zone verte.
Dans le code de la flèche :
- Ajoute : Quand la touche [Espace] est pressée.
- Ensuite, fais une condition :
- Si la flèche est dans la zone verte → envoyer à tous [GO HEROS]
- Sinon → envoyer à tous [GO ENNEMI]
Et voilà la base du jeu est faite !! Bravo !
Bonus
Ajouter un peu de feedback : le cri de douleur
Pour rendre ton jeu plus vivant, on va faire réagir le chevalier quand il se fait toucher.
Lorsqu’il reçoit l’attaque de son adversaire, il va attendre que le chevalier arrive jusqu’à lui, puis crier « Aïe ! » pendant deux secondes.
Dans le code du chevalier qui subit l’attaque, ajoute :
- “Quand je reçois [GO ENNEMI]”
- “Attendre 1 seconde”
- “Dire Aïe ! pendant 2 secondes”
Et il faut faire l’inverse pour le Chevalier adverse :
- “Quand je reçois [GO HEROS]”
- “Attendre 1 seconde”
- “Dire Aïe ! pendant 2 secondes”
Ajouter des points de vie aux chevaliers
Pour rendre le combat encore plus intéressant, on va donner des points de vie à chaque chevalier.
Commence par créer deux variables :
- une appelée Héros,
- et une autre Ennemi.
Donne-leur une valeur de départ de 3.
Pour que ce soit plus clair visuellement, place la variable Héros sous le chevalier de gauche et la variable Ennemi sous celui de droite.
Ensuite, dans le code de chaque chevalier, ajoute une action lorsque le personnage subit une attaque :
- Ajouter -1 à [sa variable]
Ainsi, quand ton chevalier reçoit le message d’attaque de son adversaire, il perd 1 point de vie.
Petit à petit, tu verras les scores diminuer, jusqu’à ce qu’un chevalier tombe à 0 point — et là, il faudra afficher la victoire ou la défaite !
Créer un écran de fin (Victoire et Défaite)
Quand un joueur réussit à atteindre 3 fois son adversaire, il gagne ! Mais s’il est touché 3 fois avant, il perd la partie.
On va créer un nouveau sprite pour afficher ces deux résultats.
- Crée un nouveau sprite vide en cliquant sur “Peindre”.
- Dessine un grand fond coloré qui recouvre tout l’écran.
- Fais deux costumes différents :
- un pour Bravo,
- un pour Game Over.
- Renomme-les “Bravo” et “Perdu”.
Dans le code de ce sprite, ajoute :
- Quand le drapeau vert est cliqué → cacher (pour ne pas qu’il apparaisse dès le début).
- Si [ENNEMI = 0] alors :
- attendre 2 secondes,
- montrer,
- aller à l’avant plan,
- basculer sur le costume “Bravo”,
- Si [HEROS = 0] alors
- attendre 2 secondes,
- montrer,
- aller à l’avant plan,
- basculer sur le costume “Perdu”,
Et voilà un jeu complet !!
