Forums Développement Multimédia

Aller au contenu

[exercice] Jeu de Pong

CODE

20 réponses à ce sujet

#1 Monsieur Spi

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 6994 messages

Posté 03 December 2012 - 19:52 PM

Bonjour,

Voici un petit exercice pour réaliser un jeu de PONG.
La base pour tout débutant qui souhaite commencer à créer des jeux.

Je vous laisses y jeter un œil ici : http://forums.mediab...rcice_-_le_pong

Puis nous pouvons en discuter si vous le souhaitez ;-)

#2 lilive

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 2993 messages

Posté 03 December 2012 - 21:15 PM

Salut M.Spi :)

On ne t'arrête plus!
J'espère que ces exemples de jeux que tu fais serviront bien.


Quelques remarques:

Au tout début tu pourrais annoncer que le fla est disponible en bas. Comme ça on va regarder ce que tu as construis dans la bibliothèque. Et, ouais, tu me connais, toujours à pinailler :P

Suggestion: Ajouter une remarque sur le fait de déclarer des Sprites plutôt que des MC?

Je trouve que c'est une bonne idée de donner des astuces avec des raccourcis pour faire les choses. Parfois tu y vas fort quand même:

int(Math.random()*2)-1|1
 
Tu ne veux même pas donner un solution alternative plus compréhensible? Là faut connaitre le binaire...

Citation

“Pourquoi au lieu de diviser par deux tu multiple par 0.5 ?”
Parce que c'est ce que fait le programme quand on lui demande une division, il effectue en fait une multiplication
Tu citerais tes sources?
Un CPU ça a bien une instruction div quand même non?
Après ce qui se passe au niveau du bytecode et de son interprétation je ne sais pas.
Mais j'ai un doute quand même.
J'ai fouillé 5 minutes sans trouver ma réponse. Je cite ce lien quad même http://grantpimpler....php/archives/74

Tu pourrais attirer l'attention sur le bug possible si on oublie de replacer la balle au moment du rebond sur la raquette. Ce n'est pas évident, et c'est intéressant à mon avis, exemplaire de problèmes qu'on peut rencontrer en matière de collisions.

Sinon, dans la mesure des prérequis demandés, j'ai l'impression que ton but est atteint: tu proposes un exemple, avec des explications raisonnablement développées, en laissant le lecteur se creuser la tête à des moments, ce qui est aussi formateur. Dur de se mettre à la place d'un débutant, mais j'ai l'impression que ça peut être très bienvenu tes exemples (pour autant qu'apprendre à faire ce genre de jeux en flash ait encore un sens aujourd'hui, ça je n'en sais rien du tout ;) )

Tiens, en parlant de se creuser, je vais te rendre la pareille: quelle est la partie de la page qui n'a rien à voir avec le pong mais avec le snake, je pense? :mrgreen:

#3 Monsieur Spi

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 6994 messages

Posté 03 December 2012 - 22:00 PM

Coucou Lilive,

Content de te revoir et que tu m'aie lu ;-)
J'aime bien tes retours, tu pinailles mais tu as tout à fait raison.

Citation

Au tout début tu pourrais annoncer que le fla est disponible en bas. Comme ça on va regarder ce que tu as construis dans la bibliothèque.

Noté, je vais ajouter une remarque sur tous les "exercices" en ce sens.

Citation

Suggestion: Ajouter une remarque sur le fait de déclarer des Sprites plutôt que des MC?

Je me suis longtemps posé la question, j'ai commencé à l'écrire, puis j'ai laissé tomber car je suis parti dans un véritable roman sur le typage, les classes, l'utilité d'utiliser plutôt des Sprites que des MovieClip etc.... j'ai finalement pris le parti de ne parler que des choses importantes pour l'exercice.

Citation

Je trouve que c'est une bonne idée de donner des astuces avec des raccourcis pour faire les choses. Parfois tu y vas fort quand même

