Admin/Dev

10
Janv.
2019

Développer un MasterMind en Javascript - Partie 2

Publié par sky

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.

 
Sommaire de la série
 
 
Commentaires
Aucun commentaire pour le moment.

 

Poster un commentaire
En postant sur skymac.org, je m'engage à être courtois et à ce que mon message soit pertinent avec le sujet de l'article.
En outre, j'accepte, sans condition, que mon message soit refusé et supprimé si ces règles ne sont pas appliquées.
Ouvrir le panneau de gestion des cookies
Fermer le panneau
Ce site utilise des cookies pour assurer son bon fonctionnement. Il utilise aussi des cookies issues de services tiers permettant de proposer des fonctionnalités avancées. À tout moment, vous pouvez choisir quels services vous souhaitez activer ou refuser, afin de retirer votre consentement quant à l'utilisation des cookies.
 
Personnalisation des services
Vous êtes libre de choisir quels services vous souhaitez activer. En autorisant ces services tiers, vous acceptez le dépôt et la lecture de cookies et l'utilisation de technologies de suivi nécessaires à leur bon fonctionnement. En retirant votre consentement pour certains de ces services, certaines fonctionnalités du site peuvent ne plus fonctionner.
Navigation du site  En savoir plus
Le site écrit un cookie de session permettant son bon fonctionnement et aidant à la navigation. Il ne peut être désactivé.
Utilisation : 1 cookie, enregistre l'identifiant de la session.
Durée de vie : Le cookie est présent pendant toute la session sur le site. Il devient obsolète après 24 minutes d'inactivité.
Obligatoire
Popup Média
Afficher des vidéos depuis Yoube ou Dailymotion.
 
Tout accepter Tout refuser Gérer