{"id":581,"date":"2018-05-30T13:49:02","date_gmt":"2018-05-30T12:49:02","guid":{"rendered":"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/?p=581"},"modified":"2018-06-20T20:29:04","modified_gmt":"2018-06-20T19:29:04","slug":"projet-py-pong","status":"publish","type":"post","link":"https:\/\/blog.univ-angers.fr\/polytech_2A\/2018\/05\/30\/projet-py-pong\/","title":{"rendered":"Projet Py-Pong"},"content":{"rendered":"<p>Bienvenue \u00e0 tous ! <\/p>\n<p>Dans le cadre de notre seconde ann\u00e9e de cycle pr\u00e9paratoire \u00e0 l&#8217;ISTIA nous avons eu \u00e0 choisir un projet parmi une cinquantaine de projets. Int\u00e9ress\u00e9 par la programmation et les jeux, nous avons d\u00e9cid\u00e9 de nous lancer dans ce projet !<\/p>\n<p><strong>&#8211; Le jeu pong<\/strong><\/p>\n<p>Le jeu Pong est consid\u00e9r\u00e9 par beaucoup comme \u00e9tant le pr\u00e9curseur des jeux que nous connaissons aujourd&#8217;hui. Sorti en 1972 et d\u00e9velopp\u00e9 par Nolan Bushnell et Allan Alcorn de la soci\u00e9t\u00e9 Atari, il est connu dans le monde entier ! Le concept est basique : Deux raquettes, une balle et un score pour d\u00e9partager deux joueurs !<br \/>\nLe jeu se veut ressemblant \u00e0 une partie de Ping-Pong vue du dessus et s&#8217;est vu adapt\u00e9 un bon nombre de fois depuis sa cr\u00e9ation.<\/p>\n<p><strong>&#8211; Le d\u00e9veloppement en python<\/strong><\/p>\n<p>Le logiciel de d\u00e9veloppement du jeu nous a \u00e9t\u00e9 impos\u00e9 par notre tuteur, il s&#8217;agissait du logiciel &#8220;Pycharm&#8221; utilisant le langage python.<br \/>\nLa premi\u00e8re \u00e9tape pour nous fut donc de d\u00e9couvrir le langage et le logiciel avant de pouvoir nous lancer dans la programmation !<br \/>\nL&#8217;\u00e9tape suivante pour nous consistait \u00e0 r\u00e9aliser la base du jeu, c&#8217;est a dire les deux raquettes, le score, la balle ainsi que le rebond de cette derni\u00e8re sur les raquettes. Nous avons finalement obtenu un premier r\u00e9sultat, d\u00e9j\u00e0 ressemblant au v\u00e9ritable Pong :  <\/p>\n<div id=\"attachment_588\" style=\"width: 310px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2018\/05\/Capture.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-588\" src=\"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2018\/05\/Capture-300x168.png\" alt=\"Premi\u00e8re version fonctionnelle de notre projet Py-Pong !\" width=\"300\" height=\"168\" class=\"size-medium wp-image-588\" srcset=\"https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2018\/05\/Capture-300x168.png 300w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2018\/05\/Capture-1024x574.png 1024w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2018\/05\/Capture-500x280.png 500w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2018\/05\/Capture.png 1731w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><p id=\"caption-attachment-588\" class=\"wp-caption-text\">Premi\u00e8re version fonctionnelle de notre projet Py-Pong !<\/p><\/div>\n<p><strong>&#8211; Les quatre barres<\/strong><\/p>\n<p>La troisi\u00e8me \u00e9tape de notre projet \u00e9tait sans doute la plus rapide, notre objectif \u00e9tait cette fois ci de passer sur un jeu \u00e0 quatre raquettes en en rajoutant une au dessus et une en dessous. Nous avons ainsi obtenu le r\u00e9sultat suivant :<\/p>\n<div id=\"attachment_594\" style=\"width: 310px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2018\/05\/Pypong4.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-594\" src=\"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2018\/05\/Pypong4-300x169.png\" alt=\"Voici \u00e0 quoi ressemble le jeu une fois les deux nouvelles barres ajout\u00e9es !\" width=\"300\" height=\"169\" class=\"size-medium wp-image-594\" srcset=\"https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2018\/05\/Pypong4-300x169.png 300w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2018\/05\/Pypong4-1024x579.png 1024w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2018\/05\/Pypong4-500x282.png 500w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2018\/05\/Pypong4.png 1732w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><p id=\"caption-attachment-594\" class=\"wp-caption-text\">Voici \u00e0 quoi ressemble le jeu une fois les deux nouvelles barres ajout\u00e9es !<\/p><\/div>\n<p><strong>&#8211; Les capteurs et la carte Arduino<\/strong><\/p>\n<p>La plus grosse partie de notre projet consistait \u00e0 permettre le d\u00e9placement de la barre de chaque joueur \u00e0 l&#8217;aide d&#8217;un capteur infrarouge. Ces derniers nous envoient des valeurs qui d\u00e9pendent de l&#8217;\u00e9loignement de la main du joueur par rapport au capteur, ce qui nous permet de d\u00e9placer les barres en fonction de ces valeurs ! les 4 capteurs sont branch\u00e9s sur une carte Arduino qui nous permet de r\u00e9cup\u00e9rer les valeurs dans notre programme :<\/p>\n<div id=\"attachment_673\" style=\"width: 310px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2018\/05\/capteur.jpg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-673\" src=\"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2018\/05\/capteur-300x225.jpg\" alt=\"Un aper\u00e7u du branchement des 4 capteurs sur la carte Arduino   \" width=\"300\" height=\"225\" class=\"size-medium wp-image-673\" srcset=\"https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2018\/05\/capteur-300x225.jpg 300w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2018\/05\/capteur-399x300.jpg 399w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2018\/05\/capteur.jpg 646w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><p id=\"caption-attachment-673\" class=\"wp-caption-text\">Un aper\u00e7u du branchement des 4 capteurs sur la carte Arduino<\/p><\/div>\n<p><strong>&#8211; Le menu et les options<\/strong><\/p>\n<p>Une fois le &#8220;c\u0153ur&#8221; du projet termin\u00e9, il nous a sembl\u00e9 important de s&#8217;occuper un peu de &#8220;l&#8217;habillage&#8221; de ce dernier. Nous avons donc cr\u00e9\u00e9 un menu qui permet 3 actions : Le lancement du jeu, l&#8217;acc\u00e8s aux options du jeu et l\u2019arr\u00eat du programme. Il nous a donc aussi fallu cr\u00e9er la page des options, qui sert d&#8217;interface d\u2019\u00e9changes entre le joueur et le programme et permet de modifier les valeurs de plusieurs variables du programme comme la vitesse de la balle ou encore la taille des raquettes. Le design n&#8217;\u00e9tant pas notre priorit\u00e9, nous avons obtenu les rendus suivants : <\/p>\n<div id=\"attachment_674\" style=\"width: 310px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2018\/05\/menu.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-674\" src=\"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2018\/05\/menu-300x168.png\" alt=\"Aper\u00e7u du menu du jeu qui permet la navigation au sein du programme\" width=\"300\" height=\"168\" class=\"size-medium wp-image-674\" srcset=\"https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2018\/05\/menu-300x168.png 300w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2018\/05\/menu-500x281.png 500w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2018\/05\/menu.png 869w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><p id=\"caption-attachment-674\" class=\"wp-caption-text\">Aper\u00e7u du menu du jeu qui permet la navigation au sein du programme<\/p><\/div>\n<div id=\"attachment_675\" style=\"width: 310px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2018\/05\/options.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-675\" src=\"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2018\/05\/options-300x168.png\" alt=\"Voici \u00e0 quoi ressemble la fameuse page des options du jeu !\" width=\"300\" height=\"168\" class=\"size-medium wp-image-675\" srcset=\"https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2018\/05\/options-300x168.png 300w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2018\/05\/options-500x281.png 500w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2018\/05\/options.png 866w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><p id=\"caption-attachment-675\" class=\"wp-caption-text\">Voici \u00e0 quoi ressemble la fameuse page des options du jeu !<\/p><\/div>\n<p><strong>&#8211; Le son avec Sonic Pi !<\/strong><\/p>\n<p>Un dernier ajout sur lequel nous avons travaill\u00e9 dans le cadre de ce projet \u00e9tait la musique du jeu. En effet, nous d\u00e9sirions ajouter de la musique pendant la phase de jeu et notre tuteur nous a alors conseill\u00e9 le logiciel &#8220;Sonic Pi&#8221; qui permet de &#8220;coder&#8221; de la musique \u00e0 partir de samples choisis. Il \u00e9tait ensuite possible de relier Sonic Pi et notre programme Python pour avoir notre musique en jeu !<\/p>\n<div id=\"attachment_676\" style=\"width: 310px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2018\/05\/sonic-pi.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-676\" src=\"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2018\/05\/sonic-pi-300x162.png\" alt=\"L&#039;interface de programmation du logiciel Sonic Pi\" width=\"300\" height=\"162\" class=\"size-medium wp-image-676\" srcset=\"https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2018\/05\/sonic-pi-300x162.png 300w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2018\/05\/sonic-pi-1024x555.png 1024w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2018\/05\/sonic-pi-500x271.png 500w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2018\/05\/sonic-pi.png 1203w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><p id=\"caption-attachment-676\" class=\"wp-caption-text\">L&#8217;interface de programmation du logiciel Sonic Pi<\/p><\/div>\n<p><strong>Aper\u00e7u final<\/strong><\/p>\n<p>Finalement, bien qu&#8217;il \u00e9tait encore et toujours possible d\u2019am\u00e9liorer notre programme et d&#8217;ajouter des \u00e9l\u00e9ments \u00e0 notre jeu, il \u00e9tait temps de rendre notre projet ! Nous avons donc en derni\u00e8re partie majoritairement r\u00e9gl\u00e9 les bugs et modifi\u00e9 l\u00e9g\u00e8rement quelques aspects graphiques du jeu et voici l\u2019aper\u00e7u final de ce dernier : <\/p>\n<div id=\"attachment_677\" style=\"width: 310px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2018\/05\/appercu-final.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-677\" src=\"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2018\/05\/appercu-final-300x168.png\" alt=\"Voici \u00e0 quoi ressemble finalement le jeu &quot;Py-Pong&quot; !\" width=\"300\" height=\"168\" class=\"size-medium wp-image-677\" srcset=\"https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2018\/05\/appercu-final-300x168.png 300w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2018\/05\/appercu-final-500x281.png 500w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2018\/05\/appercu-final.png 947w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><p id=\"caption-attachment-677\" class=\"wp-caption-text\">Voici \u00e0 quoi ressemble finalement le jeu &#8220;Py-Pong&#8221; !<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Bienvenue \u00e0 tous ! Dans le cadre de notre seconde ann\u00e9e de cycle pr\u00e9paratoire \u00e0 l&#8217;ISTIA nous avons eu \u00e0 choisir un projet parmi une cinquantaine de projets. Int\u00e9ress\u00e9 par la programmation et les jeux, nous avons d\u00e9cid\u00e9 de nous &hellip; <a href=\"https:\/\/blog.univ-angers.fr\/polytech_2A\/2018\/05\/30\/projet-py-pong\/\">Continuer la lecture <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":46304,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[147],"tags":[],"class_list":["post-581","post","type-post","status-publish","format-standard","hentry","category-147"],"_links":{"self":[{"href":"https:\/\/blog.univ-angers.fr\/polytech_2A\/wp-json\/wp\/v2\/posts\/581","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.univ-angers.fr\/polytech_2A\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.univ-angers.fr\/polytech_2A\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.univ-angers.fr\/polytech_2A\/wp-json\/wp\/v2\/users\/46304"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.univ-angers.fr\/polytech_2A\/wp-json\/wp\/v2\/comments?post=581"}],"version-history":[{"count":0,"href":"https:\/\/blog.univ-angers.fr\/polytech_2A\/wp-json\/wp\/v2\/posts\/581\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.univ-angers.fr\/polytech_2A\/wp-json\/wp\/v2\/media?parent=581"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.univ-angers.fr\/polytech_2A\/wp-json\/wp\/v2\/categories?post=581"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.univ-angers.fr\/polytech_2A\/wp-json\/wp\/v2\/tags?post=581"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}