{"id":316,"date":"2025-04-09T11:01:57","date_gmt":"2025-04-09T09:01:57","guid":{"rendered":"https:\/\/portfolio.jahnik.labry.mmi-velizy.fr\/wordpress\/?p=316"},"modified":"2025-04-12T11:53:42","modified_gmt":"2025-04-12T09:53:42","slug":"jeu-javascript","status":"publish","type":"post","link":"https:\/\/portfolio.jahnik.labry.mmi-velizy.fr\/wordpress\/2025\/04\/09\/jeu-javascript\/","title":{"rendered":"Jeu vid\u00e9o en JavaScript"},"content":{"rendered":"\n
\n

En novembre 2025, j’ai r\u00e9alis\u00e9 le plus gros projet de mon premier semestre. Il consiste en la cr\u00e9ation d’un jeu vid\u00e9o 2D de toutes pi\u00e8ces. Alliant programmation et graphisme, j’ai r\u00e9alis\u00e9 ce projet en deux \u00e9tapes.<\/p>\n\n\n\n

\n

D\u00e9cor du jeu<\/h2>\n\n\n\n
\"paysage<\/figure><\/div>\n\n\n\n

\u00c9tant donn\u00e9 que le BUT MMI forme des professionnels poss\u00e9dant des comp\u00e9tences en graphisme , nous avons d\u00fb cr\u00e9er nous-m\u00eame le d\u00e9cor de notre jeu. Pour se faire, nous devions respecter les contraintes suivantes :<\/p>\n\n\n\n

    \n
  • Le th\u00e8me du d\u00e9cor devait \u00eatre le Moyen-\u00c2ge ou la Gr\u00e8ce antique<\/li>\n\n\n\n
  • Le format devait \u00eatre en 2000 pixels x 1000 pixels<\/li>\n\n\n\n
  • Il est strictement interdit de prendre une image depuis le web, nous devions cr\u00e9er chaque \u00e9l\u00e9ment du d\u00e9cor nous-m\u00eames<\/li>\n\n\n\n
  • Le paysage doit comporter au moins 3 niveaux auxquels le personnage doit pouvoir acc\u00e9der.<\/li>\n\n\n\n
  • Le personnage doit pouvoir passer derri\u00e8re un \u00e9l\u00e9ment du d\u00e9cor pour ajouter un effet de profondeur.<\/li>\n<\/ul>\n\n\n\n

    Mon d\u00e9cor repr\u00e9sente une ville romaine antique avec un temple au centre et un volcan \u00e0 l’arri\u00e8re. Je me suis inspir\u00e9 de l’histoire de la cit\u00e9 de Pomp\u00e9i, qui a \u00e9t\u00e9 d\u00e9truite par l’\u00e9ruption du mont V\u00e9suve. En ce qui concerne les niveaux, le personnage pourra se d\u00e9placer sur le sol en terre, l’int\u00e9rieur du temple central et le centre du temple. Le personnage pourra passer derri\u00e8re les piliers du temple.<\/p>\n<\/div>\n\n\n\n

    \n

    Fonctionnement du jeu<\/h2>\n\n\n\n

    Une fois avoir fini le d\u00e9cor du jeu, nous avons d\u00fb faire fonctionner notre jeu et pour cela, nous avons utilis\u00e9 le langage JavaScript. Nous avons ajout\u00e9 un personnage (que nous avons pu cette fois-ci trouver sur Internet) et des fonctions contribuant \u00e0 la jouabilit\u00e9 (des objets \u00e0 ramasser et\/ou \u00e0 utiliser, et les collisions, essentielles pour que le personnage puisse se d\u00e9placer \u00e0 travers le d\u00e9cor).<\/p>\n\n\n\n

    Le jeu devait \u00e9galement avoir un but, un objectif \u00e0 atteindre pour le finir. J’ai voulu mettre en situation le joueur dans l’\u00e9ruption du volcan. Le but est alors de s’\u00e9chapper de la ville \u00e0 travers un portail situ\u00e9 sur le toit du temple central. Pour y acc\u00e9der, le joueur doit ramasser une pi\u00e8ce qui conf\u00e8re un pouvoir de saut am\u00e9lior\u00e9, ce qui lui permettra de sauter assez haut pour atterrir sur le toit et entrer dans le portail.<\/p>\n\n\n\n

    Ce jeu constitue ma premi\u00e8re manipulation du langage JavaScript, ainsi que le premier projet dans lequel j’ai d\u00fb utiliser un logiciel de retouche photo, ici Adobe Photoshop. Aussi, je pense que je peux qualifier ce projet de \u00ab\u00a0premi\u00e8re exp\u00e9rience en game design\u00a0\u00bb, puisque c’est \u00e0 travers la cr\u00e9ation du d\u00e9cor et de la jouabilit\u00e9 que j’ai pu illustrer mes id\u00e9es pour ce travail.<\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

    En novembre 2025, j’ai r\u00e9alis\u00e9 le plus gros projet de mon premier semestre. Il consiste en la cr\u00e9ation d’un jeu vid\u00e9o 2D de toutes pi\u00e8ces. Alliant programmation et graphisme, j’ai r\u00e9alis\u00e9 ce projet en deux \u00e9tapes. D\u00e9cor du jeu \u00c9tant donn\u00e9 que le BUT MMI forme des professionnels poss\u00e9dant des comp\u00e9tences en graphisme , nous […]<\/p>\n","protected":false},"author":1,"featured_media":13,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-316","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-non-classe"],"_links":{"self":[{"href":"https:\/\/portfolio.jahnik.labry.mmi-velizy.fr\/wordpress\/wp-json\/wp\/v2\/posts\/316","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/portfolio.jahnik.labry.mmi-velizy.fr\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/portfolio.jahnik.labry.mmi-velizy.fr\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/portfolio.jahnik.labry.mmi-velizy.fr\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/portfolio.jahnik.labry.mmi-velizy.fr\/wordpress\/wp-json\/wp\/v2\/comments?post=316"}],"version-history":[{"count":15,"href":"https:\/\/portfolio.jahnik.labry.mmi-velizy.fr\/wordpress\/wp-json\/wp\/v2\/posts\/316\/revisions"}],"predecessor-version":[{"id":473,"href":"https:\/\/portfolio.jahnik.labry.mmi-velizy.fr\/wordpress\/wp-json\/wp\/v2\/posts\/316\/revisions\/473"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/portfolio.jahnik.labry.mmi-velizy.fr\/wordpress\/wp-json\/wp\/v2\/media\/13"}],"wp:attachment":[{"href":"https:\/\/portfolio.jahnik.labry.mmi-velizy.fr\/wordpress\/wp-json\/wp\/v2\/media?parent=316"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/portfolio.jahnik.labry.mmi-velizy.fr\/wordpress\/wp-json\/wp\/v2\/categories?post=316"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/portfolio.jahnik.labry.mmi-velizy.fr\/wordpress\/wp-json\/wp\/v2\/tags?post=316"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}