Logo Banner
Navigation DeutschEnglish

Sliding Tiles Puzzle
Tic Tac Toe
Lights Out
Cool Stuff
Team - Misel
Team - LX
JS-Games FAQ


Mastermind − LX

Source Code

The first part − as always − are the declarations of the global variables.
<SCRIPT type="text/javascript">
Those are the images for the different colored pegs. The transparent image is for an empty hole.
var rot = new Image; rot.src = "rot.gif"; var gelb = new Image; gelb.src = "gelb.gif"; var gruen = new Image; gruen.src = "gruen.gif"; var orange = new Image; orange.src = "orange.gif"; var braun = new Image; braun.src = "braun.gif"; var blau = new Image; blau.src = "blau.gif"; var weiss = new Image; weiss.src = "weiss.gif"; var schwarz = new Image; schwarz.src = "schwarz.gif"; var select = new Image; select.src = "select.gif"; var leer = new Image; leer.src = "transparent.gif";
The following three arrays are for the combinations. Kombination[] will be the array for the computer's choice. The other two are temporary variables for the computer's combination and the player's guess.
var Kombination = new Array(); var tKombination_comp = new Array(); var tKombination_play = new Array();
The playing field and variables for rows and columns (and 2 temporary variables as well).
var Spielfeld = new Array(); var Reihe,Spalte,tReihe,tSpalte;
the currently selected hole
var aktuellesFeld = 11;
for the randomizer
var Zufall;
two counters
var Zaehler,Zaehler2;
the current guess (you have 7 until you lose the game)
var Runde = 1;
a variable to determine if the computer is allowed to have 2 pegs of the same color in its sequence (1) or not(0)
var doppelt = 1;
yet another temporary variable
var Temp;
Ausgabe is for checking the user's guess for the right pegs. Output is the current field in which the computer puts the next black or white peg.
var Ausgabe,Output;
This part initializes the game field.
for (Zaehler = 0; Zaehler < 7; Zaehler++) { Spielfeld[Zaehler] = new Array("leer","leer","leer","leer"); }
This function is for general switching of graphics. Image welches is changed to image zuWelchem.
function Wechsel(welches,zuWelchem) { window.document.images[welches].src = zuWelchem.src; }
This function initializes the game when it starts the first time or when you want to start a new game.
function newGame() {
The board contains 7 rows with 4 holes per row. Those are cleared at the beginning. Also the 4 holes for the computer's response are cleared.
for (Zaehler = 0; Zaehler < 7; Zaehler++) { for (Zaehler2 = 0; Zaehler2 < 4; Zaehler2++) { Wechsel('R' + Zaehler + 'Z' + Zaehler2, leer); Spielfeld[Zaehler][Zaehler2] = "leer"; } for (Zaehler2 = 6; Zaehler2 < 10; Zaehler2++) { Wechsel('R' + Zaehler + 'Z' + Zaehler2, leer); } }
This instruction hides the part where the computer shows its choice after the game is over.
window.document.getElementById('ergebnis').style.visibility = 'hidden';
Now we define this as the first turn and hide all OK buttons left of the board except for the first one.
Runde = 1; window.document.getElementById('button0').style.visibility = 'visible'; window.document.getElementById('button1').style.visibility = 'hidden'; window.document.getElementById('button2').style.visibility = 'hidden'; window.document.getElementById('button3').style.visibility = 'hidden'; window.document.getElementById('button4').style.visibility = 'hidden'; window.document.getElementById('button5').style.visibility = 'hidden'; window.document.getElementById('button6').style.visibility = 'hidden';
Now the computer should make its choice and the first hole is selected (the very left one of the first row).
Kombi_waehlen(); auswaehlen(11); }
This function chooses a random color and returns it.
function Farben() { Zufall = Math.random(); if (Zufall <= (1/6)) return "rot"; else if (Zufall <= (2/6)) return "orange"; else if (Zufall <= (3/6)) return "gelb"; else if (Zufall <= (4/6)) return "blau"; else if (Zufall <= (5/6)) return "braun"; else return "gruen"; }
The function that lets the computer choose its colors.
function Kombi_waehlen() {
If the computer is allowed to have more than one peg of the same color in its sequence then the function above is just called 4 times in a row.
if (doppelt) { for (Zaehler = 0; Zaehler < 4; Zaehler++) { Kombination[Zaehler] = Farben(); } }
Otherwise it has to be checked that the current color is not already in the sequence. If so it calls the color choosing function again and if not it adds the color to the combination and advances to the next step.
else { Kombination[0] = Farben(); while(1) { Kombination[1] = Farben(); if (Kombination[1] != Kombination[0]) break; } while(1) { Kombination[2] = Farben(); if ((Kombination[2] != Kombination[0]) && (Kombination[2] != Kombination[1])) break; } while(1) { Kombination[3] = Farben(); if ((Kombination[3] != Kombination[0]) && (Kombination[3] != Kombination[1]) && (Kombination[3] != Kombination[2])) break; } } }
The following function selects the hole the player clicked on.
function auswaehlen(Feld) { Reihe = Math.floor(Feld / 10) - 1;
Of course it has to be in the currently active row. Otherwise there is no reaction.
if (Reihe == Runde - 1) {
If the previously selected hole is empty then the red square marking the hole is replaced with a transparent graphic. Otherwise it stays as is.
tReihe = Math.floor(aktuellesFeld / 10) - 1; tSpalte = aktuellesFeld % 10 - 1; if (Spielfeld[tReihe][tSpalte] == "leer") Wechsel('R' + tReihe + 'Z' + tSpalte,leer);
Then the clicked hole becomes the selected one and (no matter what was previously in it) it will be cleared.
Spalte = (Feld % 10) - 1; Wechsel('R' + Reihe + 'Z' + Spalte,select); aktuellesFeld = Feld; Spielfeld[Reihe][Spalte] = "leer"; } }
This function puts a colored peg (the color is submitted via param Farbe) in the currently selected hole.
function einstecken(Farbe) { Reihe = Math.floor(aktuellesFeld / 10) - 1; Spalte = (aktuellesFeld % 10) - 1; Wechsel('R' + Reihe + 'Z' + Spalte,eval(Farbe)); Spielfeld[Reihe][Spalte] = Farbe; }
This is called when the player made his choice and wants the computer to evaluate his guess.
function checken(knopf) {
The computer won't do anything as long as one of the holes is empty.
if ((Spielfeld[knopf][0] != "leer") && (Spielfeld[knopf][1] != "leer") && (Spielfeld[knopf][2] != "leer") && (Spielfeld[knopf][3] != "leer")) {
First it hides the OK button. Then it creates 2 temporary variables, one containing the player's guess and one containing the computer's sequence. Ausgabe contains at the beginning 4×1 for the four pegs. If there is an exact match at a certain position the appropriate digit is increased by 2 and if a peg matches in color but not in position then it is increased by 1.
window.document.getElementById('button' + knopf).style.visibility = 'hidden'; Ausgabe = 1111; for (Zaehler = 0; Zaehler < 4; Zaehler++) { tKombination_comp[Zaehler] = Kombination[Zaehler]; tKombination_play[Zaehler] = Spielfeld[knopf][Zaehler]; }
Output points to the hole where the computer puts its next peg in. Then it compares the two sequences and if it finds an exact match it deletes the according pegs from the temporary sequences and puts a black peg into the hole specified by Output.
Output = 6; for (Zaehler = 0; Zaehler < 4; Zaehler++) { if (tKombination_play[Zaehler] == Kombination[Zaehler]) { Ausgabe += (2 * Math.pow(10,Zaehler)); Wechsel('R' + knopf + 'Z' + Output,schwarz); Output++; tKombination_comp[Zaehler] = "leer"; tKombination_play[Zaehler] = "leer"; } }
Then it checks for pegs of the same color in different places.
for (Zaehler = 0; Zaehler < 4; Zaehler++) { if (tKombination_play[Zaehler] != "leer") { for (Zaehler2 = 0; Zaehler2 < 4; Zaehler2++) { if (tKombination_play[Zaehler] == tKombination_comp[Zaehler2]) { Ausgabe += Math.pow(10,Zaehler); Wechsel('R' + knopf + 'Z' + Output,weiss); Output++; tKombination_play[Zaehler] = "leer"; tKombination_comp[Zaehler2] = "leer"; break; } } } }
If every digit was increased by 2 then we know that the two combinations were identical. If this is the case the game is over and the Ergebnis() function is called.
if (Ausgabe == 3333) Ergebnis();
Otherwise it is checked if the player has another turn. If so the next OK button is made visible, the current turn variable is increased and the first hole of the next row is selected. If not then the game is also over and the Ergebnis() function is called.
else if (knopf < 6) { window.document.getElementById('button' + (knopf + 1)).style.visibility = 'visible'; Runde++; auswaehlen(eval(Runde + '1')); } else Ergebnis(); } }
This function closes the game. The computer's selection is made visible and Runde is increased so that you can't make any more changes to the board.
function Ergebnis() { window.document.getElementById('ergebnis').style.visibility = 'visible'; for (Zaehler = 0; Zaehler < 4; Zaehler++) { Wechsel('E' + Zaehler,eval(Kombination[Zaehler])); } Runde = 10; } </SCRIPT>
Now to the HTML part of the game. I will leave out any formatting here and only present the parts that are needed for the game. We need 7 OK buttons, ...
<TABLE> <TR> <TD> <INPUT id="button6" type="button" value="OK" onClick="checken(6)"> </TD> </TR> <TR> <TD> <INPUT id="button5" type="button" value="OK" onClick="checken(5)"> </TD> </TR> <TR> <TD> <INPUT id="button4" type="button" value="OK" onClick="checken(4)"> </TD> </TR> <TR> <TD> <INPUT id="button3" type="button" value="OK" onClick="checken(3)"> </TD> </TR> <TR> <TD> <INPUT id="button2" type="button" value="OK" onClick="checken(2)"> </TD> </TR> <TR> <TD> <INPUT id="button1" type="button" value="OK" onClick="checken(1)"> </TD> </TR> <TR> <TD> <INPUT id=button"0" type="button" value="OK" onClick="checken(0)" style="visibility:visible"> </TD> </TR> </TABLE>
... 7×4 output holes for the computer's evaluation, ...
<TABLE> <TR> <TD> <IMG src="transparent.gif" name=R6Z8 alt=""> <IMG src="transparent.gif" name=R6Z9 alt=""> <BR> <IMG src="transparent.gif" name=R6Z6 alt=""> <IMG src="transparent.gif" name=R6Z7 alt=""> </TD> </TR> <TR> <TD> <IMG src="transparent.gif" name=R5Z8 alt=""> <IMG src="transparent.gif" name=R5Z9 alt=""> <BR> <IMG src="transparent.gif" name=R5Z6 alt=""> <IMG src="transparent.gif" name=R5Z7 alt=""> </TD> </TR> . . . <TR> <TD> <IMG src="transparent.gif" name=R0Z8 alt=""> <IMG src="transparent.gif" name=R0Z9 alt=""> <BR> <IMG src="transparent.gif" name=R0Z6 alt=""> <IMG src="transparent.gif" name=R0Z7 alt=""> </TD> </TR> </TABLE>
... 7×4 input holes for the player's guess, ...
<TABLE> <TR> <TD> <IMG src="transparent.gif" name=R6Z0 alt="" onclick="auswaehlen(71)"> <IMG src="transparent.gif" name=R6Z1 alt="" onclick="auswaehlen(72)"> <IMG src="transparent.gif" name=R6Z2 alt="" onclick="auswaehlen(73)"> <IMG src="transparent.gif" name=R6Z3 alt="" onclick="auswaehlen(74)"> </TD> </TR> <TR> <TD> <IMG src="transparent.gif" name=R5Z0 alt="" onclick="auswaehlen(61)"> <IMG src="transparent.gif" name=R5Z1 alt="" onclick="auswaehlen(62)"> <IMG src="transparent.gif" name=R5Z2 alt="" onclick="auswaehlen(63)"> <IMG src="transparent.gif" name=R5Z3 alt="" onclick="auswaehlen(64)"> </TD> </TR> . . . <TR> <TD> <IMG src="transparent.gif" name=R0Z0 alt="" onclick="auswaehlen(11)"> <IMG src="transparent.gif" name=R0Z1 alt="" onclick="auswaehlen(12)"> <IMG src="transparent.gif" name=R0Z2 alt="" onclick="auswaehlen(13)"> <IMG src="transparent.gif" name=R0Z3 alt="" onclick="auswaehlen(14)"> </TD> </TR> </TABLE>
... 4 holes for the computer's choice which is shown when the game is over, ...
<TABLE id="ergebnis" style="visibility:hidden"> <TR> <TD> <IMG src="transparent.gif" name=E0 alt=""> <IMG src="transparent.gif" name=E1 alt=""> <IMG src="transparent.gif" name=E2 alt=""> <IMG src="transparent.gif" name=E3 alt=""> </TD> </TR> </TABLE>
... a button to restart the game, ...
<FORM name="out" action=""> <INPUT type="button" onClick="newGame()" value="New Game">
... a choice where you can specify if the computer may have two or more pegs of the same color in its sequence ...
<INPUT type="radio" checked onClick="doppelt = 1; newGame()" name="schalter"> yes/ja<BR> <INPUT type="radio" onClick="doppelt = 0; newGame()" name="schalter"> no/nein</FORM>
... and finally of course 6 pegs to click on to put them into the holes.
<A href="javascript:einstecken('rot')"> <IMG src="rot.gif" alt="" border="0"> </A> <A href="javascript:einstecken('gelb')"> <IMG src="gelb.gif" alt="" border="0"> </A> <A href="javascript:einstecken('gruen')"> <IMG src="gruen.gif" alt="" border="0"> </A> <A href="javascript:einstecken('orange')"> <IMG src="orange.gif" alt="" border="0"> </A> <A href="javascript:einstecken('braun')"> <IMG src="braun.gif" alt="" border="0"> </A> <A href="javascript:einstecken('blau')"> <IMG src="blau.gif" alt="" border="0"> </A>
The last thing you need is a short script that starts the game after the HTML stuff is loaded.
<SCRIPT type="text/javascript"> Kombi_waehlen(); auswaehlen(11); </SCRIPT>