Prev << >> On to the next chapter: Mastermind.
How good is your memory?
<html> <head> <style> td { font: 36pt Times, serif; text-align: center; padding: 3px; height: 60px; width: 60px; border: 3px solid black; background: black; text-color: black; cursor: hand; } </style> </head> <body> <center> <h1>Concentration</h1> <table> <script> for (var rows = 5; rows; rows -= 1) { document.write('<tr>'); for (var cols = 6; cols; cols -= 1) { document.write('<td></td>'); } document.write('</tr>'); } </script> </table> <p>Found: <span id="found">0</span> - Missed: <span id="missed">0</span></p> </center> <script src="jquery.js"></script> <script> var symbols = '0123456789abcdefghijkmnopqrstuvwxyz\u262E\u262F' + '\u263A\u2622\u2623\u2600\u2601\u2602\u2744\u2604\u2605' + '\u2606\u2660\u2663\u2665\u2666\u2661\u2662\u2664\u2667' + '\u2654\u2655\u2656\u2657\u2658\u2659\u263F\u2640\u2641' + '\u2642\u2643\u2644\u2645\u2646\u2647\u2648\u2649\u264A' + '\u264B\u264C\u264D\u264E\u264F\u2650\u2651\u2652\u2653' + '\u2708\u270E\u2714\u2230\u22C4'; // This function is the Fisher-Yates shuffle algorithm. function shuffled(array) { result = array.slice(0); for (var j = 0; j < result.length; j++) { var r = Math.floor(Math.random()*(result.length-j)) + j; var t = result[j]; result[j] = result[r]; result[r] = t; } return result; } // Set up the board with randomized pairs of symbols. var pairs = $('td').length / 2; var choices = shuffled(symbols.split('')).slice(0, pairs); var doubled = shuffled(choices.concat(choices)); $('td').html(function(j, t) { return doubled[j]; }); var clicked = []; // Handle clicks by flipping backgrounds and keeping score. $('td').click(function() { if ($(this).css('background') == 'white') return; if (clicked.length >= 2) return; $(this).css('background', 'white'); clicked.push(this); if (clicked.length == 1) return; if ($(clicked[0]).html() == $(clicked[1]).html()) { $('#found').html(Number($('#found').html()) + 1); clicked = []; return; } $('#missed').html(Number($('#missed').html()) + 1); setTimeout(function() { $(clicked[0]).css('background', 'black'); $(clicked[1]).css('background', 'black'); clicked = []; }, 1000); }); // Disable mouse text selection. document.onselectstart = document.onmousedown = function() { return false; } </script> </body> </html>