| |
| <html> |
| <body OnLoad="init()"> |
| |
| <script language="JavaScript"> |
| |
| // マス状態保持配列 |
| aCell = new Array(17); |
| |
| function init() { |
| |
| // 1,2,3…15となるよう配列に値を設定 |
| for (i = 1;i <= 16;i++) { |
| aCell[i] = i; |
| } |
| |
| // 盤面を表示 |
| drawCell(); |
| |
| } |
| |
| function cellClick(cell) { |
| |
| // クリックされた枡の移動処理 |
| move(cell); |
| |
| // 盤面を再度表示 |
| drawCell(); |
| |
| } |
| |
| function drawCell() { |
| |
| // 各升目の状態を表示 |
| for (i = 1;i <= 16;i++) { |
| if (aCell[i] == 16) { |
| document.getElementById("cell" + String(i)).innerText = ""; |
| } else { |
| document.getElementById("cell" + String(i)).innerText = String(aCell[i]); |
| } |
| } |
| |
| } |
| |
| function move(cell) { |
| |
| // 上方向に移動 |
| if (cell > 4 && aCell[cell - 4] == 16) { |
| |
| aCell[cell - 4] = aCell[cell]; |
| aCell[cell] = 16; |
| |
| } |
| |
| // 下方向に移動 |
| if (cell < 13 && aCell[cell + 4] == 16) { |
| |
| aCell[cell + 4] = aCell[cell]; |
| aCell[cell] = 16; |
| |
| } |
| |
| // 左方向に移動 |
| if (cell % 4 != 1 && aCell[cell - 1] == 16) { |
| |
| aCell[cell - 1] = aCell[cell]; |
| aCell[cell] = 16; |
| |
| } |
| |
| // 右方向に移動 |
| if (cell % 4 != 4 && aCell[cell + 1] == 16) { |
| |
| aCell[cell + 1] = aCell[cell]; |
| aCell[cell] = 16; |
| |
| } |
| |
| } |
| |
| </script> |
| |
| <table border="1"> |
| <tr> |
| <td id="cell1" onClick="cellClick(1)">1</td> |
| <td id="cell2" onClick="cellClick(2)">2</td> |
| <td id="cell3" onClick="cellClick(3)">3</td> |
| <td id="cell4" onClick="cellClick(4)">4</td> |
| </tr> |
| <tr> |
| <td id="cell5" onClick="cellClick(5)">5</td> |
| <td id="cell6" onClick="cellClick(6)">6</td> |
| <td id="cell7" onClick="cellClick(7)">7</td> |
| <td id="cell8" onClick="cellClick(8)">8</td> |
| </tr> |
| <tr> |
| <td id="cell9" onClick="cellClick(9)">9</td> |
| <td id="cell10" onClick="cellClick(10)">10</td> |
| <td id="cell11" onClick="cellClick(11)">11</td> |
| <td id="cell12" onClick="cellClick(12)">12</td> |
| </tr> |
| <tr> |
| <td id="cell13" onClick="cellClick(13)">13</td> |
| <td id="cell14" onClick="cellClick(14)">14</td> |
| <td id="cell15" onClick="cellClick(15)">15</td> |
| <td id="cell16" onClick="cellClick(16)"></td> |
| </tr> |
| </table> |
| |
| </body> |
| </html> |
| |