<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var a = new Array();
N = 10;
curI = 0;
curJ = 0;
boomIJ = 100;
var curTd;
var curIJ=2;
var body =new Array();
function move1(curI, curJ) {
document.getElementById("td" + (body[body.length-1]+1)).style.background = "";
for(var i=body.length-1;i>=0;i--){
body[i]=body[i-1];
}
// var i = parseInt(curTd.parentElement.rowIndex);
// var j = parseInt(curTd.cellIndex);
// body[0]=i*N+j;
body[0]=curI*N+curJ;
//curTd.style.background = "";
// curTd = document.getElementById(("td" + idNum));
// curTd.style.background = "green";
for(var i=0;i<body.length;i++){
var idNum = body[i]+1;
curTd = document.getElementById(("td" + idNum));
curTd.style.background = "green";
}
//alert(curI+" "+curJ+" "+boomIJ)
if (curI * N + curJ == boomIJ) {
alert("game over!");
return;
}
}
function init() {
for (var i = 0; i < N; i++) {
a[i] = new Array();
for (var j = 0; j < N; j++) {
a[i][j] = 0;
}
}
var table = document.getElementById("table1");
var n = N;
for (var i = 0; i < n; i++) {
var tr = document.createElement("tr");
for (var j = 0; j < n; j++) {
var td = document.createElement("td");
td.setAttribute("id", "td" + (i * n + j + 1));
td.addEventListener("click", function(){
check(this);
});
td.style.background = "";
td.innerHTML = "" + (i * n + j + 1);
tr.appendChild(td);
}
table.appendChild(tr);
}
// var num = Math.floor(Math.random() * 9) + 1;
// var idNum = "td" + num;
// curTd = document.getElementById(idNum);
var idNum = "td" + (curIJ+1);
curTd = document.getElementById(idNum);
curTd.style.background = "green";
curI = parseInt(curIJ / N);
curJ = parseInt(curIJ % N);
body.push(2);
body.push(1);
body.push(0);
for(var i=body.length-1;i>=0;i--){
var tdnum="td"+(body[i]+1);
//alert(document.getElementById(tdnum).innerHTML);
document.getElementById(tdnum).style.background="green";
}
}
function check(td) {
//boomIJ=parseInt(td.parentElement.rowIndex)*N+parseInt(td.cellIndex));
i = parseInt(td.parentElement.rowIndex);
j = parseInt(td.cellIndex);
boomIJ = i * N + j;
td.style.background = "red";
//alert(boomIJ);
}
function turn(event) {
var e = event;//|| window.event || arguments.callee.caller.arguments[0];
//alert(e.keyCode);
if (e && e.keyCode == 38) {
if (curI - 1 >= 0) {
curI = curI - 1;
move1(curI, curJ);
}
//alert('38=上鍵');
}
if (e.keyCode == 39) {
// alert('39=右鍵');
if (curJ + 1 < N) {
curJ = curJ + 1;
move1(curI, curJ);
}
}
if (e.keyCode == 37) {
//alert('37=左鍵');
if (curJ - 1 >= 0) {
curJ = curJ - 1;
move1(curI, curJ);
}
}
if (e && e.keyCode == 40) {
//alert('40=下鍵');
if (curI + 1 < N) {
curI = curI + 1;
move1(curI, curJ);
}
}
}
window.onload = init;
</script>
</head>
<body οnkeydοwn="turn(event)">
<table id="table1" style="width: 50%; height: 300px;" border="1">
<!-- <tr>
<td id="td1" οnclick="check(this)" οnkeydοwn="turn(event)">1</td>
<td id="td2" οnclick="check(this)" οnkeydοwn="turn(event)">2</td>
<td id="td3" οnclick="check(this)" οnkeydοwn="turn(event)">3</td>
</tr>
<tr>
<td id="td4" οnclick="check(this)" οnkeydοwn="turn(event)">4</td>
<td id="td5" οnclick="check(this)" οnkeydοwn="turn(event)">5</td>
<td id="td6" οnclick="check(this)" οnkeydοwn="turn(event)">6</td>
</tr>
<tr>
<td id="td7" οnclick="check(this)" οnkeydοwn="turn(event)">7</td>
<td id="td8" οnclick="check(this)" οnkeydοwn="turn(event)">8</td>
<td id="td9" οnclick="check(this)" οnkeydοwn="turn(event)">9</td>
</tr> -->
</table>
</body>
</html>