Prev << >> On to the next chapter: Tic-Tac-Toe.
Here is the classic bulls-and-cows game, popularized as under the name Mastermind in the 1970's (go buy the game here).
<html> <head> <style> table.game { border: 0; } td.guess, td.answer { width: 25px; height: 25px; border: 3px solid black; } </style> </head> <body bgcolor="lightgray"> <center> <h2>Mastermind</h2> <p>Guess on the left. Hints will be shown on the right.</p> <p><table class="game"><tr> <td class="guess"> </td> <td class="guess"> </td> <td class="guess"> </td> <td class="guess"> </td> <td><button class="go">Go</button></td> <td class="answer"> </td> <td class="answer"> </td> <td class="answer"> </td> <td class="answer"> </td> </tr></table></p> </center> <script src="jquery.js"></script> <script> // Set up the game and the random secret. var colornames = [ 'red','orange','yellow','green','blue','violet','' ]; var actual = []; while (actual.length < 4) { actual.push(Math.floor(Math.random() * 6)); } // Handle clicks on 'guess' cells of the last row. $('table.game').delegate('tr:last td.guess', 'click', function() { var color = Number($(this).attr('color')); var newguess = isNaN(color) ? 0 : (color + 1) % 7; $(this).attr('color', newguess); $(this).css('background-color', colornames[newguess]); }); // Handle clicks on the 'go' button in the last row. $('table.game').delegate('tr:last button.go', 'click', function() { var actual2 = actual.slice(0); var row = $(this).closest('tr'); var answers = row.children('td.answer'); var guesses = row.children('td.guess'); var cloned = row.clone(); // Check for exact matches and fill in black squares. guesses.each(function(j, e) { if (actual2[j] == Number($(e).attr('color'))) { answers.first().css('background-color', 'black'); answers = answers.slice(1); actual2[j] = null; } }); var missed = answers.length; // Add a white square for each wrong-spot match. guesses.each(function(j, e) { var color = Number($(e).attr('color')); for (var k = 0; k < actual2.length; k++) { if (actual2[k] == color) { answers.first().css('background-color', 'white'); answers = answers.slice(1); actual2[k] = null; break; } } }); // Check for a win or copy the row for the next round. if (missed == 0) { $(this).attr('disabled', 'disabled'); $(this).closest('table').append( '<tr><td colspan="9"><center><h3>' + 'You win!' + '</h3></center></td></tr>'); } else { $(this).hide(); $(this).closest('table').append(cloned); } }); // This is used to disable normal mouse-text selection. document.onselectstart = document.onmousedown = function() { return false; } </script> </body> </html>