Note

Bonjour, bienvenue dans la communauté des passionnés de SunFounder Raspberry Pi, Arduino et ESP32 sur Facebook ! Plongez au cœur de Raspberry Pi, Arduino et ESP32 avec d’autres passionnés.

Pourquoi nous rejoindre ?

  • Support d’experts : Résolvez les problèmes après-vente et les défis techniques grâce à l’aide de notre communauté et de notre équipe.

  • Apprendre & Partager : Échangez des conseils et des tutoriels pour améliorer vos compétences.

  • Aperçus exclusifs : Accédez en avant-première aux annonces de nouveaux produits et à des aperçus privilégiés.

  • Réductions spéciales : Profitez de réductions exclusives sur nos produits les plus récents.

  • Promotions festives et concours : Participez à des concours et des promotions durant les fêtes.

👉 Prêt à explorer et à créer avec nous ? Cliquez sur [ici] et rejoignez-nous dès aujourd’hui !

Projet ludique 7 : Tapez sur la tuile noire

Beaucoup d’entre vous connaissent le célèbre jeu mobile où les joueurs tapent sur les tuiles noires pour marquer des points tout en évitant les tuiles blanches. Nous recréons ce défi addictif en utilisant deux modules anti-obstacle. Lorsque votre main bloque l’un des modules IR, une pression est enregistrée sur la scène.

Si une pression atterrit sur une tuile noire, vous marquez un point ; taper sur une tuile blanche vous fait perdre un point. Les joueurs doivent décider rapidement s’ils doivent taper sur le module IR gauche ou droit en fonction de la position des tuiles noires.

Voici les étapes pour réaliser ce projet. Il est conseillé de les suivre dans l’ordre, et une fois familiarisé, vous pourrez modifier les effets à votre guise.

1. Dessiner un sprite Tile

Un sprite Tile est utilisé pour obtenir l’effet de tuiles noires et blanches alternées qui descendent ; dans la version mobile de ce jeu, il y a généralement 4 colonnes, ici nous n’en faisons que deux.

  • Supprimez le sprite par défaut, appuyez sur l’icône Ajouter un sprite, sélectionnez Dessiner.

    ../../_images/tile_paint_tile1.png
  • Ensuite, allez dans l’onglet Costumes et utilisez l’outil Rectangle pour dessiner un rectangle avec une bordure grise et un remplissage blanc.

    ../../_images/tile_paint_tile2.png
  • Sélectionnez le rectangle et cliquez sur Copier -> Coller pour créer un rectangle identique, puis placez les deux rectangles côte à côte.

    ../../_images/tile_paint_tile3.png
  • Sélectionnez l’un des rectangles et choisissez une couleur de remplissage noire.

    ../../_images/tile_paint_tile4.png
  • Sélectionnez maintenant les deux rectangles et déplacez-les de sorte que leurs points centraux correspondent au centre du canevas.

    ../../_images/tile_paint_tile5.png
  • Dupliquez costume1, en alternant les couleurs de remplissage des deux rectangles. Par exemple, la couleur de remplissage de costume1 est blanche à gauche et noire à droite, et la couleur de remplissage de costume2 est noire à gauche et blanche à droite.

    ../../_images/tile_paint_tile6.png
  • Revenez à la page Code et nommez le sprite Tile.

    ../../_images/tile_paint_tile7.png

2. Programmer le sprite Tile

  • D’abord, définissez la position initiale du sprite Tile pour qu’il soit en haut de la scène.

    ../../_images/tile_script_tile1.png
  • Créez une variable - blocks et donnez-lui une valeur initiale pour déterminer le nombre de fois que le sprite Tile apparaîtra. Utilisez le bloc [repeat until] pour faire diminuer progressivement la variable blocks jusqu’à ce qu’elle atteigne 0. Pendant ce temps, faites changer aléatoirement de costume au sprite Tile. Après avoir cliqué sur le drapeau vert, vous verrez le sprite Tile changer rapidement de costume sur la scène.

    ../../_images/tile_script_tile2.png
  • Créez des clones du sprite Tile pendant que la variable blocks diminue, et arrêtez le script lorsque blocks atteint 0. Deux blocs [wait () seconds] sont utilisés ici : le premier pour limiter l’intervalle entre les clones de Tile et le second pour laisser le temps à la variable blocks de diminuer jusqu’à 0 sans arrêter immédiatement le programme, donnant au dernier sprite tuile suffisamment de temps pour se déplacer.

    ../../_images/tile_script_tile3.png
  • Programmez maintenant le clone du sprite Tile pour qu’il descende lentement et le supprimer lorsqu’il atteint le bas de la scène. La modification de la coordonnée y affecte la vitesse de chute : plus la valeur est grande, plus la vitesse de chute est rapide.

    ../../_images/tile_script_tile4.png
  • Masquez le corps et affichez le clone.

    ../../_images/tile_script_tile5.png

