The game allows 50 guesses before revealing the answer and restarting. It is case insensitive. The words are selected randomly from a list of all the four letter words contained in a 1000 word core vocabulary from a popular English reader. The script is therefore ready to go, and all you have to do is copy and paste it into your source file. You can, of course, remove and add words from the list to adapt it to the needs of your students. Be aware, though, that only four letter words can be used.

Anyway, here's the script. First, copy and paste the following code anywhere inside the HEAD tags of your HTML document:

<script language="JavaScript">
<!--

// Script by Matt Stanton 2002
// http://members.tripod.com/matt_stanton/
// cyberefl@email.com

// *** ADAPTATION INSTRUCTIONS ***

// *** Enter the words you want the game to choose from below. ***
// *** Put the words in double quotes with no spaces. ***
// *** Separate them with commas. ***
// *** Do not put a comma before the first word. ***
// *** Do not put a comma after the last word. ***
// *** You can have as many words as you want. ***
// *** The words must have four letters. ***

var words = new Array("ache", "also", "army", "aunt", "away", "baby", "back", "bake", "bank", "bath", "bean", "bear", "beat", "bell", "belt", "bill", "bird", "bite", "blow", "blue", "boat", "body", "boil", "bomb", "book", "boot", "born", "both", "bowl", "burn", "bush", "busy", "cage", "cake", "camp", "card", "cart", "chin", "city", "club", "coat", "cold", "comb", "come", "cook", "cool", "copy", "corn", "cost", "damp", "dark", "date", "dead", "deep", "desk", "dish", "dive", "door", "down", "draw", "drop", "duck", "dust", "each", "east", "easy", "else", "ever", "face", "fall", "farm", "fast", "feel", "fill", "film", "find", "fine", "fire", "fish", "flag", "flat", "food", "foot", "fork", "free", "from", "full", "game", "gate", "girl", "give", "glad", "glue", "goal", "goat", "good", "grow", "hair", "half", "hall", "hand", "hang", "hard", "hate", "have", "head", "hear", "hide", "high", "hill", "hold", "hole", "home", "hook", "host", "hour", "hurt", "into", "iron", "joke", "jump", "keep", "kick", "kill", "kind", "kite", "know", "lady", "lake", "lamp", "land", "last", "late", "lazy", "leaf", "left", "lend", "less", "like", "line", "lion", "live", "loaf", "lock", "long", "look", "lose", "loud", "love", "lump", "main", "make", "many", "meal", "mean", "meat", "meet", "melt", "mend", "mile", "milk", "mind", "miss", "moon", "more", "most", "move", "much", "nail", "name", "near", "neck", "need", "nest", "news", "next", "nice", "none", "nose", "once", "only", "open", "oven", "over", "page", "pain", "park", "pass", "past", "path", "pick", "pile", "pink", "play", "poem", "pond", "pool", "poor", "port", "post", "pour", "pray", "pull", "push", "race", "rain", "read", "real", "rest", "rice", "rich", "ride", "ring", "road", "roar", "rock", "roll", "roof", "room", "rope", "rose", "safe", "sail", "salt", "same", "sand", "save", "seat", "sell", "send", "shed", "ship", "shoe", "shop", "show", "shut", "sick", "side", "sing", "size", "slip", "slow", "snow", "soap", "sock", "soft", "some", "song", "soon", "soup", "sour", "star", "stay", "step", "stop", "such", "swim", "tail", "take", "talk", "tall", "tame", "tank", "team", "tear", "tell", "tent", "than", "that", "then", "they", "thin", "this", "tidy", "time", "town", "tree", "trip", "true", "turn", "type", "ugly", "very", "wait", "wake", "walk", "wall", "want", "warm", "wash", "wave", "weak", "wear", "week", "well", "west", "what", "when", "wide", "wife", "wild", "will", "wind", "wing", "wipe", "wire", "with", "wood", "wool", "word", "work", "yard", "year");

