|
 |
Le but de ce script est de... bah faire un Mastermind.
Rappel des règles :
L'ordinateur a choisi une combinaison alléatoire de 4 pions parmi les six couleurs proposées en bas de la
grille.
Le but du jeu ? les retrouver !!
Vous cliquez sur les pions dans l'ordre où vous souhaitez les proposer puis vous validez en cliquant sur le bouton
'Proposer'.
L'ordinateur vous indiquera dans la colonne de droite si vous avez trouvé quelque chose...
Un pion blanc  signifie qu'un des pions proposés est à sa place,
un pion noir  signifie qu'un des pions proposés existe dans la solution mais n'est
pas à sa place,
une croix grise  signifie qu'aucun des pions proposés ne figure dans la solution.
Si vous voulez retirer un ou plusieurs pion(s) dans vos choix (avant d'avoir 'proposée' la ligne), cliquez sur le
bouton 'Effacer', cela effacera toute la ligne en cours.
Pour démarrer une autre partie, cliquez sur le bouton 'Rejouer'.
Pour abandonner et voir la solution, cliquez sur 'SOLUTION' en haut.
Amusez-vous bien !! |
 |
|
|
|
 |
L'ordinateur va faire 4 choix alléatoires parmi les 6 couleurs possible, cela
constituera le 'tirage'.
Une fonction s'occupe ensuite, lorsque le joueur clique sur les pions de couleurs, de remplacer dans la grille de jeu les
images transparentes par les images correspondant à l'image sur laquelle le joueur a cliqué.
Lorsque le joueur clique sur le bouton 'Proposer', une fonction va comparer sa proposition au tirage effectué et
attribuer autant de pions blancs qu'il y a de couleurs bien placées et de pions noirs pour les couleurs mal
placées.
Trois autres fonctions s'occupent de remettre la proposition en cours à zéro, de recharger la page pour
recommencer la partie ou d'afficher la solution en cas d'abandon. |
|
|
|
|
 |
dans la partie <head>
 |
|
 |
|
<script language="JavaScript">
// Explication des variables :
/* choix : les initiales des couleurs disponbibles; tirage : le choix de l'ordinateur; nom_image : raccourci pour appeler les images; ext : fin du nom des images; essai : numéro de la tentative; proposition : les 4 couleurs proposées par le joueur; compare : une copie du tirage pour comparaison avec la proposition; ok : nombre de pions blancs; ok2 : nombre de pions noirs; fini : jeu terminé (gagné ou solution affichée) */
var choix = new Array('','r','v','b','j','o','f');
var tirage = new Array();
var nom_image = "images/mm_";
var ext = ".gif";
var essai = 0;
var proposition = new Array(0);
var compare = new Array();
var ok = 0;
var ok2 = 0;
var fini = false;
// La fonction de tirage des pions par l'ordinateur
function alleatoire() {
// On répète l'opération 4 fois (4 pions)
for ( i = 0; i < 4; i++ ) {
// Sur 6 couleurs possibles
var possibilites = 6;
// Génération d'un nombre alléatoire
var nombre_alleatoire = Math.random();
var index = Math.round( ( possibilites - 1 ) * nombre_alleatoire ) + 1;
// Affectation d'une lettre (pion) au tirage
tirage[i] = choix[index];
}
}
// Affichage des choix du joueur
function propose(lettre) {
// Si la partie est déjà terminée
if (fini) {
alert('Vous avez deja termine cette partie !\nCliquez sur le bouton \'Rejouer\' pour demarrer une nouvelle partie');
}
// Sinon...
else {
// S'il y a déjà 4 couleurs proposéees
if ( proposition.length == 4 ) {
alert('Vous avez deja propose 4 couleurs.\nPour corriger, cliquez sur "Effacer" et recommencez la ligne');
}
// Sinon...
else {
// On stocke la proposition
proposition[proposition.length] = lettre;
// On remplace l'image transparente de la bonne ligne et de la bonne 'case' par la couleur choisie par le joueur
eval("document.prop" + essai + (proposition.length - 1)).src = nom_image + lettre + ext;
}
}
}
// Vérification de la proposition
function verif() {
// Si la proposition ne comporte pas 4 pions
if ( proposition < 4 ) {
// Si la partie est déjà terminée
if (fini) {
alert('Vous avez deja termine cette partie !\nCliquez sur le bouton \'Rejouer\' pour demarrer une nouvelle partie');
}
// Sinon...
else {
alert('Vous n\'avez pas complete votre ligne.');
}
}
// Si la proposition fait 4 pions :
else {
// On créé une copie du tirage de l'ordinateur qu'on pourra modifier
compare[0] = tirage[0];
compare[1] = tirage[1];
compare[2] = tirage[2];
compare[3] = tirage[3];
for ( i = 0; i < 4; i++ ) {
// Si un pion proposé est identique au pion du tirage (à la bonne place)
if ( compare[i] == proposition[i] ) {
// On marque qu'il faudra un pion blanc
ok++;
// On écrase les pions identiques (pour éviter de les recompter comme étant 'mal placés')
compare[i] = "x";
proposition[i] = "y";
}
}
// On teste si un pion propose existe dans la réponse (il ne pourra pas être au bon endroit car on les a retirés au-dessus)
for ( j = 0; j < 4; j++ ) {
for ( k = 0; k < 4; k++ ) {
if ( compare[j] == proposition[k] ) {
// On marque qu'il faudra un pion noir
ok2++;
compare[j] = "x";
proposition[k] = "y";
}
}
}
// S'il faut des pions blancs
if ( ok > 0 ) {
for ( i = 0; i < ok; i++ ) {
// On en place autant que nécessaires à la place des images transparentes
eval("document.rep" + essai + i).src = nom_image + "2" + ext;
}
}
// S'il faut des pions noirs
if ( ok2 > 0 ) {
for ( i = ok; i < (ok + ok2); i++ ) {
eval("document.rep" + essai + i).src = nom_image + "1" + ext;
}
}
// S'il n'y a ni blancs ni noirs à placer, on place une croix (pour marquer que l'ordinateur a vérifié et que rien n'est bon)
if ( (ok + ok2) == 0 ) {
eval("document.rep" + essai + "0").src = nom_image + "0" + ext;
}
// Si c'est le dixième essai (on commence à zéro) et que la proposition n'est pas la bonne
if ( essai == 9 && ok != 4 ) {
// On marque la partie comme terminée
fini = true;
alert('Vous avez perdu !\nVoici la solution :');
// On affiche la solution
document.tirage0.src = nom_image + tirage[0] + ".gif";
document.tirage1.src = nom_image + tirage[1] + ".gif";
document.tirage2.src = nom_image + tirage[2] + ".gif";
document.tirage3.src = nom_image + tirage[3] + ".gif";
}
// Si la proposition correspond au tirage
if ( ok == 4 ) {
fini = true;
alert('Bravo !\nVous avez reussi en ' + (essai + 1) + ' coups !');
document.tirage0.src = nom_image + tirage[0] + ".gif";
document.tirage1.src = nom_image + tirage[1] + ".gif";
document.tirage2.src = nom_image + tirage[2] + ".gif";
document.tirage3.src = nom_image + tirage[3] + ".gif";
}
// On prépare le tour suivant :
// Remise à zéro de la proposition, des pions blancs et noirs, on augmente le numéro du tour et on prévient si on arrive au dernier essai
proposition = new Array(0);
compare = new Array();
ok = 0;
ok2 = 0;
essai++;
if ( essai == 9 && !fini ) {
alert('Attention, c\'est votre derniere chance...');
}
}
}
// Affichage de la solution
function solution() {
// On marque la partie comme terminée
fini = true;
// On affiche les images de la solution
document.tirage0.src = nom_image + tirage[0] + ".gif";
document.tirage1.src = nom_image + tirage[1] + ".gif";
document.tirage2.src = nom_image + tirage[2] + ".gif";
document.tirage3.src = nom_image + tirage[3] + ".gif";
}
// Effacement de la proposition en cours
function effacer() {
// si la partie est déjà terminée
if (fini) {
alert('Vous avez deja termine cette partie !\nCliquez sur le bouton \'Rejouer\' pour demarrer une nouvelle partie');
}
else {
for ( i = 0; i < 4; i++) {
// On efface la proposition en cours
proposition = new Array(0);
// On remplace toute la ligne en cours par des images transparentes
eval("document.prop" + essai + i).src = nom_image + "px" + ext;
}
}
}
// Rechargement de la page pour réinitialiser le jeu
function rejouer() {
history.go(0);
}
</script>
|
|
|
 |
|
 |
dans la partie <body>
|
|
|
|
<!-- Lancement du tirage alléatoire au chargement -->
<body OnLoad="alleatoire()">
<table border="0" cellspacing="1" cellpadding="0">
<tr align="center" bgcolor="#EEEEEE">
<td> </td>
<!-- la ligne d'image qui accueillera la solution -->
<td><img src="images/mm_x.gif" width="25" height="25" name="tirage0"> <img src="images/mm_x.gif" width="25" height="25" name="tirage1"> <img src="images/mm_x.gif" width="25" height="25" name="tirage2"> <img src="images/mm_x.gif" width="25" height="25" name="tirage3"></td>
<!-- Lien pour afficher la solution -->
<td><a href="javascript:solution();">SOLUTION...</a></td>
</tr>
<tr align="center" bgcolor="#EEEEEE">
<td>Essais</td>
<td>Vos propositions</td>
<td>Résultat</td>
</tr>
<!-- Les lignes qui accueilleront les propositions du joueur -->
<!-- Attention : les noms de ces images sont très importants -->
<tr align="center" bgcolor="#EEEEEE">
<td>10</td>
<td><img src="images/mm_px.gif" width="25" height="25" name="prop90"> <img src="images/mm_px.gif" width="25" height="25" name="prop91"> <img src="images/mm_px.gif" width="25" height="25" name="prop92"> <img src="images/mm_px.gif" width="25" height="25" name="prop93"></td>
<td><img src="images/mm_px.gif" width="15" height="15" name="rep90"><img src="images/mm_px.gif" width="15" height="15" name="rep91"><img src="images/mm_px.gif" width="15" height="15" name="rep92"><img src="images/mm_px.gif" width="15" height="15" name="rep93"></td>
</tr>
...
<tr align="center" bgcolor="#EEEEEE">
<td>1</td>
<td><img src="images/mm_px.gif" width="25" height="25" name="prop00"> <img src="images/mm_px.gif" width="25" height="25" name="prop01"> <img src="images/mm_px.gif" width="25" height="25" name="prop02"> <img src="images/mm_px.gif" width="25" height="25" name="prop03"></td>
<td><img src="images/mm_px.gif" width="15" height="15" name="rep00"><img src="images/mm_px.gif" width="15" height="15" name="rep01"><img src="images/mm_px.gif" width="15" height="15" name="rep02"><img src="images/mm_px.gif" width="15" height="15" name="rep03"></td>
</tr>
<!-- Les images où le joueur clique pour faire sa proposition -->
<tr align="center" bgcolor="#EEEEEE">
<td colspan="3">
<!-- Pour chaque couleur, appel de la fonction de proposition avec la couleur en paramètre -->
<a href="javascript:propose('r');"><img src="images/mm_r.gif" border="0"></a>
<img src="images/mm_px.gif" width="5" height="30">
<a href="javascript:propose('v');"><img src="images/mm_v.gif" border="0"></a>
<img src="images/mm_px.gif" width="5" height="1">
<a href="javascript:propose('b');"><img src="images/mm_b.gif" border="0"></a>
<img src="images/mm_px.gif" width="5" height="1">
<a href="javascript:propose('j');"><img src="images/mm_j.gif" border="0"></a>
<img src="images/mm_px.gif" width="5" height="1">
<a href="javascript:propose('o');"><img src="images/mm_o.gif" border="0"></a>
<img src="images/mm_px.gif" width="5" height="1">
<a href="javascript:propose('f');"><img src="images/mm_f.gif" border="0"></a>
<img src="images/mm_px.gif" width="5" height="30"></td>
</tr>
<!-- La ligne des boutons de fonctions : Proposer, effacer, rejouer -->
<tr align="center" bgcolor="#EEEEEE">
<td colspan="3"><input type="button" value="Proposer" OnClick="verif();"> <input type="button" value="Effacer" OnClick="effacer();"> <input type="button" value="Rejouer" OnClick="rejouer();"></td>
</tr>
</table>
|
|
|
|
|
|
|
|
|
|
|
|
|
Mastermind
