1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>IFE JavaScript Task 33</title>
6 <style>
7 table{
8 border-spacing: 0;
9 border:2px solid black;
10 margin:10px auto 30px auto;
11 }
12 td{
13 border:1px solid rgba(128, 128, 128, 0.35);
14 width:40px;
15 height:40px;
16 opacity: 0.9;
17 box-sizing: border-box;
18 }
19 form{
20 width:400px;
21 margin:auto;
22 }
23 .selected{
24 background-color:red;
25 }
26 .top{
27 border-top:10px solid blue;
28 }
29 .right{
30 border-right:10px solid blue;
31 }
32 .back{
33 border-bottom:10px solid blue;
34 }
35 .left{
36 border-left:10px solid blue;
37 }
38 button{
39 margin:10px;
40 width:73px;
41 }
42 </style>
43 </head>
44 <body>
45 <table id="table">
46 </table>
47 <form id="buttons">
48 <button id="go">go</button>
49 <button id="left">left</button>
50 <button id="right">right</button>
51 <button id="back">back</button>
52 </form>
53 <script type="text/javascript">
54 function $(id){
55 return document.getElementById(id);
56 }
57 var position={
58 x:6,
59 y:6,
60 direc:1 //上1， 右2，后3，左4
61 };
62 //点击不同按钮
63 $('buttons').addEventListener("click",function(e){
64 e.preventDefault();
65 switch(e.target.id){
66 case'go':{
67 var x=position.x,
68 y=position.y,
69 direc=position.direc;
70 if(x==1&&direc==1||y==10&&direc==2||x==10&&direc==3||y==1&&direc==4) return;
71 else go();
72 break;
73 }
74 case'left':{
75 if(position.direc>1) position.direc-=1;
76 else position.direc=4;
77 direction();
78 break;
79 }
80 case'right':{
81 if(position.direc<4) position.direc+=1;
82 else position.direc=1;
83 direction();
84 break;
85 }
86 case'back':{
87 var direc=position.direc;
88 if(direc==1||direc==3) position.direc=4-direc;
89 else position.direc=6-direc;
90 direction();
91 break;
92 }
93 }
94 });
95 //点击go
96 function go(){
97 var a=position.x*10+position.y,
98 IDa='td'+a;
99 $(IDa).className='';
100 if(position.direc==1){
101 position.x-=1;
102 var b=position.x*10+position.y,
103 IDb='td'+b;
104 $(IDb).className='selected top';
105 }
106 else if(position.direc==2){
107 position.y+=1;
108 var b=position.x*10+position.y,
109 IDb='td'+b;
110 $(IDb).className='selected right';
111 }
112 else if(position.direc==3){
113 position.x+=1;
114 var b=position.x*10+position.y,
115 IDb='td'+b;
116 $(IDb).className='selected back';
117 }
118 else if(position.direc==4){
119 position.y-=1;
120 var b=position.x*10+position.y,
121 IDb='td'+b;
122 $(IDb).className='selected left';
123 }
124 }
125 //显示表明方向的蓝色边框
126 function direction(c){
127 var c=position.x*10+position.y,
128 idc='td'+c,
129 IDc=$(idc);
130 IDc.className='';
131 if(position.direc==1){
132 IDc.className='selected top';
133 }
134 if(position.direc==2){
135 IDc.className='selected right';
136 }
137 if(position.direc==3){
138 IDc.className='selected back';
139 }
140 if(position.direc==4){
141 IDc.className='selected left';
142 }
143 }
144 //生成棋盘
145 function origin(){
146 var resultTr='';
147 for(var i=1;i<11;i++){
148 var resultTd='';
149 for(var j=1;j<11;j++){
150 var number=10*i+j;
151 resultTd+="<td id='td"+number+"'></td>";
152 }
153 resultTr+='<tr>'+resultTd+'</tr>';
154 }
155 $('table').innerHTML=resultTr;
156 //定义格子6-6的初始样式
157 $("td66").className='selected top';
158 };
159 origin();
160 </script>
161 </body>
162 </html>
