Emission #8 Comment Créer un jeu Pacman ? – La Programmation Expliquée à ma Copine

Dans cette nouvelle émission de la programmation expliquée à ma Copine, continuez avec Sandrine à découvrir les notions de base sur le développement d’applications

Découvrez les bases de la réalisation d’un jeu en JavaScript avec les notions d’objets et d’évènements

Tout est dans la vidéo ci-dessous.

[ppmaccordion][ppmtoggle title= »Afficher le texte  de la vidéo »]

Emission #8 Comment Créer un jeu Pacman ? – La Programmation Expliquée à ma Copine

Bonjour et bienvenu sur Développement Facile.

Matthieu : Voici une nouvelle émission « la programmation expliquée à ma copine » en compagnie de Sandrine.

Sandrine : Bonjour Matthieu.

Matthieu : Bonjour. Donc cette fois vous allez apprendre à travers Sandrine qui est une développeuse en ActionScript, elle a un peu développé avec Flash, graphisme, un tout petit peu, elle avait fait un jeu de pacman en flash, et donc là le défi pour Sandrine ça va être de transformer ce jeu pacman, de l’adapter aux nouvelles technologies d’aujourd’hui, c’est-à-dire l’HTML5 et donc à travers plusieurs émissions vous allez découvrir comment procéder. Vous avez un jeu, une idée de concept, un jeu qui fonctionnait avec flash avant, et le but ça va être de le basculer sur les mobiles, les smartphones et le web. Déjà on va regarder un peu, c’est une petite démonstration, on va partir de cette base là que l’on va chercher à améliorer, ça c’est le jeu, là c’est les méchants, les zéros, et pacman il est là, et à chaque fois qu’il se fait toucher par un 0 il perd une vie, 2 à 0, c’est assez rapide.

Sandrine : Donc là si je comprends bien ton bonhomme il se déplace tout le temps, dès que tu appuies sur la flèche, il se déplace tout le temps, par exemple tu appuies sur la flèche gauche…

Matthieu : Voilà j’appuie une fois et il s’est déplacé de 2, parce qu’il y a eu 2 cycles, c’est chaque images, il écoute si le clavier est appuyé il déplace, voilà, tu as laissé appuyer du coup tu as été tuée par des méchants, il ne reste plus qu’une vie en se déplaçant encore une fois, plus de vie.

Sandrine : J’ai pas appuyé longtemps pourtant.

Matthieu : Non mais c’est pour ça, c’est ce qu’on va chercher à améliorer. Vous surement, vous rencontrez ces mêmes problématiques, par exemple, le joueur se déplace trop vite ou le jeu est injouable, comme c’est le cas actuellement le cas, et donc on va chercher à améliorer cela pour corriger toutes ces erreurs. Aujourd’hui tu as déjà créé un jeu avec flash de pacman, aujourd’hui tu dois partir sur la création de ce type de jeu, qu’est-ce qui pourrait t’aider à avancer ?

Sandrine : Alors dans un premier temps moi quand j’ai créé mon pacman en actionscript, sous flash, c’est vrai que je n’avais pas a me demander comment je vais faire pour créer mon bonhomme puisqu’on créé ça avec un dessin et ensuite on applique des actions directement sur le dessin. Dans un premier temps je voudrais que tu me montre comment tu as créé ton bonhomme.

Matthieu : Là enfaite c’est du texte, mais bien sur on ne va pas utiliser du texte, ce qui était valable avec flash est toujours valable avec HTML 5, JavaScript, CSS, c’est ça qui est génial, donc ce que tu avait fait comme dessin pour ton pacman sous flash tu va pouvoir le réutiliser directement. Mais ce qu’on va faire c’est qu’on va se simplifier la vie, je vous en parle souvent dans les émissions « la programmation expliquée à ma copine » c’est-à-dire des frameworks, est-ce que tu te rappelles ce que s’est ?

Sandrine : On en avait parlé la dernière fois.

Matthieu : Voilà c’est un ensemble de classes, de codes, qui va vraiment nous simplifier la vie pour effectuer le code, par exemple, là on va utiliser le framework phaser qui est implémenté ici, phaser.mint.js, qui va nous permettre d’utiliser des images, de les animer et du coup, à la place qu’il y ai un 3 ou des 0 de mettre un petit bonhomme qui simule le pacman.

Sandrine : D’accord, mais là ton petit bonhomme, ton 3, tu l’a mis ou concrètement dans ton code ou est-ce que l’on voit, ou est-ce qu’il et créé ?

Matthieu : Faut le trouver, je ne connais pas le code par cœur, alors là on créé, ça va lancer le jeu enfaite, tout part d’ici de la fonction main, c’est-à-dire qu’on écoute, dès que le javascript nous dis je suis prêt, la page est prete, on va lancer notre jeu donc on lance le jeu et on va la construire.
On met un fond de couleur gris, ensuite on créé, on écoute le clavier, cursor scase, on va écouter les touches du clavier, appuyées par l’utilisateur, flèche gauche, droite, haut bas, voilà, on le précise ici, on va initialiser la carte du jeu, init map qui est ici, ça va nous permettre de créer une carte du jeu complètement aléatoire, tout simplement.

