<html>
   <head>
      <meta charset="utf-8" />
      <title>Florias Schiebespiel</title>
      <script>
         var Loch=16;
         
         function move(tile) {
            document.getElementById(Loch).style.backgroundColor=tile.style.backgroundColor;
            document.getElementById(Loch).innerHTML=tile.innerHTML;
            tile.style.backgroundColor="white";
            tile.innerHTML="";
            Loch=tile.id;
            }
         </script>
      </head>
   <body>
      <table border=1 align="center" style="font-size: xx-large;">
         <tr height="100px">
            <td id="1" align="center" style="background-color:blue" width="100px" onclick="javascript:move(this);">1</td>
            <td id="2" align="center" style="background-color:blue" width="100px" onclick="javascript:move(this);">2</td>
            <td id="3" align="center" style="background-color:blue" width="100px" onclick="javascript:move(this);">3</td>
            <td id="4" align="center" style="background-color:blue" width="100px" onclick="javascript:move(this);">4</td>
            </tr>
         <tr height="100px">
            <td id="5" align="center" style="background-color:purple" width="100px" onclick="javascript:move(this);">5</td>
            <td id="6" align="center" style="background-color:purple" width="100px" onclick="javascript:move(this);">6</td>
            <td id="7" align="center" style="background-color:purple" width="100px" onclick="javascript:move(this);">7</td>
            <td id="8" align="center" style="background-color:purple" width="100px" onclick="javascript:move(this);">8</td>
            </tr>
         <tr height="100px">
            <td id="9" align="center" style="background-color:red" width="100px" onclick="javascript:move(this);">9</td>
            <td id="10" align="center" style="background-color:red" width="100px" onclick="javascript:move(this);">10</td>
            <td id="11" align="center" style="background-color:red" width="100px" onclick="javascript:move(this);">11</td>
            <td id="12" align="center" style="background-color:red" width="100px" onclick="javascript:move(this);">12</td>
            </tr>
         <tr height="100px">
            <td id="13" align="center" style="background-color:green" width="100px" onclick="javascript:move(this);" >13</td>
            <td id="14" align="center" style="background-color:green" width="100px" onclick="javascript:move(this);">14</td>
            <td id="15" align="center" style="background-color:green" width="100px" onclick="javascript:move(this);">15</td>
            <td id="16" align="center" style="background-color:white" width="100px" onclick="javascript:move(this);"></td>
            </tr>
         </table>
      </body>
   </html>