05/11
Je crée mon tout premier jeu Freebox Révolution
Toutes les semaines Univers Freebox vous propose un tutoriel pour créer simplement une application pour votre Freebox Révolution. Après avoir créé son projet il est temps de commencer à s’amuser un peu avec sa Freebox.
Nous allons cette semaine réutiliser notre programme de la dernière fois et nous allons le modifier pour créer notre premier jeu pour la Freebox Révolution.
Nous ferons se déplacer indépendamment des carrés sur l’écran. Chacun ayant une taille et une vitesse de déplacement différente. Le but sera de déplacer votre carré et d’appuyer sur la touche OK à chaque fois qu’il sera sur un autre carré, vous faisant gagner des points à chaque fois.
L’intégralité du code de l’application
Le détail du code, pas à pas
Nous commencerons dans un premier temps par déclarer nos variables. Nous aurons besoin cette fois-ci d’un certain nombre d’entre elles. Il nous faudra donc deux entiers pour gérer le déplacement en X et en Y, un entier pour gérer les points et deux qui nous serviront d’index pour se déplacer dans des tableaux. Nous aurons ensuite besoin de 4 booléens qui serviront à savoir si nous somme dans un des carrés. Pour finir, nous aurons besoin de 4 tableaux, un qui contiendra les id de chaque carré, un qui contiendra les points gagnés pour chacun d’eux, un qui permettra de définir le sens de déplacement à partir de booléen et un dernier pour leur vitesse de déplacement.
Nous créons ensuite notre texte qui permettra d’afficher les points engrangés. Pour cela rien de plus simple il nous suffira juste d’ajouter notre variable contenant les points dans notre texte. Nous lui ajoutons aussi quelques paramètres pour le placer ou nous voulons et modifier sa taille.
Comme la dernière fois, nous créons 3 rectangles auxquels, on ajoute un id et que l’on paramètre à l’envie, ici avec des tailles des positions et des couleurs différentes.
Ensuite, nous allons ajouter notre dernier rectangle, celui qui sera contrôlable, nous réutilisons encore une fois le même principe que le précédent tuto, mais nous modifions juste l’action effectuée lorsque l’on appuie sur la touche OK. Nous allons ici utiliser une boucle for, pour vérifier à chaque appui sur la touche si on est sur l’un des rectangles. Nous ferons varier dans cette boucle notre index qui ira de 0 à la taille de notre tableau.
Dans cette boucle, nous vérifions si la valeur x de notre rectangle est supérieure ou égal à la valeur x de chaque autre rectangle, via leur id contenu dans le tableau. Ce calcul renverra un booléen, vrai ou faux stocker dans dX. Puis nous comparons si la valeur x de notre rectangle est inférieure ou égale au bord droit des différents rectangles avec tab[index].x + tab[index].width. Qui permet de récupérer la valeur en x de chaque rectangle auquel on ajoute leur taille, pour savoir où se trouve le bord droit de celui-ci. On soustrait à cette valeur la taille du rectangle que l’on contrôle, car l’on veut que cela fonctionne uniquement s’il est entièrement dans un autre rectangle. Cette comparaison retournera, elle aussi vrai ou faux, que nous stockerons dans cX. Nous répétons ensuite l’opération pour les valeurs en Y.
Une fois toutes les comparaisons faites, nous vérifions si toutes nos variables sont vraies. Si elles le sont pour un des rectangles, nous additionnons à notre variable point le nombre de points correspondant grâce à notre tableau de point et notre index. Puis nous mettons un break, qui permettra de sortir de la boucle si on est bien sur un rectangle. Pour finir, si nous ne sommes pas entièrement dans un des rectangles, nous remettons toutes nos variables à faux.
Nous allons maintenant nous occuper de déplacer nos trois rectangles. Pour ceci, nous allons avoir besoin d’un Timer et d’une fonction. Nous créons donc notre timer avec un interval qui détermine le temps (en milliseconde) entre chaque événement. Notre événement sera ici le déplacement des carrés, plus l’intervalle sera court plus ils se déplaceront vite. Nous mettrons running et repeat a true, pour que le timer se lance au démarrage de l’application et qu’il se répète. Puis, avec onTriggered : deplacement(), nous lancerons la fonction deplacement() à chaque évènement, soit tous les 25 millisecondes.
Pour terminer, nous allons créer notre fonction deplacement(). Nous réutiliserons une boucle for sur le même principe que la précédente. Dans celle-ci, nous vérifierons si la valeur x de chaque rectangle est inférieure ou égale la taille de l’application moins la taille de notre tableau plus une marge de 50 pixels. Ceci nous permet de définir une marge sur le bord droit de l’écran que les carrés ne pourront dépasser. Nous vérifions aussi notre tableau qui définit le sens pour voir si la valeur est à true. Nous augmentons ensuite la valeur x de chaque rectangle en fonction de la vitesse qui leur est associé. Puis si les rectangles atteignent la marge de droite, on passe la valeur de tabSens[indexD] à false. On vérifie ensuite si nos rectangles se trouvent à plus de 50 pixels de la bordure gauche et tabSens[indexD] est à false. Puis nous diminuons la valeur de x de chaque rectangle si la condition est valide et une fois que les rectangles atteignent la marge de gauche, nous repassons tabSens[indexD] à true.
Vous pouvez maintenant jouer au jeu que vous venez de créer pour votre Freebox Révolution.