Sandrine : Un labyrinthe créé par l’ordinateur.

Matthieu : Ici avec des murs sur les côtés.

Sandrine : C’est lui qui décide.

Matthieu : C’est lui qui décide donc si on recharge la carte a changée, si on recharge encore le jeu, la carte a encore changée donc c’est complètement aléatoire. Et ici ça va nous construire une carte aléatoire avec map.random tout simplement. On s’embête pas. Voilà est-ce que ça répond à ta question ?

Sandrine : Je voulais juste savoir si par exemple, tu voulais remplacer ton 3 par un 8.

Matthieu : Ah oui le 3, alors, hp le nombre de vie du joueur, c’est .hp la propriété hp ça permet justement de savoir combien de vie il reste au joueur actuellement, on lui donne une propriété c’est un objet, est-ce que tu sais ce que c’est que les objets ?

Sandrine : Euh vas-y refait moi un…

Matthieu : Enfaite un objet en programmation, si on prend un objet dans la vie réelle, un héros il a des caractéristiques, un objet qu’est-ce que c’est ? On modélise le héros pacman, on va le modéliser dans la vie réelle le héros, dans un jeu, il a plusieurs vies, quand il meurt si il a 3 vies il faut qu’on saches combien de vies il lui reste. Et une propriété c’est ce que est affectée à lui, c’est sa caractéristique c’est d’avoir 3 vies, quand il meurt, on décrémente sa propriété.hp, sa caractéristique, on lui enlève -1 vie donc il en reste plus que 2. C’est ça enfaite un objet, ça représente quelque chose du jeu avec des caractéristiques qu’on appelle propriétés.
Pour trouver ou est définit son nombre de vie. Dans la fonction init actor, on initialise le héros, on définit ses propriétés, hp c’est sa caractéristique, son nombre de vie, on initialise à 3, si on lui dit, il à 5 vies, on sauvegarde et on recharge le jeu, ça va afficher un 5 et donc ça affiche un 5 du coup il a 5 vies.
Là il est mort.

Sandrine : Ouai, mais ma question c’était pas exactement ça, c’était ou est-ce que tu lui donne sa forme d’origine. De dire, il n’y a rien qui existe au départ, ont créé un bonhomme.

Matthieu : Là sa forme on prend du texte enfaite. C’est juste du texte. Si je mettais 10 il aurait la forme d’un 10.

Sandrine : Mais ce n’est pas là que tu définis sa caractéristique physique, là tu définis juste ton nombre de vies.

Matthieu : Oui mais enfaite on s’en sert vu que c’est un jeu très simple, son nombre de vie c’est son apparence.

Sandrine : C’est son apparence du coup ou est-ce que tu défini son apparence à l’écran, c’est ça ma question.

Matthieu : C’est quand on le déplace on l’affiche ici quand on le dessine.

Sandrine : D’accord c’est dans la fonction draw actor.

Matthieu : Soit rien, plus….

Sandrine : Plus le texte de son nombre de vie.

Matthieu : Le texte de son nombre de vie, tout simplement c’est dans la fonction dessiner actor. Après évidemment ce qu’on va faire on va le remplacer, ce chiffre nombre de vie par une image. Le héros soit ce sera toujours la même couleur le héros soit on pourra jouer sur sa couleur en fonction du nombre de vie restantes. Et tout ça grâce au framework phaser ça va nous simplifier la vie sur le fait d’intégrer des images pour faire bouger les différents… que ce soit pacman ou les méchants dans le jeu.

Sandrine : D’accord donc on a dessiné un actor, on lui a donné des propriétés comme son nombre de vie, on a un compteur pour décrémenter le nombre de vie, on a des méchants. Et ses méchants comment est-ce qu’ils se déplacent ?

Matthieu : Bien enfaite pour le coup comment ils se déplacent ? A chaque fois on écoute les evenements du clavier, je recherche si il y a une fonction qui écoute le clavier qui va effectuer le déplacement des différents élements.

Sandrine : Ca veut dire que les méchants se déplacent en fonction des actions du pacman que tu veux lui faire faire.

Matthieu : Quand le héros se déplace dans ce jeu les méchants se déplacent. Et donc il y a une fonction on update qui est appelée à chaque images par secondes par le framework phaser, si c’est la fin du jeu on ne fait rien si c’est game over, sinon on dessine les joueurs dans leurs nouvelles positions et là en fonction, si le joueur appuie sur la touche bas, on déplace le joueur vers un endroit différent, là il appuie sur la touche gauche, on va le déplacer vers la gauche le héros. Vers la touche droite on déplace le héros plutôt vers la droite, vers la touche haute si le joueur appuie sur la flèche haute, on déplace le héros vers le haut, et vers le bas si on appuie vers le bas…