Vi j'avoue que celle là est un peu corsée et j'ai mis un moment avant de la trouver...
Je ne donne pas d'alternative car en fait je prend un moment pour détailler ce que fait le bout de code juste en dessous, toujours dans l'esprit "exercice" et pas "tutorial", j'ai trouvé que c'était bien de laisser le lecteur reconstruire l'instruction à sa sauce en suivant les explications jointes. Tu penses que c'est indispensable d'ajouter une variante plus classique ?

Citation

Tu citerais tes sources?
Un CPU ça a bien une instruction div quand même non?
Après ce qui se passe au niveau du bytecode et de son interprétation je ne sais pas.
Mais j'ai un doute quand même.
J'ai fouillé 5 minutes sans trouver ma réponse. Je cite ce lien quad même http://grantpimpler....php/archives/74

Très honnêtement, je l'avais lu à une époque, maintenant j'ai surement mal interprété, plus rapide ne veut pas forcément dire que l'ordi est incapable de diviser... je vais corrier :oops: , merci.

Ca m'a poussé à chercher un peu et j'ai trouvé ça :

Les algos de division : http://en.wikipedia....n_%28digital%29

Et ceux de multiplication :
http://en.wikipedia....wiki/Dadda_tree
http://en.wikipedia....ki/Wallace_tree

Ce qu'il en ressort, c'est que c'est plus rapide de multiplier plutôt que diviser car ça passe par moins d'étapes, mea culpa.

Citation

Tu pourrais attirer l'attention sur le bug possible si on oublie de replacer la balle au moment du rebond sur la raquette. Ce n'est pas évident, et c'est intéressant à mon avis, exemplaire de problèmes qu'on peut rencontrer en matière de collisions.

T'as l’œil :texas:

Ok j'ajoute une petite phrase en ce sens, mais je ne vais pas trop m'étendre car j'ai d'autres exercices sur le feu qui vont en parler.

Citation

Sinon, dans la mesure des prérequis demandés, j'ai l'impression que ton but est atteint: tu proposes un exemple, avec des explications raisonnablement développées, en laissant le lecteur se creuser la tête à des moments, ce qui est aussi formateur. Dur de se mettre à la place d'un débutant, mais j'ai l'impression que ça peut être très bienvenu tes exemples (pour autant qu'apprendre à faire ce genre de jeux en flash ait encore un sens aujourd'hui, ça je n'en sais rien du tout ;) )

Merci, j'ai effectivement choisi le style "exercices" pour que le lecteur puisse utilser sa matière grise, ce qui me semble aussi très formateur (savoir aller chercher l'info et l'utiliser pour comprendre). Avec cette série, je vais lentement monter en difficulté du coup pour ne pas faire trop long à chaque fois je laisse une part de réflexion personnelle. Après pour le fait que d'apprendre à faire des jeux avec Flash ait encore un sens, je préciserai plus avec ActionScript que Flash (qui ne sert qu'à dessiner et stocker les objets en fait), la transposition dans un paquet d'autres langage ne demande pas beaucoup d'efforts, du coups ça peut servir quand même ^_^


Citation

Tiens, en parlant de se creuser, je vais te rendre la pareille: quelle est la partie du tuto qui n'a rien à voir avec le tuto mais avec le snake, je pense? :mrgreen:


Je l'ai vue tout à l'heure en me relisant, j'ai corrigé, petite erreur de copier/coller d'un modèle à l'autre :P

Bon je me colle aux petites corrections.

Pour les suivant je bosses actuellement sur un Missile Command et un Frogger.


[EDIT] corrections faites, merci Lilive

#4 lilive

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 2993 messages

Posté 03 December 2012 - 22:22 PM

Voir le messageMonsieur Spi, le 03 December 2012 - 22:00 PM, dit :

Tu penses que c'est indispensable d'ajouter une variante plus classique ?
Indispensable, je sais pas. Je l'ai noté parce-qu'il faut avoir des notions de binaire pour pouvoir le comprendre, et c'est peut-être un peu chaud pour les lecteurs visés.
Une variante avec l'opérateur ternaire?

Math.random() < 0.5 ? 1 : -1



Content que mes retours semblent utiles :)

