brainpad:mcodjeuxsapin

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentes Révision précédente
Prochaine révision		 Révision précédente
brainpad:mcodjeuxsapin [2020/09/04 16:32] – [Déplacement du sprite] adminbrainpad:mcodjeuxsapin [2021/08/11 09:19] (Version actuelle) – modification externe 127.0.0.1
Ligne 1: Ligne 1:
 +{{ :suivant.png?nolink&30|}} {{ :retour.png?nolink&30|}} [[brainpad:accueilbp2|{{ :iconemaison.jpg?nolink&30|Sommaire BP2}}]]
 +
 +===== Brainpad 2 : Jeu - le sapin de noël=====
 +
 +[Mise à jour le : 4/9/2020]
 +{{ :brainpad:makecode.png?nolink&50|}} {{ :netmf43:brainpadico.png?nolink&100}} 
 +
 +==== Présentation ====
 +> Création et animation d'un sprite.
 +
 +==== Création du sprite ====
 +Pour coder l'exemple ci-dessous, aller dans **Avancé** -> **Extension** et sélectionner **Jeu** pour ajouter les menus SPRITES, CONTRÔLEUR, SCENE et INFO. Puis sélectionner le bloc "Créer" dans SPRITES.
 +
 +{{ :brainpad:sprite1.png?nolink&500  |}}
 +
 +> L'extension "jeu" vous permet d'ajouter des objets images à l'écran.
 +
 +Sélectionner {} JavaScript et modifier le code comme ci-dessous.
 +
 +<code javascript>
 +mySprite = sprites.create(img`
 +. . . . . . . . . . . . . . . . 
 +. . . . . . . 1 . . . . . . . . 
 +. . . . . . 1 1 1 . . . . . . . 
 +. . . . . 1 1 1 1 1 . . . . . . 
 +. . . . 1 1 1 1 1 1 1 . . . . . 
 +. . . . . . 1 1 1 . . . . . . . 
 +. . . . . 1 1 1 1 1 . . . . . . 
 +. . . . 1 1 1 1 1 1 1 . . . . . 
 +. . . 1 1 1 1 1 1 1 1 1 . . . . 
 +. . . . . 1 1 1 1 1 . . . . . . 
 +. . . . 1 1 1 1 1 1 1 . . . . . 
 +. . . 1 1 1 1 1 1 1 1 1 . . . . 
 +. . 1 1 1 1 1 1 1 1 1 1 1 . . . 
 +. 1 1 1 1 1 1 1 1 1 1 1 1 1 . . 
 +. . . . . . . 1 . . . . . . . . 
 +. . . . . . . 1 . . . . . . . . 
 +`, SpriteKind.Player)
 +</code>
 +
 +{{ :brainpad:sprite2.png?nolink&500 |}}
 +
 +Nous avons simplement créé et affiché le sprite. Nous sommes maintenant prêts à le déplacer !
 +
 +==== Déplacement du sprite ====
 +Nous allons créer une variable __**Pos**__ et l'initialiser avec la valeur 50 puis nous l'incrémenterons dans une boucle. L’arbre se déplacera alors d'une position : 51, 52, 53, 54, 55… etc. À un moment donné, l'arbre se déplacera en dehors de l'écran.
 +
 +{{ :brainpad:sprite3.png?nolink&500 |}}
 +
 +Pour que le sprite se déplace latéralement à l'écran, on peut utiliser un test pour vérifier "si" l'arbre a atteint le bord, puis inverser le déplacement. Étant donné que la largeur de l'écran est de 128 pixels, on vérifie que la position de l'arbre est inférieure à 110. Le moyen le plus simple consiste à contrôler sa direction par une valeur positive lorsqu'il se déplace à droite et négative lorsqu'il se déplace à gauche. Appelons cette variable __**Dirr**__.
 +{{ :brainpad:sprite4.png?nolink&500 |}}
 +L'arbre vient de rebondir… mais il est sorti du côté gauche de l'écran ! Nous résolvons ceci en vérifiant la position de l’arbre. Si elle est inférieure à 10, nous inversons la direction. 
 +{{ :brainpad:sprite5.png?nolink&500  |}}
 +
 +La variable Dirr permet de contrôler la vitesse. En affectant 5 à Dirr, on  observe que l'arbre se déplace 5 fois plus vite. Cet exemple est une bonne introduction aux vecteurs.
 +
 +<note>Le programme **Sapin de Noël** est **téléchargeable** [[https://webge.fr/doc/wikis/code/GHI/Makecode/BP2/MKD_BP2_Sapin_Noel.zip|ici]]</note>
 +
 +==== En savoir plus sur les vecteurs ====
 +<html><a href="https://mathinsight.org/vector_introduction" target="_blank">mathinsight.org</a></html>
 +
 +