Sandrine : Et les méchants suivent le mouvement aussi.

Matthieu : Voilà ils ont un mouvement aléatoire qui est déplacé également.

Sandrine : Il est pas aléatoire le mouvement à tes méchants ?

Matthieu : Non semi aléatoire, le but c’est qu’ils se rapprochent du héros, si on regarde on appelle déjà move player go, ça va déplacer le joueur à une nouvelle position. Sin on peut le bouger, ensuite ça va indiquer est-ce que le joueur se déplace vers la gauche, vers la droite, vers le haut, ou vers le bas. Ensuite, si le joueur se déplace, on va le faire se déplacer, on va appeler la fonction move to pour effectuer le déplacement, parce que move, ce qu’on avait fait au tout départ, ici, ça indique la direction du héros, le joueur a appuyé sur la touche haut, on va le déplacer vers le haut et là on va réellement le déplacer. Move to la fonction move to ça va effectuer le déplacement d’un joueur là où il peu, on test tout un tas de paramètres.

Sandrine : Savoir si il est pas dans un mur.

Matthieu : Voilà si il est pas dans un mur, si il y a un ennemi on lui décrémente une vie, si tous les ennemis sont morts il a gagné, sinon on déplace le joueur si il touche un ennemis on le décrémente on lui enlève une vie.
Et ensuite, le move ennemis ça c’est appelé par.. Ça c’est quand on déplace les ennemis, c’est appelé après on déplace le joueur, et après on va déplacer chaque ennemis. En boucle puisqu’il y en a plusieurs, on va les déplacer un par un et qu’est ce qu’il se passe ? Si on regarde la fonction de déplacement des ennemis, ils ont tous plusieurs directions, droite gauche haut bas, et ensuite suivant des calculs mathématiques, on met un peu de random, d’aléatoire pour effectuer le déplacement de l’ennemis, et le but c’est qu’ils se déplace dans la même direction du joueur. Vers la gauche si le héros se déplace vers la gauche, vers la droite si le héros se déplace vers la droite. Par contre si le héros n’a plus de vie, il y a game over qui se met en place. Le jeu est terminé enfaite.

Sanrdine : C’est vrai que le fonction random je l’avait pas utilisée parce que j’avais mis mon pacman en bas à droite, j’avais un seul ennemis qui était en haut à gauche et il cherchait le pacman, il cherchait à s’en rapprocher et du coup si il savait que j’avais des conditions, if pacamn est en dessous de toi alors descendre et … voilà, je n’avais pas de random.

Matthieu : C’était un peu plus simple du coup parce que là avec la fonction random, ils on tendance à tous se rapprocher.

Sandrine : Voilà et moi j’en avait qu’un.

Matthieu : Vers le héros, et finalement à un moment ou à un autre, ils finissent par le toucher parce qu’ils sont très nombreux.

Sandrine : Oui moi j’avais fait un truc qui était vraiment basique très simple.

Matthieu : Il faut toujours commencer par les choses simples. Dans la prochaine émission « La programmation expliquée à ma copine », on va voir la suite, là on a vu comment affecter des vies à un héros, à pacman, la notion d’objet, la notion de déplacement en appuyant sur la touche du clavier, en écoutant quand le joueur appuie sur les flèches directionnelles du clavier, ça permet de déplacer le joueur. Le fait d’utiliser des images, le framework, dans le prochain cours on va continuer à avancer, à découvrir la création de ce jeu pacman.
En attendant si vous voulez recevoir des cours, des vidéos gratuites pour apprendre à créer des jeux sur mobiles, sur tablettes, sur le web, renseignez simplement sous cette vidéo votre nom votre adresse mail, ou alors cliquez sur le lien juste au dessus de nous, c’est un lien cliquable, ça va vous renvoyer cers une deuxième vidéo, ou vous allez découvrir comment l’équipe développement facile peut vous accompagner dans la création de vos jeux, de vos applications sur le web, sur les tablettes, sur les mobiles, comment développer des applications performantes deux à trois fois plus rapidement avec une équipe d’expert en développement à vos côtés pour vous aider à résoudre les problèmes de développement auxquels vous devez faire face. Cliquez sur le lien au dessus de moi ou renseignez votre prénom et votre adresse mail pour recevoir les cours gratuits, je vous dit à très bientôt avec Sandrine dans la prochaine émission « la programmation expliquée ma copine », si tu as un mot de la fin pour motiver les développeurs qui nous regardent…

Sandrine : Soyez sage et programmez bien. A bientôt.

[/ppmtoggle] [/ppmaccordion]

Posez vos questions sur ce que vous avez vu dans la vidéo.

Utilisez la zone commentaire pour poser vos questions sur le développement informatique.