++

#5 Monsieur Spi

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 6994 messages

Posté 03 December 2012 - 22:53 PM

lol pour la variante, je n'y avais pas pensé alors que je l'utilise juste en dessous cet opérateur, pour savoir où replacer la balle ;-)

Autant conserver les deux exemples, d'autant que je viens de rajouter quelques infos et j'explique comment ça fonctionne.
J'ai essayé d'être clair (en m'appuyant sur une définition que j'ai pompé chez ..crosoft parce qu'elle me paraissait simple) :mrgreen:

#6 lilive

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 2993 messages

Posté 03 December 2012 - 23:07 PM

Tu vois, les explications que tu as rajouté pour le coup je trouve que ça alourdi. Le mieux est l'ennemi du bien :)
Vu ton style tu peux continuer à ne pas donner plus d'explication qu'avant, et rajouter la variante pour ceux qui ne comprendraient pas.

Et sinon, pendant la cuisson de mes pâtes, j'ai fait une démo:


- Afficher le SWF -
Fichier joint  pong_mb_bug_cs5.swf   8.14 Ko   4 téléchargement(s)


Fichier joint  pong_mb_bug_cs5.fla   9.6 Ko   1 téléchargement(s)

[edit] Mes pâtes sont trop cuites maintenant :mrgreen:

[edit 2] Ah ouais, c'est carrément de la bouillie en fait! Me suis fait avoir, rhhhaaaaaa

#7 Monsieur Spi

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 6994 messages

Posté 03 December 2012 - 23:17 PM

Citation

Tu vois, les explications que tu as rajouté pour le coup je trouve que ça alourdi.

Rahh, lesquelles ?

Citation

Le mieux est l'ennemi du bien :)

Je suis bien d'accord ;-)

Citation

Et sinon, pendant la cuisson de mes pâtes, j'ai fait une démo:

Vi, ça illustre parfaitement le bug, je peux placer le swf dans le tuto ?

Désolé pour tes pâtes :?


EDIT : Bon voilà je viens de recorriger, j'ai viré l'explication sur l'opérateur et laissé la solution pour ceux qui connaissent le binaire et une solution plus simple pour les autres.

#8 lilive

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 2993 messages

Posté 03 December 2012 - 23:45 PM

Voir le messageMonsieur Spi, le 03 December 2012 - 23:17 PM, dit :

Rahh, lesquelles ?

Seulement les trucs sur le binaire. C'est redevenu plus léger après ton dernier passage.
Mais je m'aperçois que même toi tu ne comprends pas tout à fait, alors pour tes lecteurs, imagine!
En effet ce qui se passe c'est

0 <= random < 1
0 <= random * 2 < 2
donc int(random * 2) = 0 ou 1, jamais 2
int(random * 2) - 1 = -1 ou 0
En binaire (sur 4 octets), -1 ou 0 ça fait
11111111 11111111 11111111 11111111 ou 000000000 00000000 00000000 000000000

11111111 11111111 11111111 11111111 | 00000000 00000000 0000000 00000001 = 11111111 11111111 11111111 11111111

000000000 00000000 00000000 000000000 | 00000000 00000000 0000000 00000001 = 000000000 00000000 00000000 000000001

Tu te retrouves donc bien avec -1 ou 1, mais ça ne se passe pas comme tu l'expliques (c'est pour ça que je me permets de dire que tu n'avais pas compris ;)

Mais on va pas y passer 3 plombes non plus :P
Mon conseil: laisse tomber ce truc et utilise quelque chose de plus simple, par exemple l'opérateur ternaire.


Voir le messageMonsieur Spi, le 03 December 2012 - 23:17 PM, dit :

Vi, ça illustre parfaitement le bug, je peux placer le swf dans le tuto ?
Tout à fait, si ça te plaît c'est fait pour.


Tes autres corrections sont bien je trouve.



[edit] La bouillie était quand même mangeable. ça tient au corps!

#9 Monsieur Spi

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 6994 messages

Posté 04 December 2012 - 00:27 AM

Citation

0 <= random < 1

Voilà ce qui fausse le raisonnement.... ça m'apprendra.
Pourtant j'y ai passé un moment sur ce truc, dommage, pour une fois que j'étais fier d'en avoir trouvé un je butte sur une base à la c....

Du coup je vais aller corriger.

...................

Voilà j'ai carrément récupéré ta version, expliqué mon fourvoiement et ajouté ton schémas.

#10 hubeert

  • Members
  • PipPipPipPipPipPipPipPip
  • 925 messages

Posté 04 December 2012 - 11:43 AM

coucou;
Encore bravo pour ton boulot..

a mon avis lorsque on désire un random aleatoire entre deux valeurs.. il ne faut pas faire un Math.random()
Math.random() < .5 ne prévois pas le cas ou Math.random() est egal a .5 dans ce cas ca renvoi faux; alors que ce n'est ni faux ni vrai
vaudrait donc mieux écrire Math.random() <= .5 mais ca biaise les chances également..(eh eh je pinaille)
le mieux serait Math.random()>= .5 qui est pas biaisé..

cette manière de faire qui est également plus rapide..(Math.random() est gourmand)


temps= new Date();
temps.getTime() & 1 ? 1:-1
 

getTime() renvoi un entier.. celui ci est pair ou impair; cest ce que nous testons avec l'operateur sur le bit &
il decoule de ceci que le test renvois vrai ou faux..

Autre chose; je ne suis pas un connaisseur de l AS3; mais la fonction int() n'est pas dépréciée? depuis flash5 ?

#11 Monsieur Spi

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 6994 messages

Posté 04 December 2012 - 11:59 AM

Hello et merci.

Citation

Math.random() < .5 ne prévois pas le cas ou Math.random() est egal a .5 dans ce cas ca renvoi faux;

Heuu là pas d'accord, "si random < .5 valeur = 1 sinon valeur = -1", donc si il est supérieur ou égal à .5 il renvoie -1.

Ceci dit ton approche est aussi intéressante, merci.
Je vais éviter pour le moment les opérateurs binaires, j'ai à première vue encore besoin de plancher dessus pour être en mesure d'expliquer le fonctionnement à chaque coup, donc à ne réserver que pour les choses dont je suis sur ;-)

