Blog >
[Tuto Javascript] Créer le jeu de Flappy Bird

[Tuto Javascript] Créer le jeu de Flappy Bird

November 4, 2021

On vous offre une session de programmation gratuite sans engagement

🎁 Réserver

FLAPPY BIRD :

Lien pour commencer le jeu :

https://tinyurl.com/4j378unt

ETAPE 1 :

1.     Créer les sprites

·      Créer l’oiseau, mettre son animation, régler sa taille

·      Créer le ciel, mettre son animation, sa taille, puis le mettre derrière l’oiseau

2.     Faire sauter l’oiseau

·      Ajouter de la vitesse verticale

·      Ajouter de la gravité

Commandes à utiliser :

createSprite() ; sprite.setAnimation ; sprite.scale ; sprite.depth ; if(); keyDown(“space) sprity.velocityY ;

ETAPE 2 : Ajouter les canalisations

Créer une function qui génère deux tuyaux : 1 en haut et l’autre en bas

Tuyau1 :

Créer le sprite, ajout de l’animation, régler la taille, la position, la durée de vie (pour ne pas faire bugger l’ordinateur.

Tuyau2 :

Même chose que Tuyau1, le faire tourner de 180°, et fixer sa position en fonction de la position de Tuyau1

Commandes à utiliser :

function() ; createSprite() ; sprite.setAnimation ; sprite.scale ; sprite.y ; sprite.lifetime ; sprite.rotation

ETAPE 3 : Animer les canalisations

1.     Donner de la vitesse aux tuyaux

2.     Faire apparaître les tuyaux une fois toutes les 2 secondes

Créer les sprites uniquement lorsque World.frameCount est un multiple de 60.

3.     Faire partir les tuyaux de la droite de l’écran

4.     Faire apparaître les tuyaux à des hauteurs différentes à chaque fois

Commandes à utiliser :

Sprite.velocityX ; if() ; World.frameCount ; % ;  === ; Math.random()

ETAPE 4 : Arrêter le jeu quand on touche un tuyau

1.     Créer un groupe auquel on rajoute tous les tuyaux

Ajouter le tuyau quand il est créé

2.     Quand l’oiseau touche un des éléments du groupe – arrêter tout

Vitesse de l’oiseau à zéro

Vitesse de chaque tuyau à zéro

3.     Réduire les « hitbox » des tuyaux et de l’oiseau

Oiseau : bird.setCollider("circle",0,0,150);

Tuyau : tuyau1.setCollider("rectangle",0,0,300,1200) ;

Commandes à utiliser :

createGroup() ; group.add(sprite) ; sprite.velocityX ; group.setVelocityXEach(0) ; sprite.setCollider

ETAPE 5 : Créer les états de jeux

1.     Créer la variable

Démarrer à l’état « start »

2.     Donner les instructions en fonction des états :

Start :

Mettre l’oiseau au milieu

Play :

Faire sauter l’oiseau, mettre la gravité, créer les tuyaux, si on touche le tuyau passer à l’état gameOver

GameOver :

Faire apparaître un bouton pour pouvoir recommencer

Etape 6 : Score

Ajouter 1 au score à chaque fois qu’un tuyau est créé !

Vous avez entre 8 et 15 ans ?

🎁 Essayez un cours GRATUIT de programmation
✔️ c’est 45 min
✔️ c’est en visioconférence
✔️ c’est un cours particulier
✔️ c’est ludique & pédagogique
✔️ Certificat de participation
🎁 Réserver