Forum Solarus-Games francophone

Jeux amateurs => Projets avancés et terminés => Discussion démarrée par: Arca le 18 Avril 2017 à 22:18

Titre: [JS] Build Your Way!
Posté par: Arca le 18 Avril 2017 à 22:18
Build Your Way! (http://lpcm2016.univ-lr.fr/kbibolle/jeu/index.html)

Bonsoir à tous, je vous présente un mini-jeu que j'ai dû réaliser dans le cadre de ma licence professionnelle.
Il y a pas mal de bugs, principalement les collisions, mais le jeu est jouable et un minimum amusant. :)
Ce dernier a été programmé en Javascript avec le framework EaselJS.




But du jeu :

Aucune utilité de faire compliqué : il suffit simplement de récupérer toutes les pièces d'un niveau en construisant des blocs - limités en nombre - pour passer au suivant.
Il y a en tout 4 niveaux, avec deux environnements différents.




Commandes :

Z, Q et D : Déplacement du personnage
Espace : Recommencer le niveau
Entrée : Passer au niveau suivant lorsqu'un niveau est terminé
Clic gauche de la souris : Placer un bloc à la position du curseur
Clic droit de la souris : Placer un bloc sous le héros




Editeur de niveaux :

C'est là que viens le point intéressant : j'ai accompagné le jeu d'un éditeur de niveaux, fait en HTML et JS/jQuery.
Graphiquement, il n'est pas au top, mais j'ose dire qu'il est assez intuitif. Vous choisissez le type de bloc à placer dans une liste déroulante, et vous le placez dans le tableau via un clic gauche. Le clic droit est un raccourci pour effacer les blocs (raccourci qui correspond à la "gomme" de la liste déroulante).

L'éditeur possède quelques types de blocs supplémentaires qui ne sont pas présents dans les niveaux intégrés au code source.
Pour finir sur l'éditeur, à chaque modification de votre niveau, un code JSON est mit à jour. Ce dernier peut-être partagé à d'autres pour qu'ils puissent essayer vos niveaux. (il y a cependant des problèmes avec l'ajout de blocs mouvants il me semble...).
Si vous voulez essayer le niveau d'autrui, il vous suffit de remplacer le code présent dans le champ dédié par le code qui vous a été octroyé, puis d'appuyer sur "Actualiser via le JSON".

Vous pouvez d'ailleurs essayer le code suivant, qui présente tous les éléments disponibles dans un seul et même niveau :
{"dataeditor":{"hero":{"x":8,"y":7},"blocks":[[],[],[2],[2,3],[0,1,2,3,4,5],[5,6,7,11,12,13,14,15,16,17,18,19,20],[],[1],[7,8,9],[9],[9,22],[9]],"invisibleBlocks":[[],[16],[16],[16],[16],[8,9,10],[],[],[],[],[],[0,1,2]],"movingBlocks":[[],[],[24],[],[],[],[],[],[],[],[],[]],"grass":[[],[],[],[],[],[],[],[],[],[],[],[]],"doorBlocks":[[],[],[[0,"left"],[1,"right"]],[],[],[],[],[],[],[],[],[]],"levers":[[],[26],[],[],[],[],[],[],[],[],[],[]],"bounces":[[],[],[],[],[15,17],[],[],[],[],[22],[0],[]],"coins":[[16],[],[],[1],[],[],[1],[],[],[],[1],[]],"playerBlocks":3}}




Screenshots :

[spoiler]
(http://lpcm2016.univ-lr.fr/kbibolle/jeu/screen1.png)
(http://lpcm2016.univ-lr.fr/kbibolle/jeu/screen2.png)
(http://lpcm2016.univ-lr.fr/kbibolle/jeu/screen3.png)
(http://lpcm2016.univ-lr.fr/kbibolle/jeu/screen4.png)
[/spoiler]




Notes :

Alors oui, clairement, il y a encore une multitude de bugs, mais je n'ai pas vraiment eu le temps de m'y pencher avant la date limite de dépôt du projet. Sincèrement, je ne pense plus trop corriger cette version du jeu en Javascript, tout simplement car si je veux m'y repencher, je préfère refaire le moteur sous Game Maker - même si j'ai bien apprécié faire ce jeu en JS. :)

Par contre, désolé pour les petits écrans, je vous ai complètement oublié : le canvas du jeu n'est pas du tout responsive... Honte à moi !

Sinon, il y a une pièce de cachée derrière le bouton retour dans le 3e niveau...

Jouer au jeu (http://lpcm2016.univ-lr.fr/kbibolle/jeu/index.html)

Have fun!