Partage
  • Partager sur Facebook
  • Partager sur Twitter

[Jeu en ligne] DualBeatWin

Jeu de plateau tour par tour, en Javascript et jQuery

19 janvier 2017 à 18:10:34

[Jeu en ligne] DualBeatWin

Capture d'écran du projet

N|Solid

Jeu de plateau tour par tour, en Javascript et jQuery

  • Lien vers la démo en ligne
    • Chrome et Firefox : compatible avec les derniers versions
    • Tor Browser : compatible, si NoScript accepte le javascript sur la page
    • Internet Explorer et Edge : Incompatible compatible

Présentation de l'auteur

L'auteur du projet : Lhuillery Matthieu, alias BeatWinTheWave

En savoir plus sur le projet

Genèse

Généralités et avancement

  • Je me suis lancé dans ce projet après le Nouvel An. Vous savez, les bonnes résolutions, tout ça... Bref, ceci est mon premier projet d'une telle dimension, après avoir fait un premier script pour GNU/Linux en shell bash (Reprendre le contrôle avec linux) et un premier jeu de combat dans la console codé avec ruby (Lancez-vous dans la programmation avec Ruby). Je me suis senti capable d'entreprendre un projet en 2D sur navigateur WEB. J'ai donc tenté d'utiliser au mieux ce que j'ai appris sur OpenClassrooms. J'ai codé mon projet avec Visual Studio Code et je l'ai versionné avec Git. J'en ai profité pour installer et configurer un serveur Bitbucket sur un Raspberry Pi que j'avais en réserve.
  • Une première démo est maintenant jouable à l'adresse suivante : Lien vers la démo en ligne.
  • En réalisant ce jeu, je me suis rendu compte qu'il est important de réfléchir dès le début à la gestion du projet et que j'ai encore de nombreuses choses à apprendre à ce sujet. Du coup, il y a encore pas mal de cours qui m'intéressent sur OpenClassrooms à propos de la gestion de projet, alors l'aventure continue. Je vais continuer de coder quelques minutes chaque jour dans mon coin à mon rythme. Enfin cela dit, si vous avez des propositions pour des projets en équipe, elles sont les bienvenues !

GamePlay

DualBeatWin est un jeu de rôle sur navigateur.

  • Celui-ci se joue à deux, sur un même navigateur, au tour par tour.
  • Les joueurs peuvent choisir un niveau de difficulté pour leur partie.
  • Un plateau de jeu plus ou moins grand est créé en fonction de la difficulté sélectionnée.
  • Ce plateau est rempli d'un certain nombre de cases en fonction de sa taille.
  • Chaque case peut être soit vide, soit inaccessible, ou bien contenir une arme.
  • Un nouveau plateau aléatoire est créé à chaque nouvelle partie.
  • Le placement initial des joueurs est, lui aussi, aléatoire.
  • A chaque tour, un joueur peut se déplacer d’une à trois cases avant de terminer son tour.
  • Lorsque les joueurs se croisent sur des cases adjacentes, un combat à mort s’engage.
  • 4 armes, avec des dégâts différents, sont placées aléatoirement sur la carte.
  • Les armes sont récoltées par les joueurs qui passeraient dessus.
  • L'arme par défaut inflige 10 points de dégâts.
  • Chaque arme et chaque joueur ont un nom et un visuel associés.

Objectifs

  • L'objectif principal de ce projet est d'obtenir le certificat de réussite OpenClassrooms. :p
  • Les objectifs secondaires sont:
    • approfondir ma compréhension de la POO et de l'architecture MVC
    • m'exercer avec javascript et jquery
    • Enrichir mon portefolio et, qui sait ? Peut-être signer un contrat de travail.

Le projet et son Originalité

Améliorations potentielles

Les améliorations potentielles sont certainement très nombreuses, en voici quelques une:

