(Page créée avec « {{Tuto Details |Main_Picture=Cr_er_le_jeu_Flappy_Bird_sur_Scratch_Flappy_Bird_01.png |Licences=Attribution (CC-BY) |Description=Créer le jeu Flappy Bird sur Scratch |Disc... ») |
|||
| Ligne 30 : | Ligne 30 : | ||
{{Tuto Step | {{Tuto Step | ||
|Step_Title=Le décor | |Step_Title=Le décor | ||
| + | |Step_Content=- Supprimer l’avatar actuel. | ||
| + | |||
| + | - Dans les fichiers de cette fiche, vous trouverez des images du Flappy Bird et d’un tuyau pour l’obstacle. Pour télécharger ces images, mettez votre souris sur l’icône du chat en bas à droite puis défilez vers le haut pour trouver l’icône de téléchargement. | ||
| + | |||
| + | - Je vous conseille de réduire leurs tailles car les images sont assez grandes. | ||
| + | |||
| + | - Créer deux avatars : un pour l’oiseau, un pour le tuyau. | ||
| + | |||
| + | - Pour l’arrière-plan, je vous conseille de choisir un fond en rapport avec la forêt, le ciel, la jungle, etc. | ||
| + | }} | ||
| + | {{Tuto Step | ||
| + | |Step_Title=Code de l'oiseau | ||
| + | |Step_Content=L’oiseau ne se déplace uniquement de haut en bas, donc il faut appuyer sur une touche (disons la barre espace) de manière répétée. | ||
| + | |||
| + | - Mettre quand le drapeau est cliqué, donner la valeur 0 à y, répéter indéfiniment {si touche espace pressée alors, ajouter 5 à y , sinon, ajouter -3 à y} pour ajouter ou perdre de l’altitude. | ||
| + | |Step_Picture_00=Cr_er_le_jeu_Flappy_Bird_sur_Scratch_Code_de_l_oiseau.png | ||
| + | }} | ||
| + | {{Tuto Step | ||
| + | |Step_Title=Code du tuyau | ||
| + | |Step_Content=- Pour créer un tuyau en haut, dans l’onglet Costumes, copier/coller le tuyau puis inverser le tuyau pour qu’il soit de haut en bas. | ||
| + | |||
| + | - Pour les faire défiler, dupliquer le premier costume 2 fois, puis créer des variations de hauteur (vous pouvez créer vos propres variations si l’envie vous en prend) | ||
| + | |||
| + | - Dans le code du tuyau, mettre quand drapeau cliqué, attendre 1 seconde, répéter indéfiniment {créer un clone de moi-même, attendre 4 secondes} | ||
| + | |||
| + | - De retour dans le code, mettre quand je commence comme un clone, basculer sur costume nombre aléatoire entre 1 et 3, aller à x :214 , y :1 , montrer, glisser en 8 secondes à x :-240 , y :1, supprimer ce clone | ||
| + | |||
| + | - Dans le code de création de clone, mettre cacher au début du code sinon l’original ne sera pas caché. | ||
| + | |Step_Picture_00=Cr_er_le_jeu_Flappy_Bird_sur_Scratch_Costumes_des_tuyaux.png | ||
| + | |Step_Picture_01=Cr_er_le_jeu_Flappy_Bird_sur_Scratch_Cr_ations_des_clones.png | ||
| + | |Step_Picture_02=Cr_er_le_jeu_Flappy_Bird_sur_Scratch_D_filement.png | ||
| + | }} | ||
| + | {{Tuto Step | ||
| + | |Step_Title=Score | ||
| + | |Step_Content=- Créer une variable « score » | ||
| + | |||
| + | - Dans le code du tronc, dans la création de clone, mettre en premier mettre score à 0. | ||
| + | |||
| + | - Mettre quand je commence comme un clone, répéter indéfiniment {attendre 4 secondes, ajouter 1 à score} | ||
| + | |Step_Picture_00=Cr_er_le_jeu_Flappy_Bird_sur_Scratch_Score.png | ||
| + | }} | ||
| + | {{Tuto Step | ||
| + | |Step_Title=Les ratés | ||
| + | |Step_Content=Le but du jeu est de passer entre les tuyaux. Si on en touche un, c’est perdu. Si l’oiseau tombe, c’est perdu aussi (ne pas oublier que l’oiseau doit rester en vol). | ||
| + | |||
| + | - Mettre quand le drapeau est cliqué, répéter indéfiniment {si tuyau touché ou ordonnée y inférieur à -160 alors envoyer à tous reset et attendre, stop tout} | ||
| + | |||
| + | - Pour la remise à zéro, mettre quand je reçois reset, aller à x :0, y :0, mettre score à 0. | ||
| + | |Step_Picture_00=Cr_er_le_jeu_Flappy_Bird_sur_Scratch_Rat_.png | ||
| + | |Step_Picture_01=Cr_er_le_jeu_Flappy_Bird_sur_Scratch_Remise_z_ro.png | ||
| + | }} | ||
| + | {{Tuto Step | ||
| + | |Step_Title=Bonus : Battre des ailes | ||
| + | |Step_Content=- Si vous voulez que votre oiseau batte des ailes, vous pouvez prendre la deuxième image de l’oiseau, cependant je vous conseille de réduire sa taille car il est plus grand que le premier oiseau. | ||
| + | |||
| + | - Dans le code de l’oiseau, mettre quand la touche espace est pressée, répéter 10 fois {attendre 0,1 seconde, costume suivant} | ||
| + | |Step_Picture_00=Cr_er_le_jeu_Flappy_Bird_sur_Scratch_Modification_de_la_taille_de_l_oiseau.png | ||
| + | |Step_Picture_00_annotation={"version":"3.5.0","objects":[{"type":"image","version":"3.5.0","originX":"left","originY":"top","left":0,"top":0.22,"width":693,"height":592,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeMiterLimit":4,"scaleX":0.87,"scaleY":0.87,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"crossOrigin":"","cropX":0,"cropY":0,"src":"https://www.wikidebrouillard.org/images/3/3a/Cr_er_le_jeu_Flappy_Bird_sur_Scratch_Modification_de_la_taille_de_l_oiseau.png","filters":[]},{"type":"wfarrow2line","version":"3.5.0","originX":"center","originY":"center","left":104.5,"top":293.5,"width":27,"height":47,"fill":"rgba(255,0,0,0)","stroke":"#FF0000","strokeWidth":4,"strokeDashArray":null,"strokeLineCap":"round","strokeDashOffset":0,"strokeLineJoin":"miter","strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"x1":13.5,"x2":-13.5,"y1":23.5,"y2":-23.5,"x2a":-10.474355128399871,"y2a":-2.172893466038111,"x2b":3.3993335511324316,"y2b":-10.142884835131134},{"type":"wfarrow2circle","version":"3.5.0","originX":"center","originY":"center","left":118,"top":317,"width":16,"height":16,"fill":"#aaa","stroke":"#666","strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":0.5,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"radius":8,"startAngle":0,"endAngle":6.283185307179586},{"type":"wfarrow2circle","version":"3.5.0","originX":"center","originY":"center","left":91,"top":270,"width":16,"height":16,"fill":"#aaa","stroke":"#666","strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":0.5,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"radius":8,"startAngle":0,"endAngle":6.283185307179586},{"type":"wfrect","version":"3.5.0","originX":"center","originY":"center","left":376.61,"top":343.69,"width":315.79,"height":231.61,"fill":"rgba(255,0,0,0)","stroke":"#FF0000","strokeWidth":2,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"rx":0,"ry":0},{"type":"textbox","version":"3.5.0","originX":"center","originY":"center","left":342.64,"top":142.84,"width":178.91,"height":48.82,"fill":"#FF0000","stroke":"#FF0000","strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeMiterLimit":4,"scaleX":1.48,"scaleY":1.48,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"text":"Vous pourrez séléctionner l'image","fontSize":20,"fontWeight":"normal","fontFamily":"sans-serif","fontStyle":"normal","lineHeight":1.16,"underline":false,"overline":false,"linethrough":false,"textAlign":"left","textBackgroundColor":"","charSpacing":0,"minWidth":20,"splitByGrapheme":false,"styles":{} }],"height":513,"width":600} | ||
| + | |Step_Picture_01=Cr_er_le_jeu_Flappy_Bird_sur_Scratch_Battement_des_ailes.png | ||
| + | }} | ||
| + | {{Notes | ||
| + | |Avertissement=Vous appuyez sur la barre espace pour maintenir l'oiseau en vol. La partie est finie si vous touchez un tuyau ou si vous touchez le bord en bas. | ||
}} | }} | ||
| − | |||
{{Tuto Status | {{Tuto Status | ||
| − | |Complete= | + | |Complete=Published |
}} | }} | ||
Version du 17 mai 2021 à 09:17
Créer le jeu Flappy Bird sur Scratch
Difficulté
Technique
Durée
30 minute(s)
Disciplines scientifiques
Informatique
Introduction
Flappy Bird était un petit jeu mobile qui était sorti au début des années 2010 dont le principe était de contrôler un oiseau évitant des obstacles. La difficulté supplémentaire était qu’il fallait appuyer sur l’écran de manière répétée pour éviter que l’oiseau ne tombe. Dans ce tutoriel, nous allons apprendre à créer ce jeu sur Scratch. Si vous voulez jouer à l'original, une recherche rapide sur Internet vous mènera sur un site dédié.
- Matériel et outils
- Fichiers
Ordinateur 
Dès sa mise sous tension, un ordinateur exécute, l'une après l'autre, des instructions qui lui font lire, manipuler, puis réécrire un ensemble de données auquel il a accès. Des tests et des sauts conditionnels permettent de changer d'instruction suivante, et donc d'agir différemment en fonction des données ou des nécessités du moment. Les données à manipuler sont obtenues, soit par la lecture de mémoires, soit par la lecture de composants d'interface (périphériques) qui représentent des données physiques extérieures en valeurs binaires (déplacement d'une souris, touche appuyée sur un clavier, température, vitesse, compression...). Une fois utilisées, ou manipulées, les données sont réécrites, soit dans des mémoires, soit dans des composants qui peuvent transformer une valeur binaire en une action physique (écriture sur une imprimante ou sur un moniteur, accélération ou freinage d'un véhicule, changement de température d'un four ...). L'ordinateur peut aussi répondre à des interruptions qui lui permettent d’exécuter des programmes de réponses spécifiques à chacune, puis de reprendre l’exécution séquentielle du programme interrompu. La technique actuelle des ordinateurs date du milieu du xxe siècle. Ils peuvent être classés selon plusieurs critères1 (domaine d'application, taille ou architecture).
Étape 1 - Le décor
- Supprimer l’avatar actuel.
- Dans les fichiers de cette fiche, vous trouverez des images du Flappy Bird et d’un tuyau pour l’obstacle. Pour télécharger ces images, mettez votre souris sur l’icône du chat en bas à droite puis défilez vers le haut pour trouver l’icône de téléchargement.
- Je vous conseille de réduire leurs tailles car les images sont assez grandes.
- Créer deux avatars : un pour l’oiseau, un pour le tuyau.
- Pour l’arrière-plan, je vous conseille de choisir un fond en rapport avec la forêt, le ciel, la jungle, etc.
Étape 2 - Code de l'oiseau
L’oiseau ne se déplace uniquement de haut en bas, donc il faut appuyer sur une touche (disons la barre espace) de manière répétée.
- Mettre quand le drapeau est cliqué, donner la valeur 0 à y, répéter indéfiniment {si touche espace pressée alors, ajouter 5 à y , sinon, ajouter -3 à y} pour ajouter ou perdre de l’altitude.
Étape 3 - Code du tuyau
- Pour créer un tuyau en haut, dans l’onglet Costumes, copier/coller le tuyau puis inverser le tuyau pour qu’il soit de haut en bas.
- Pour les faire défiler, dupliquer le premier costume 2 fois, puis créer des variations de hauteur (vous pouvez créer vos propres variations si l’envie vous en prend)
- Dans le code du tuyau, mettre quand drapeau cliqué, attendre 1 seconde, répéter indéfiniment {créer un clone de moi-même, attendre 4 secondes}
- De retour dans le code, mettre quand je commence comme un clone, basculer sur costume nombre aléatoire entre 1 et 3, aller à x :214 , y :1 , montrer, glisser en 8 secondes à x :-240 , y :1, supprimer ce clone
- Dans le code de création de clone, mettre cacher au début du code sinon l’original ne sera pas caché.
Étape 4 - Score
- Créer une variable « score »
- Dans le code du tronc, dans la création de clone, mettre en premier mettre score à 0.
- Mettre quand je commence comme un clone, répéter indéfiniment {attendre 4 secondes, ajouter 1 à score}
Étape 5 - Les ratés
Le but du jeu est de passer entre les tuyaux. Si on en touche un, c’est perdu. Si l’oiseau tombe, c’est perdu aussi (ne pas oublier que l’oiseau doit rester en vol).
- Mettre quand le drapeau est cliqué, répéter indéfiniment {si tuyau touché ou ordonnée y inférieur à -160 alors envoyer à tous reset et attendre, stop tout}
- Pour la remise à zéro, mettre quand je reçois reset, aller à x :0, y :0, mettre score à 0.
Étape 6 - Bonus : Battre des ailes
- Si vous voulez que votre oiseau batte des ailes, vous pouvez prendre la deuxième image de l’oiseau, cependant je vous conseille de réduire sa taille car il est plus grand que le premier oiseau.
- Dans le code de l’oiseau, mettre quand la touche espace est pressée, répéter 10 fois {attendre 0,1 seconde, costume suivant}
Comment ça marche ?
Mise en garde : qu'est-ce qui pourrait faire rater l'expérience ?
Vous appuyez sur la barre espace pour maintenir l'oiseau en vol. La partie est finie si vous touchez un tuyau ou si vous touchez le bord en bas.
Dernière modification 17/05/2021 par user:Maxime97.
Published