Admin/Dev

Alors, avez vous bien réfléchi aux actions dont nous allons avoir besoin pour notre MasterMind ?

Et c'est assez simple. Nous avons finalement et simplement 3 phases : l'initialisation, le jeu,  et la vérification.

Que doit on faire lors de l'initialisation ? Simplement, nous allons démarrer une nouvelle partie. Plusieurs choses seront à faire dans cette phases. Nous devrons dessiner le plateau de jeu, mettre à zéro les données du jeu, définir la solution à trouver, et enfin entrer dans la seconde phase.

La phase de jeu doit permettre au joueur de jouer. Elle est donc interactive et doit permettre au joueur de proposer sa solution dans les meilleures conditions possibles.

Enfin, la vérification doit valider la proposition du joueur, et aviser de l'action à faire ensuite. Si le joueur a proposé la bonne solution, il faut lui afficher sa victoire.
Sinon, il faut lui permettre de continuer à jouer en déplaçant sa position. Et s'il atteint la dernière ligne, il faudra lui annoncer sa défaite.

Mais commençons par le début, nous allons commencer par coder l'initialisation, et tout simplement nous allons reproduire ce que nous avons énoncé au dessus.

Ainsi, nous allons créé notre première fonction.

initialise: function() {
this.startGame();
},

Puis la fonction startGame que nous avons appelé, qui elle-même contient l'appel à toutes les actions que nous avons énoncé en début d'article.

startGame: function() {
this.drawGameBoard();
this.resetGame();
this.defineSoluce();
},

Bien sur, nous aurions pu directement intégré les sous-fonctions dans la fonction initialise, mais vous verrez plus tard, qu'il y a un intérêt à séparer les deux.

Avant de définir nos sous-fonctions, nous allons faire en sorte que notre objet MasterMind soit initialisé dès que la page HTML est chargée. Ainsi le joueur peut directement commencer à jouer.

Dans le fichier MasterMind.htm, juste après le lien vers le fichier MasterMind.js, ajoutez

<script>
window.onload = function() {
MasterMind.initialise();
}
</script>

Littéralement, cela indique à notre page d'exécuter le contenu de la fonction dès qu'elle est chargée.

Si vous rechargez votre page HTML, vous obtiendrez actuellement une erreur. Elle devrait indiquer que le code s'est arrêté car la fonction drawGameBoard n'existe pas. Et c'est vrai.

Reprenons notre objet Javascript pour continuer à lui ajouter les méthodes, les unes après les autres.

Commençons par la méthode drawGameBoard qui va dessiner le plateau de jeu. Comme précédemment, décomposons nos besoins.

Le plateau se compose d'un certain nombre de lignes, que nous avons défini en variable, ainsi que d'un certain nombre de colonnes, aussi défini en variable.

Nous allons dessiner de haut en bas, or le joueur jouera de bas en haut, il est donc nécessaire d'inverser l'ordre des lignes pour avoir la ligne 1 en bas, et la dernière ligne en haut.

Comme nous avons besoin de jouer, mais aussi de noter la position des pions bien placés et mal placés, il faudra ajouter un second jeu de colonnes que nous ferons plus petites, pour les différencier des colonnes de jeu.

Il ne faudra pas oublier de placer un dernière colonne avec le bouton qui permettra de valider les pions joués.

Enfin, nous placerons en bas du tableau, un sélecteur de couleur qui permettra au joueur de jouer. Ce dernier sera intéractif, il contiendra l'action de jouer un pion. Cela se fait en appelant une méthode, qui , évidemment, n'est pas encore écrite.

Il ne reste plus qu'à écrire la méthode qui reproduit ce que nous venons de dire.

drawGameBoard: function() {
board = document.getElementById('plateau');
board.innerHTML = '';

for (i = this.settings['lines']; i>0; i--) {

line = document.createElement('tr');
line.id = 'turn-'+i;

cell = document.createElement('td');
cell.innerHTML = i;
cell.style.width = '32px';
line.appendChild(cell);

for (j = 1; j <= this.settings['columns']; j++) {
cell = document.createElement('td');
cell.innerHTML = '';
cell.id = 'turn-'+i+'-'+j;
cell.style.width = '32px';
cell.setAttribute('onclick', this.name+'.selectColumn('+i+', '+j+');');
line.appendChild(cell);
}

for (j = 1; j <= this.settings['columns']; j++) {
cell = document.createElement('td');
cell.innerHTML = '';
cell.id = 'result-'+i+'-'+j;
cell.style.width = '16px';
line.appendChild(cell);
}

cell = document.createElement('td');
cell.innerHTML = 'OK';
cell.id = 'valid-'+i;
cell.className = 'valid';
cell.style.width = '16px';
cell.setAttribute('onclick', this.name+'.checkLine('+i+');');
line.appendChild(cell);

board.appendChild(line);
}

colorSelector = document.getElementById('colorSelector');
colorSelector.innerHTML = '';

line = document.createElement('tr');
for (i=1; i <= this.settings['colors']; i++) {
cell = document.createElement('td');
cell.innerHTML = '';
cell.style.width = '32px';
line.appendChild(cell);

pion = document.createElement('div');
pion.className = 'pion';
pion.style.background = this.colors[i];
pion.setAttribute('onclick', this.name+'.selectColor('+i+');');
cell.appendChild(pion);
}
colorSelector.appendChild(line);
},

Maintenant, passons à la méthode qui ré-initialise les données du jeu. Nous devons simplement indiquer que la position du curseur du joueur se trouve sur la première ligne, et la première colonne.

Il faut aussi indiquer visuellement notre sélection.

resetGame: function() {
this.game['turn'] = 1;
this.game['column'] = 1;

document.getElementById('turn-1').className = 'selected';
document.getElementById('turn-1-1').className = 'selected';
},

Enfin, nous allons faire calculer la combinaison de couleur à trouver.

defineSoluce: function() {
this.game['soluce'] = new Array();
for (i = 1; i <= this.settings['columns']; i++) {
color = parseInt(Math.random()*this.settings['colors'])+1;
this.game['soluce'][i] = color;
}
},

Si vous rechargez votre page HTML, vous verrez que le résultat n'est pas encore très joli, ni exploitable.

Nous devons ajouter des styles à notre fichier CSS pour appliquer un design à notre plateau de jeu.

Voici les styles à ajouter :

table {border-collapse:collapse;}
table td {border:solid 1px #888; padding:4px; text-align:center;}
table tr.selected td {background:#bfd1ff;}
table tr.selected td.selected {background:#dce6ff;}
table tr td.valid {display:none;}
table tr.selected td.valid {display:table-cell;}

.pion {display:inline-block; width:20px; height:20px; border-radius:10px; border:solid 1px #888;}

Rechargez votre page HTML, votre plateau de jeu devrait apparaitre.

Notre prochaine étape sera de créer l'interaction avec le joueur, pour lui permettre de jouer et de valider sa proposition. Vous pouvez d'ores et déjà réfléchir à quelles actions nous devrons ajouter et comment les décomposer.