3. Programmer l’arrière-plan

Dans l’arrière-plan, lisez les valeurs des 2 modules IR et effectuez les actions correspondantes.

  • Lorsque le drapeau vert est cliqué, définissez la variable count à 0.

    ../../_images/tile_script_backdrop.png
  • Si le module anti-obstacle IR gauche détecte votre main, diffusez un message - left.

    ../../_images/tile_script_backdrop1.png
  • Si le module anti-obstacle IR droit détecte votre main, diffusez un message - right.

    ../../_images/tile_script_backdrop2.png

4. Dessiner le sprite Left IR

Un sprite Left IR est utilisé pour obtenir l’effet de clic ; lorsque le module IR gauche détecte votre main, il enverra un message - left au sprite Left IR, le faisant fonctionner. S’il touche la tuile noire sur la scène, le score augmentera de 1, sinon, le score diminuera de 1.

  • Encore une fois, appuyez sur l’icône Ajouter un sprite et sélectionnez Dessiner.

    ../../_images/tile_paint_ir1.png
  • Allez dans l’onglet Costumes, sélectionnez la couleur de remplissage (n’importe quelle couleur sauf noir et blanc) et dessinez un cercle.

    ../../_images/tile_paint_ir2.png
  • Revenez à la page Code et nommez le sprite Left IR.

    ../../_images/tile_paint_ir3.png

5. Programmer le sprite Left IR

  • Maintenant, commencez à programmer le sprite Left IR. Lorsque le drapeau vert est cliqué, masquez d’abord le sprite.

    ../../_images/tile_script_ir1.png
  • Lorsque le message - left est reçu (le module récepteur IR gauche détecte un obstacle), affichez le sprite, définissez sa taille à 100 %, puis réduisez-la par intervalles de 10 à l’aide d’un bloc [Repeat] avant de le masquer à nouveau. Cela donne au sprite un effet d’expansion et de contraction.

    ../../_images/tile_script_ir2.png
  • Déterminez ensuite si le bloc noir du sprite Tile est touché, et si c’est le cas, augmentez la variable count de 1, sinon diminuez-la de 1.

    ../../_images/tile_script_ir3.png

Note

Vous devez faire apparaître le sprite Tile sur la scène, puis prélever la couleur du bloc noir du sprite Tile.

../../_images/tile_script_ir4.png

6. Sprite Right IR

La fonction du sprite Right IR est essentiellement la même que celle de Left IR, sauf qu’il reçoit l’information Right.

  • Maintenant, dupliquez le sprite Left IR et renommez-le Right IR.

    ../../_images/tile_paint_ir4.png
  • Modifiez ensuite le message reçu en - right.

    ../../_images/tile_script_ir5.png

7. Exécuter le script

  • Maintenant, ajustez les positions et les tailles des trois sprites.

    • Faites glisser le sprite Tile en bas de la scène et réglez sa position x à 0.

    • Déplacez le sprite Left IR dans le cadre gauche. Vous devez aller dans l’onglet Costumes pour réduire la taille du sprite à seulement 50 % de la taille du cadre.

    • De même, déplacez le sprite Right IR dans le cadre droit. Vous devez aller dans l’onglet Costumes pour réduire la taille du sprite à seulement 50 % de la taille du cadre.

    • Assurez-vous que les sprites Left IR et Right IR sont au-dessus du sprite Tile.

    ../../_images/tile_paint_ir5.png
  • Maintenant, toute la programmation est terminée, et vous pouvez cliquer sur le drapeau vert pour exécuter le script.