Améliorations du GamePlay

  • Une IA contre qui s'affronter
  • La possibilité de prendre la fuite en plein combat
  • La possibilité de récupérer des PV en récoltant des objets sur le plateau
  • Des obstacles minés qui une fois déclenchés seront capables de détruire le plateau
  • Vérifier à l'initialisation du plateau de jeu qu'aucun joueur n'est isolé de manière hermétique des autres joueurs et qu'ils ne sont pas placés l'un à coté de l'autre.

Améliorations Esthetiques

  • Des animations lors des déplacements de joueur, des attaques et des changements d'arme
  • Un affichage responsive et materiel design
  • Orienter l'image du joueur en fonction de son dernier déplacement

Améliorations Techniques

  • Déplacer le joueur au clavier avec les flèches directionnelles.
  • Déplacer le joueur en glissant le doigt sur un écran tactile.
  • Factoriser le code et améliorer l'architecture MVC.

Structure des fichiers

Les fichiers de ce code sont regroupés en fonction de leur nature et de leur utilité :

  • index.htm : Fichier HTML contenant la structure de la page présentant le jeu et chargée de l'appel des scripts
  • style/ : Dossier contenant les feuilles de style CSS
    • style.css : Feuille de style principale
    • materialize.css : Feuille de style materialize
  • images/ : Dossier contenant les icônes et images d'illustration
    • xxxxx.png : Icône d'illustration des armes
    • player.png : Icône d'illustration des joueurs
  • librairies/ : Dossier contenant les librairies
    • jquery-3.1.1.js : Librairie jQuery
    • materialize.js : Librairie materialize
  • classes/ : Dossier contenant le code des principales classes créées
    • cell.js : Classe Cell, représentant une case du plateau de jeu
    • board.js : Classe Board, représentant le plateau de jeu et gérant le positionnement et le déplacement des objets
    • weapon.js : Classe Weapon, représentant les armes et leurs caractéristiques
    • player.js : Classe Player, représentant les joueurs, leurs caractéristiques et leurs capacités de mouvement et de combat
    • console.js : Classe Console
    • playerinfo.js : Classe playerinfo
    • page.js : Classe Page
  • display/
    • generatorCSS.js : Classe generator
  • game/ : Dossier contenant le code chargé du contrôle de l'exécution et des règles du jeu
    • game-engine.js : Classe Game, assurant le déroulement principal du jeu, de l'initialisation du plateau à la fin de partie
    • game-controller.js : Fichier de code chargé des interactions avec l'utilisateur, il est le point d'entrée de l'ensemble du jeu et porte les variables globales
    • game-display.js : Fichier de code chargé de l'affichage du jeu dans la fenêtre du navigateur, il fait un usage intensif de jQuery
  • doc/ : Documentation JSDOC3

Mise à jour du projet

  • 19/01/2016 :
    • première presentation de la démo
  • 28/01/2016 :
    • Mise à jour de la documentation du code Javascript avec JSDoc
    • Optimisation du code javascript en POO
    • Integration primitive de Materialize pour le material design

Liens

Liste des cours OpenClassrooms à propos de Javascript

-
Edité par beatwinthewave 28 janvier 2017 à 18:41:09

  • Partager sur Facebook
  • Partager sur Twitter

«Toute forme de connaissance devient finalement connaissance de soi.» Bruce Lee

25 janvier 2017 à 11:06:13

Waouw, je pensais trouver quelques pistes pour m'aider à réaliser le projet [Créez un jeu de plateau tour par tour en JS] mais c'est tout en POO! N'étant qu'une pauvre noob en JS je dois dire que je suis complètement larguée :lol:

Merci en tout cas de partagez ton appli!

  • Partager sur Facebook
  • Partager sur Twitter
28 janvier 2017 à 18:42:54

mon petit projet avance, alors présentation mise à jour ;)

  • Partager sur Facebook
  • Partager sur Twitter

«Toute forme de connaissance devient finalement connaissance de soi.» Bruce Lee