Prev << >> On to the next chapter: Concentration.
Here is the classic tile-sliding puzzle:
<html> <style> table { border: 10px solid navy; border-collapse: collapse; } td { font: 14 pt Arial Black; border: 3px solid skyblue; width: 48px; height: 48px; padding: 0; text-align: center; vertical-align: middle; cursor: hand; } </style> <body> <center> <h1>Fifteen Puzzle</h1> <table> <tr> <td>9</td> <td>2</td> <td>12</td> <td>6</td> </tr> <tr> <td>5</td> <td>7</td> <td>14</td> <td>13</td> </tr> <tr> <td>3</td> <td>4</td> <td>1</td> <td>11</td> </tr> <tr> <td>15</td> <td>10</td> <td>8</td> <td>_</td> </tr> </table> </center> <script src="jquery.js"></script> <script> // Whenever a <td> element is clicked, call this function. $('td').click(function() { // Where in the table did the user click? var col = $(this).prevAll().length; var row = $(this).parent().prevAll().length; // Where in the table is the empty cell? var empty = $('td:contains("_")'); var emptycol = empty.prevAll().length; var emptyrow = empty.parent().prevAll().length; // If it's right next to the click, swap them. if (Math.abs(emptycol-col) + Math.abs(emptyrow-row) == 1) { empty.html($(this).html()); $(this).html('_'); } }); </script> </body> </html>