Citation

Autre chose; je ne suis pas un connaisseur de l AS3; mais la fonction int() n'est pas dépréciée? depuis flash5 ?

Il ne me semble pas, en tout cas ça ne semble pas spécifié dans la doc : http://help.adobe.co...deprecated.html

#12 hubeert

  • Members
  • PipPipPipPipPipPipPipPip
  • 925 messages

Posté 04 December 2012 - 12:47 PM

coucou;
C'est deja bien ce que tu fais..Ceci dit au vue de tes qualités et ton inventivité; l' utilisation des opérateurs sur le bit apporterait plein d'ouverture il me semble..Mais c'est juste une suggestion.. Bonne continuation.

#13 Monsieur Spi

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 6994 messages

Posté 04 December 2012 - 13:05 PM

Re,

Merci ;-)

Je suis conscient du fait qu'utiliser des opérateurs binaires serait un gros plus, je vais essayer de m'y forcer plus souvent, mais j'ai peur de me tromper dans les explications lors des exercices, du coup il ne faut pas hésiter à me corriger quand vous voyez une erreur, je suis aussi conscient de ne pas les maîtriser aussi bien qu'il le faudrait ;-)

#14 hubeert

  • Members
  • PipPipPipPipPipPipPipPip
  • 925 messages

Posté 04 December 2012 - 13:46 PM