var theWord = "";
var attempts = 0;
var hints = 0;
function selectWord(){
var ranNum = Math.floor(Math.random()*words.length);
theWord = words[ranNum];
theWord = theWord.toUpperCase();
}//end selectWord() function
function check(f){
var entered = f.entry.value.toUpperCase();
if(entered.length != 4){
alert("You must enter a four letter word.");
f.entry.value = "";
f.entry.focus();
return;
}//end if construction
attempts++;
f.guesses.value += f.entry.value + " ";
for(i=0;i<4;i++){
if(entered.charAt(i) == theWord.charAt(i)){
f.elements[i].value = theWord.charAt(i);
}//end if construction
}//end loop
var counter = 0;
for(var j=0;j<4;j++){
if(f.elements[j].value == theWord.charAt(j)){
counter++;
}//end if construction
}//end loop
if(counter == 4){
var plurAttempt = " guesses";
var plurHints = " hints";
if(attempts == 1){plurAttempt = " guess";}
if(hints == 1){plurHints = " hint";}
alert("Well done, the word was " + theWord + ".\n\nYou got it after " + attempts + plurAttempt + " and " + hints + plurHints +".\n\nNow try another one!");
attempts = 0;
hints = 0;
selectWord();
f.reset();
}//end if construction
if(attempts < 50){
f.entry.value = "";
f.entry.focus();
}else{
alert("OK, that's enough!\nThe word was " + theWord + ".\n\nBetter luck this time!");
attempts = 0;
hints = 0;
selectWord();
f.reset();
f.entry.focus();
}//end else clause
}//end check() function
function showAnswer(f){
alert("The word was " + theWord + ".\n\nDon't give up so easily this time!");
attempts = 0;
hints = 0;
selectWord();
f.reset();
f.entry.focus();
}//end showAnswer() function
function hint(f){
var spaces = 0;
for(var k=0;k<4;k++){
if(f.elements[k].value == ""){
spaces++;
}//end if construction
}//end loop
if(spaces == 1 || spaces == 0){
alert("You must be joking!");
f.entry.focus();
return;
}//end if construction
for(var m=0;m<4;m++){
if(f.elements[m].value == ""){
f.elements[m].value = theWord.charAt(m);
hints++;
break;
}//end if construction
}//end loop
f.entry.focus();
}//end hint() function
//-->
</script>

That code's pretty obfuscated because it's long and I just want it to be in a big block that's easy to cut-and-paste. If you're learning JavaScript and want to study the program, you might be better off grabbing the original, readable code by viewing source. It is, unfortunately, not too well commented! Anyway, let's get back to our Mastermind game. Now listen very carefully because this is the hard bit: put the following attribute inside the <body> tag of your HTML:

onLoad="selectWord();document.myform.reset();document.myform.entry.focus();"

"onLoad" is just another attribute like "bgcolor", "text" and so on, but one that is parsed by the JavaScript interpreter in your browser when the entire page, images and all, has loaded. You can put this attribute anywhere you like inside the <body> tag, such that your complete <body> tag might look something like this:

<body bgcolor="blue" text="white" onLoad="selectWord(); document.myform.reset(); document.myform.entry.focus();">

As I'm always saying on this site, make sure you don't insert any carriage returns in the middle of the lines of JavaScript code. Natural wrapping in your text editor is no problem, just don't hit the Enter key yourself.

Finally, it's time to give you the HTML code that sets up the game's interface. Stick this anywhere between the BODY tags of your HTML file:

<form name="myform" onKeyDown="if(event.keyCode==13){check(document.myform);}">
<input readOnly="true" onClick="this.form.entry.focus();" size="1" value="">
<input readOnly="true" onClick="this.form.entry.focus();" size="1" value="">
<input readOnly="true" onClick="this.form.entry.focus();" size="1" value="">
<input readOnly="true" onClick="this.form.entry.focus();" size="1" value="">
<br><br>
<input size="5" name="entry" value="">
<input type="button" value="Check" onClick="check(this.form);">
<br><br>
Previous Guesses:<br>
<textarea readOnly="true" onClick="this.form.entry.focus();" name="guesses" rows="10" cols="25"></textarea><br><br>
<input type="button" value="Need a hint?" onClick="hint(this.form);">
<input type="button" value="Give up?" onClick="showAnswer(this.form);">
</form>
<small><small>
Script by Matt Stanton 2002<br>
<a href="http://members.tripod.com/matt_stanton/">
http://members.tripod.com/matt_stanton/</a><br>
<a href="mailto:cyberefl@email.com">
cyberefl@email.com</a>
</small></small>

And that's all there is to it!

Last Edited: 17 August 2002 © 2002 Matt Stanton