February 15, 2011

久しぶりに何かを作ろうと思い立って

適当な題材がないかな、と思ってはじめたのが15puzzle。とりあえずHTML+Javascriptで作ろうと考えている。

はじめの1歩ということで、ここまで実装してみた。

  1. tableで15puzzleのボードを表示する。
  2. マウスでパネルをクリックすると、クリックしたパネルの位置を下に表示する。

コードを書く習慣が久しくなかったのでやっぱり時間がかかった。とりあえずこんな感じ。

HTML

<!DOCTYPE html>
<html>
<head>
  <title>15 puzzle(table version)</title>
  <link rel="stylesheet" type="text/css" href="15puzzle.css" />
  <script type="text/javascript" src="15puzzle.js"></script>
</head>
<body>
<table id="board">
  <tr>
     <td class="cell" id="cell_0">1</td>
     <td class="cell" id="cell_1">2</td>
     <td class="cell" id="cell_2">3</td>
     <td class="cell" id="cell_3">4</td>
  </tr>
  <tr>
     <td class="cell" id="cell_4">5</td>
     <td class="cell" id="cell_5">6</td>
     <td class="cell" id="cell_6">7</td>
     <td class="cell" id="cell_7">8</td>
  </tr>
  <tr>
     <td class="cell" id="cell_8">9</td>
     <td class="cell" id="cell_9">10</td>
     <td class="cell" id="cell_10">11</td>
     <td class="cell" id="cell_11">12</td>
  </tr>
  <tr>
     <td class="cell" id="cell_12">13</td>
     <td class="cell" id="cell_13">14</td>
     <td class="cell" id="cell_14">15</td>
     <td class="cell" id="cell_15"></td>
  </tr>
</table>

<p id="click"></p>

</body>
</html>

CSS

#board {
    border: solid 3px black;
}

td.cell {
    border: solid 3px black;
    text-align: center;
    width: 2em;
    height: 2em;
}

Javascript

window.onload = function() {
    var board = document.getElementById("board");
    var cells = board.getElementsByTagName("td");
    var click = document.getElementById("click");

    for (i = 0; i < cells.length; i++) {
	cells[i].onclick = function() {
	    var self = this;
	    click.innerText = self.id;
	};
    }
};