<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style>
.init{
background:#3399ff;
}
.init1{
background:yellow;
}
</style>
<script>
var td = document.getElementsByTagName("td");
window.onload=function(){
for(var i=0;i<td.length;i++){
td[i].onclick=move;
}
}
function move(){
// 0 1 2
// 3 4 5
// 6 7 8
var j=parseInt(this.id);
if(this.id!=0&&this.id!=1&&this.id!=2){
if(td[j-3].innerHTML==""){ //위
td[j-3].innerHTML=td[this.id].innerHTML;
td[this.id].innerHTML="";
td[this.id].style.background="yellow";
td[j-3].style.background="#3399ff";
}
}
if(this.id!=0&&this.id!=3&&this.id!=6){
if(td[j-1].innerHTML==""){ //왼
td[j-1].innerHTML=td[this.id].innerHTML;
td[this.id].innerHTML="";
td[this.id].style.background="yellow";
td[j-1].style.background="#3399ff";
}
}
if(this.id!=2&&this.id!=5&&this.id!=8){
if(td[j+1].innerHTML==""){ //오
td[j+1].innerHTML=td[this.id].innerHTML;
td[this.id].innerHTML="";
td[this.id].style.background="yellow";
td[j+1].style.background="#3399ff";
}
}
if(this.id!=6&&this.id!=7&&this.id!=8){
if(td[j+3].innerHTML==""){ //밑
td[j+3].innerHTML=td[this.id].innerHTML;
td[this.id].innerHTML="";
td[this.id].style.background="yellow";
td[j+3].style.background="#3399ff";
}
}
}
</script>
</head>
<body><center>
<table border height="200" width="200">
<tr>
<td class="init" id="0">0</td>
<td class="init" id="1">1</td>
<td class="init" id="2">2</td>
</tr>
<tr>
<td class="init" id="3">3</td>
<td class="init" id="4">4</td>
<td class="init" id="5">5</td>
</tr>
<tr>
<td class="init" id="6">6</td>
<td class="init" id="7">7</td>
<td class="init1" id="8"></td>
</tr>
</table>
</body>
</html>
'IT > Html' 카테고리의 다른 글
| 사다리 게임 html (0) | 2015.01.23 |
|---|---|
| html 방향키 컨트롤 (0) | 2015.01.14 |
| html을 이용한 주사위 게임. (0) | 2015.01.14 |