J'ai construit un jeu de rôle en JavaScript. Vous pouvez également. Voici comment.

Alors tu veux essayer de faire un jeu, mais tu es un peu intimidé? Ne t'inquiète pas, moi aussi!

J'avais peur d'utiliser des objets, par exemple. C'était ce gros truc effrayant que j'ai rangé plus tard. Mais maintenant je les utilise tout le temps!

Je vais vous expliquer toutes les étapes que j'ai suivies pour créer mon jeu de rôle JavaScript.

Voici mon jeu fonctionnant sur CodePen. (Notez qu'il n'est pas encore optimisé pour les mobiles):

Premièrement ,choisissez le point de votre jeu. Est-ce un casse-tête? Un RPG? Un hack & slash? Très bien, réfléchissez maintenant aux difficultés techniques de sa fabrication. Un jeu de puzzle nécessiterait beaucoup de javascript compliqué. Un hack & slash aurait besoin de beaucoup d'équilibrage minutieux, et ainsi de suite.

Décidez également si vous voulez que ce soit un jeu par navigateur, un jeu mobile ou les deux (un jeu «Web natif»).

Par exemple, mon jeu ne s'adapte pas bien à l'écran du mobile, car le joueur a 24 sorts. Ce n'est pas confortable de cliquer sur ces petits boutons sur un petit écran, je devrais donc repenser le jeu pour mobile.

Deuxièmement , notez tout ce dont vous avez besoin pour programmer pour réellement créer le jeu. Pour moi c'était:

  • un système d'inventaire
  • un générateur d'articles
  • un système de statistiques de joueur
  • un système d'épargne

Troisièmement , commencez à créer votre jeu en résolvant ces problèmes un par un.

Besoin d'aide pour créer le jeu?

Il est beaucoup plus facile de diviser votre jeu en petites tâches. Vous ne créez pas un jeu, vous créez un système d'inventaire. Ensuite, vous créez un système de combat. Etc.

À moins que vous ne soyez déjà doué en dessin - ou que vous souhaitiez passer des mois ou des années à devenir bon - utilisez ces outils pour créer des éléments qui donneront une belle apparence à votre jeu:

  • Game-Icons.net - ces icônes sont amusantes et faciles à colorier
  • Open Game Art - obtenez d'excellents actifs du domaine public
  • Bulk Resize Photos - un excellent outil pour créer vos propres petites icônes
  • CSS Sprite Generator - vous aide à créer des feuilles de sprites CSS pour vos icônes

Problèmes que je les ai rencontrés et comment je les ai résolus

Feuilles de calcul

Avez-vous l'intention d'avoir plus de 20 images dans votre jeu? Si tel est le cas, vous ne voulez pas créer 20 images avec des liens d'images vers chacune. Vous ne pensez peut-être pas que 20 images, c'est autant, mais si vous décidez d'en ajouter 50 de plus? C'est là que les spritesheets sont utiles. Mettez-y des images, copiez le fichier CSS dans votre projet et ajoutez simplement la classe à votre élément qui correspond à l'image souhaitée.

Sauvegarder l'état de votre jeu

Voulez-vous que votre partie soit sauvegardée? Eh bien, vous pouvez choisir entre utiliser LocalStorage du navigateur et stocker des éléments sur un serveur. Les serveurs nécessitent des connaissances en back-end. Si vous n'en avez pas, je suggère d'utiliser LocalStorage. Il enregistre le jeu tant que l'utilisateur ne le supprime pas avec un outil de nettoyage. Voici comment je l'ai fait:

En gros, enregistrez toutes vos données dans un seul objet, puis mettez à jour vos éléments lors du chargement. Utilisez le stringify JSON et analysez-le plus tard.

Modularisez votre code

Identifiez la partie à coder en dur et les parties à modulariser. J'ai commencé par erreur des sorts de codage en dur, qui sont rapidement devenus laids. J'avais besoin de 24 de ces fonctions, ainsi que de 24 fonctions ifCritical.

Maintenant, vous pouvez demander, comment fonctionne le deuxième sort? J'ai une fonction playerAttack () qui utilise l'objet sort pour faire des choses:

  • Il exécute d'abord la fonction de mise à jour des sorts, qui appelle l'objet spells. Ensuite, le sort prend vos statistiques actuelles et les transforme en valeurs telles que «dégâts» et «coût de mana».
  • Il vérifie si les dégâts sont supérieurs à 0. Si oui, il inflige des dégâts au boss et affiche les dégâts, le sort qui l'a fait et le montant. Il le fait également pour la plupart des autres valeurs. Vous pourriez penser qu'un test supérieur à zéro est inutile, mais vous repenserez lorsque le jeu indiquera que vous avez infligé 0 dégât et restauré 0 mana.
  • Ensuite, il exécute une fonction personnalisée, si le sort en a une. Cela pourrait être utilisé pour donner aux sorts des effets spéciaux qui ne sont pas possibles grâce à notre fonction d'attaque principale.

La boucle de jeu

Pour moi, la boucle de jeu vérifie et met à jour des choses: les statistiques du joueur, si le joueur est mort, si le joueur vient juste de passer au niveau supérieur, si un boss est mort, etc.

Vous devrez comprendre celui-ci vous-même. Je pense que c'est une bonne expérience d'apprentissage. Pensez à quoi et quand les vérifications et les mises à jour doivent être exécutées. Par exemple, avec un contrôle de niveau, je l'ai configuré pour qu'il s'exécute toutes les 20 secondes car le nivellement n'est pas si grave.

