Développer un MasterMind en Javascript - Partie 2
Maintenant que nous avons notre interface, commençons à créer notre petit moteur Javascript qui contiendra toute l'intelligence du jeu.
Pour faire les choses proprement, j'ai pour habitude de toujours mettre les actions et interactions Javascript dans un objet dédié, ce qui permet d'éviter les incompatibilités avec les autres éléments de la page (même si ici, nous sommes maître de notre page, et nous savons pertinament qu'il n'y aura pas d'autres scripts).
Cela permet aussi de faire un code plus joli, et certainement plus facile à modifier ensuite.
Nous allons mettre cet objet dans un nouveau fichier, à placer à côté de notre page HTML et de sa feuille de styles. Pour innover, nous allons l'appeler "MasterMind.js".
Insérons la base de notre objet
var MasterMind = {};
C'est beau ! :-)
Comme pour la feuille de style, nous devons lier notre "moteur" à la page, afin qu'il puisse fonctionner.
Ré-ouvrons la page HTML, pour ajouter, entre les balises "head", sous le lien vers la feuille de styles, la balise suivante
<script src="MasterMind.js"></script>
et le tour est joué.
A partir d'ici, il sera plus que nécessaire d'activer la console de votre navigateur web. Pour Firefox, cela se trouve dans le menu Outils > Développement Web > Console
Pour Chrome, dans le menu tout à droite > Plus d'outils > Outils de développement, et sélectionner Console dans les nombreux outils disponibles.
Pour Safari, il faut d'abord activer le menu Développement, dans Préférences > Avancées > Afficher le menu Développement dans la barre des menus (Tout en bas). Puis dans le menu Développement > Afficher la console Javascript.
Cette console nous permettra d'avoir un retour sur les erreurs, mais aussi de permettre à notre code de nous envoyer des messages pour s'assurer que tout fonctionne bien.
Nous devons maintenant compléter notre objet avec les variables dont il aura besoin, et nous verrons un peu plus loin l'ajout des premières méthodes. Tout cela ira dans les accolades précédemment ajoutées.
Par habitude, pour un objet unique, j'ajoute toujours le nom.
name: 'MasterMind',
C'est un mastermind, nous allons avoir besoin de couleurs, nous allons définir notre liste des 6 couleurs dont nous aurons besoin.
colors: {1: '#000000', // noir
2: '#FFFFFF', // blanc
3: '#CC3333', // rouge
4: '#ff9600', // orange
5: '#fff000', // jaune
6: '#0005c2', // bleu
},
Puis les réglages qui seront appliqués à la partie.
settings: {lines: 12, // lignes disponibles pour arriver au résultat
columns: 4, // colonnes de couleurs
colors: 6, // couleurs disponibles
},
et enfin, les valeurs courantes de la progression de la partie.
game: {turn: 1, // tour en cours
column: 1, // colonne en cours
selection: new Array(), // sélection de couleur du joueur
soluce: new Array(), // solution de la partie
},
Nous avons désormais tout ce dont nous avons besoin comme variables.
Votre objet Javascript devrait ressembler à
var MasterMind = {name: 'MasterMind', colors: {};1: '#000000', // noir 2: '#FFFFFF', // blanc 3: '#CC3333', // rouge 4: '#ff9600', // orange 5: '#fff000', // jaune 6: '#0005c2', // bleu}, settings: {lines: 12, // lignes disponibles pour arriver au résultat columns: 4, // colonnes de couleurs colors: 6, // couleurs disponibles}, game: {turn: 1, // tour en cours column: 1, // colonne en cours selection: new Array(), // sélection de couleur du joueur soluce: new Array(), // solution de la partie},
Comme nous avons tout mis en variables, vous pourrez faire évoluer la difficulté comme bon vous semble, ou encore changer les couleurs des pions.
N'oubliez pas, cependant, que si vous augmentez le nombre de couleurs disponibles dans le jeu, il faudra ajuster la liste des couleurs en conséquence.
Dans le prochain article, nous attaquerons l'insertion des méthodes qui nous seront utiles. Et je vous invite à réfléchir la dessus. Pour savoir quelles fonctions nous aurons besoin, il suffit de se demander comment fonctionne le jeu, et comment le décomposer étape par étape. Rendez vous à au prochain épisode.