coucou;
En fait ce n'est pas utiliser les opérateurs sur le bit qui est intéressant.Les opérateurs sur le bit ne sont que des outils
Ce qui est intéressant c'est de modéliser le problème afin de le résoudre avec un ou des opérateur sur le bit..
C'est très intéressant dans les jeux..
Donc il y a rien a savoir de particulier avec ses opérateurs; mais cest une autre manière de penser et de conceptualiser. Je t'ai vu utiliser des tableaux dans tres nombreux jeux; alors qu'une simple variable pouvait contenir toutes les informations et les récupérer grace aux opérateurs sur le bit..(lol cest pas un reproche hein)
Essaye d'imaginer les ressources qu'il faudrait pour faire un jeux comme cascade de manière classique..alors que la 100 ligne suffisent..
le but de cascade est d'élimer le maximum de tonneaux en moins de coup possible; sachant que si on clique sur un tonneau on élimine tous les tonneaux ayant la même couleur qui se touche..


Ceci dit bravo pour ce que tu fais et surtout que tu partages..

Fichier(s) joint(s)



#15 Monsieur Spi

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 6994 messages

Posté 04 December 2012 - 14:16 PM

Citation

Ce qui est intéressant c'est de modéliser le problème afin de le résoudre avec un ou des opérateur sur le bit..
C'est très intéressant dans les jeux..

Je suis d'accord avec toi, ceci dit pour les exercices ce n'est pas forcément bon de conceptualiser à ce point, il ne faut pas oublier que je m'adresse à des débutants ;-)

Citation

Donc il y a rien a savoir de particulier avec ses opérateurs;

Là par contre je ne suis pas tout à fait d'accord, il faut connaitre la logique et ce que fait chaque opérateur ainsi qu'avoir une connaissance du binaire, ce qui n'est pas forcément une approche simple, je ne dis pas insurmontable, mais pas simple.

Citation

Essaye d'imaginer les ressources qu'il faudrait pour faire un jeux comme cascade de manière classique..alors que la 100 ligne suffisent..

Et bien je crois que tu viens de me donner un nouveau sujet d'exercice, merci ;-)
Je pense que ce sera un très bon exercice pour montrer l'utilisation des opérateurs sur le bit et une conceptualisation plus abstraite. Et pour moi même ce sera aussi un bon exercice pour m'entrainer, en espérant que les gens qui y sont rodés me corrigent si je me trompe.

Je le met dans la liste pour ce qui suit.

#16 hubeert

  • Members
  • PipPipPipPipPipPipPipPip
  • 925 messages

Posté 04 December 2012 - 16:07 PM

Coucou,
Si tu te lances dans cascade je suis ton premier fan je suis sur que tu vas trouver des solutions élégantes . Tu vas en faire un exercice dans le wiki?
En fait tout le monde pense que les opérateur sur le bit c'est pas pour le débutant , du coup personne ne sait ce que c est ni à quoi ça peut bien servir .. Lol

#17 Monsieur Spi

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 6994 messages

Posté 04 December 2012 - 17:17 PM

Citation

Tu vas en faire un exercice dans le wiki?

Oui, si j'arrive à aller au bout de la série d'exercices.

Citation

En fait tout le monde pense que les opérateur sur le bit c'est pas pour le débutant

Le problème n'est pas que ce soit compliqué, mais abstrait, or on considère généralement le débutant comme quelqu'un qui a peu voire pas de notions de programmation. Quand tu dis "divisé par deux" c'est simple, tout le monde sais le faire ça utilise le système décimal à 9 chiffres, c'est du niveau classe primaire. Mais si tu parles de "décalage de bit" ça ne l'est plus, même si au final cela donne le même résultat, et ce serait pareil si tu parlais en puissances de 10 (pour une base 10) bien que ça reste à mon sens plus abordable.