Mais j'ai aussi un test de mort de boss qui s'exécute toutes les secondes après le début de la bataille. Pourquoi? Les joueurs n'ont donc pas à attendre 20 secondes pour qu'un boss meure.

Certaines autres choses n'ont même pas besoin d'être en boucle. Les fonctions ne peuvent être appelées que lorsqu'elles sont nécessaires. Prenons par exemple ma fonction de mise à jour du sort. Il n'est appelé que lorsqu'un joueur utilise un sort.

Quelques choses que j'ai apprises:

  • Les objets sont bons. De cette façon, lorsque vous devez enregistrer des données, il vous suffit de sauvegarder l'objet - pas les 50 variables individuelles.
  • Définissez toujours les délais et les intervalles en tant que variables, afin qu'ils puissent être effacés plus tard - à moins qu'ils ne soient des effets permanents et que vous êtes sûr de ne jamais avoir besoin de les effacer.
  • Un gros fichier javascript n'est peut-être pas une bonne idée. CodePen n'autorise qu'un seul fichier JavaScript, mais idéalement, vous devez tout séparer en modules.
  • Si vous n'êtes pas préoccupé par les performances, vous pouvez simplement copier et coller l'objet lorsqu'il doit être mis à jour - pas besoin de mettre à jour la moitié des valeurs individuellement. Si l'objet est énorme, vous pouvez même définir d'abord l'objet comme une variable comme: var object; puis construisez-le en utilisant une autre fonction lorsque vous souhaitez qu'il soit mis à jour. Je l'ai fait avec mes sorts. Chaque fois que le joueur lance un sort, la fonction updateSpell () définit à nouveau l'objet sorts, calcule tous les dégâts et statistiques, puis déclenche le sort.

Choses drôles sur lesquelles j'ai compromis:

  • Les coûts de mana des compétences sont par niveau de boss, car s'ils étaient au niveau du joueur, je punirais les joueurs pour leur progression. Cela a également rendu les boss de niveau supérieur beaucoup plus difficiles, ce que j'ai aimé.
  • Les éléments sont créés avec toutes les statistiques, mais ils ne sont pas affichés s'ils sont 0. De cette façon, je n'ai pas besoin de vérifier si les statistiques ne sont pas définies et je peux éviter d'afficher les statistiques si elles sont générées à 0. Double victoire!
  • J'ai beaucoup simplifié les buffs et les debuffs. Fondamentalement, il existe un var buffStat, nerfStat, totalStat et stat. Ainsi, les buffs ou debuffs ne se cumulent jamais.
  • Avec les boss, la compétence de statistiques nerf ne la rend pas vraiment à 0. C'est beaucoup plus sophistiqué que cela. Il nerfs la statistique de 9999999, puis vérifie si elle est inférieure à 0. Si oui, elle la met à 0. Donc, si vous parvenez à atteindre un niveau où vous avez des statistiques qui se chiffrent en milliards, je devrai peut-être ajouter plus des zéros.

Tout cela m'a fait penser que je devrais planifier un peu plus loin, même si je ne fais que construire un projet amusant pour développer mes propres compétences.

De plus, j'ai maintenant une bien meilleure compréhension de la façon dont les bugs surviennent: parfois, vous ne réalisez pas tous les cas extrêmes où les choses peuvent se casser. Et c'est là que les insectes mordent.

Bugs et exploits

Celui-ci m'a étonné et m'a un peu effrayé. Je ne pouvais pas croire que mon œuvre d'art parfaite contenait des bugs!

Ok, j'exagère un peu. Mais j'ai sous-estimé le grand nombre de choses qui pouvaient mal tourner sans même que je m'en rende compte.

Voici quelques bugs et exploits qui ont surgi, du haut de ma tête:

  1. Vous pouvez changer les niveaux de boss tout en combattant un boss et obtenir de meilleurs butins de cette façon
  2. Les barres de HP et de mana déborderaient parfois
  3. Vous pouvez attaquer le boss avant même que la bataille ne commence. Parlez d'un coup de poing!
  4. Le mana pourrait devenir négatif, ce qui vous empêchait de pouvoir effectuer des attaques même de base, ce qui est le principal moyen de restaurer votre mana.
  5. Les soins ont temporairement augmenté votre santé maximale.
  6. Un sort n'était pas réellement cliquable la plupart du temps en raison d'un problème CSS
  7. Attaquer lorsque vous n'êtes pas au combat met vos sorts sur un temps de recharge infini

Tout cela semble horrible, non? Dans un MMORPG, ces choses seraient abusées dès le premier jour et ruineraient tout!

Eh bien, la bonne nouvelle est que la plupart d'entre eux étaient facilement réparables - généralement avec moins d'une ligne de code.

D'autres bugs, cependant, m'ont obligé à retravailler complètement l'ensemble du système. Avec le système de sorts, je suis passé de l'écriture de 3 fonctions entières pour chaque sort à un seul petit objet qui ne prend que quelques secondes d'édition.

Encore une fois, voici mon jeu si vous souhaitez l'essayer (notez qu'il n'est pas optimisé pour les appareils mobiles):

Et voici le code (qui est également open source et modifiable sur CodePen):

RobertSkalko / LOOT-RPG-v1.0

LOOT-RPG-v1.0 - Tuez des boss, obtenez LOOT! github.com

Gardez à l'esprit que je suis un débutant (juste 2 mois dans la programmation) donc certaines de mes solutions peuvent être améliorées. J'espère cependant que je vous ai donné au moins les bases pour vous aider à démarrer!

Amusez-vous à créer votre jeu Javascript!