java eclipseのhtmlでこんな感じの15パズルを作ったのですがこれを画像を並び替えるようにしたいです。
html
1<!DOCTYPE html> 2<html> 3<head> 4 <title>15 puzzle</title> 5 <meta charset="UTF-8"> 6 <style> 7 .tile { 8 width: 70px; 9 height: 70px; 10 border: 1px solid blue; 11 border-radius: 10px; 12 text-align: center; 13 font-size: 36px; 14 background-color: white; 15 box-shadow: rgb(128, 128, 128) 5px 5px; 16 } 17 </style> 18 <script> 19 "use strict"; 20 21 22 var tiles = []; 23 24 25 function init() { 26 var table = document.getElementById("table"); 27 28 for (var i = 0 ; i < 4 ; i++) { 29 var tr = document.createElement("tr"); 30 for (var j = 0 ; j < 4 ; j++) { 31 var td = document.createElement("td"); 32 var index = i * 4 + j; 33 td.className = "tile"; 34 td.index = index; 35 td.value = index; 36 td.textContent = index == 0 ? "" : index; 37 td.onclick = click; 38 tr.appendChild(td); 39 tiles.push(td); 40 } 41 table.appendChild(tr); 42 } 43 44 for (var i = 0 ; i < 1000 ; i++) { 45 click({ srcElement: {index: Math.floor(Math.random() * 16)}}) 46 } 47 } 48 49 function click(e) { 50 var i = e.srcElement.index; 51 52 if (i - 4 >= 0 && tiles[i - 4].value == 0) { 53 swap(i, i - 4); 54 } else if (i + 4 < 16 && tiles[i + 4].value == 0) { 55 swap(i, i + 4); 56 } else if (i % 4 != 0 && tiles[i - 1].value == 0) { 57 swap(i, i - 1); 58 } else if (i % 4 != 3 && tiles[i + 1].value == 0) { 59 swap(i, i + 1); 60 } 61 } 62 63 function swap(i, j) { 64 var tmp = tiles[i].value; 65 tiles[i].textContent = tiles[j].textContent; 66 tiles[i].value = tiles[j].value; 67 tiles[j].textContent = tmp; 68 tiles[j].value = tmp; 69 } 70 </script> 71</head> 72<body onload="init()"> 73 <table id="table"></table> 74</body> 75</html>
ここからどういじれば良いでしょうか?