Les opérations binaires imposent de savoir qu'un calcul informatique utilise une base 2. Pour s'en servir il faut comprendre la notation positionnelle utilisée en base 2, où chaque position est reliée à la position voisine par un multiplicateur, chaque chiffre représentant une puissance de la base (dans notre cas 2), autrement dit "10" en base 2 correspond à "2"... (pour ceux qui veulent en savoir plus : http://fr.wikipedia....ki/Code_binaire ).

Bref, "divisé par deux" c'est très simple comme concept, "multiplié par un demi" ça reste abordable, mais le binaire ça demande de rentrer dans des explications un peu plus longues pour un débutant dès qu'on cherches à faire des opérations plus complexes ;-) C'est pourquoi, à mon avis, on estime que les opérations binaires c'est à réserver à des personnes ayant déjà quelques facilités à jongler avec les chiffres. La preuve, moi même je me suis planté dans mon raisonnement pour le Pong, si Lilive n'avait pas vérifié et corrigé j'aurais laissé une grosse erreur dans l'exercice, même si elle ne venait pas de l'opérateur, pourtant je ne suis plus un débutant, mais il y a certaines choses pour lesquelles je fais un blocage, j’essaye pourtant, mais je réussi rarement mon coup quand il s'agit de l'expliquer.

#18 hubeert

  • Members
  • PipPipPipPipPipPipPipPip
  • 925 messages

Posté 04 December 2012 - 22:08 PM

coucou;
bah.. ce n'est ni compliqué ni abstrait; faut juste sortir de ses habitudes et effectivement c'est pas simple.; si je dis a quelqu’un le film dure 135 mn il ne voit pas bien; il est plus simple de dire le film dure 2h15. mais bon on est pas rodé a calculer en sexagésimal; c'est pareil pour le binaire.Il y a rien de compliqué.
Si on parle de tableau on dit il stocke des infos et vous avez tel ou tel outil pour faire ceci ou cela.
C'est pareil pour le binaire dans l'optique qui nous intéresse ca stocke des infos.. ils y a des outils pour manipuler les infos pour faire ceci ou cela. Et dans un chiffre tout simple ( un tableau) on peut stocker plein d'infos.. beh c'est tout faut sortir de ses habitudes ou avoir envie de savoir; rien de plus..
T’inquiète pas pour expliquer c'est pas facile .Un très grand lors de son procès a dit en conclusion" et pourtant elle tourne" et finalement il avait raison.

Et bon courage pour toi et aussi un grand merci; car partager c'est s'exposer..

#19 lilive

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 2993 messages

Posté 04 December 2012 - 22:41 PM

Voir le messagehubeert, le 04 December 2012 - 22:08 PM, dit :

et aussi un grand merci; car partager c'est s'exposer..
J'aime bien celle-là :)

#20 archiroc

    Ceinture Noire

  • Members
  • PipPipPipPipPipPipPip
  • 255 messages

Posté 27 November 2016 - 17:22 PM

Rohhh..... Dernier commentaire de 2012 !

Dîtes moi Mr. SPI,
Je voudrais essayer de faire la même chose en javascript.

Je prends quel IDE ? et heuh.... Frameworks et librairies ?
( Surtout pas sur Animate sinon ne ferait pas l'effort ! )

Merci :)

#21 Monsieur Spi

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 6994 messages

Posté 27 November 2016 - 17:52 PM

Tu n'as besoin d'aucun IDE/FrameWork/librairie, juste de Javascript (natif dans ton navigateur).
Un simple éditeur de texte suffit, Notepad++ sur PC ou SublimeText sur MAC.
Puis suivre les instructions ici : http://forums.mediab...s/exercice_pong



1 utilisateur(s) li(sen)t ce sujet

0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)

authorised training centre

Centre de Formation Mediabox - Adobe et Apple Authorised Training Center.

Déclaré auprès de la Direction du Travail et de la Formation Professionnelle

Mediabox : SARL au capital de 62.000€ - Numéro d'activité : 11 75 44555 75 - SIRET : 49371646800035

MEDIABOX, 23, rue de Bruxelles, 75009 PARIS

FFP