3五、IFE任務34——聽指令的小方塊（二）

時間 2019-12-08

標籤 ife 任務指令方塊简体版

原文原文鏈接

0、題目

任務目的

練習JavaScript在DOM、字符串處理相關知識
練習對於複雜UI，如何進行數據機構建模

任務描述

對於正方形的移動增長相應動畫，包括移動和旋轉
每一個指令的執行時間是1s（能夠本身調整）
增長新的指令以下：
- TRA LEF：向屏幕的左側移動一格，方向不變
- TRA TOP：向屏幕的上面移動一格，方向不變
- TRA RIG：向屏幕的右側移動一格，方向不變
- TRA BOT：向屏幕的下面移動一格，方向不變
- MOV LEF：方向轉向屏幕左側，並向屏幕的左側移動一格
- MOV TOP：方向轉向屏幕上面，向屏幕的上面移動一格
- MOV RIG：方向轉向屏幕右側，向屏幕的右側移動一格
- MOV BOT：方向轉向屏幕下面，向屏幕的下面移動一格

一、解題過程

index.htmlhtml

 1 <!DOCTYPE html>
 2 <html>
 3   <head>
 4     <meta charset="UTF-8">
 5     <title>Task 34-聽指令的小方塊（二）</title>
 6     <style>
 7     table{
 8         border-spacing: 0;
 9         border:2px solid black;
10         margin:10px 30px 0 150px;
11         display: inline-block;
12     }
13     td{
14         border:1px solid rgba(128, 128, 128, 0.35);
15         width:40px;
16         height:40px;
17         opacity: 0.9;
18         box-sizing: border-box;
19     }
20     form{
21         width:400px;
22         margin:auto;
23     }
24     .selected{
25         background-color:red;
26     }
27     .top{
28         border-top:10px solid blue;
29     }
30     .right{
31         border-right:10px solid blue;
32     }
33     .back{
34         border-bottom:10px solid blue;
35     }
36     .left{
37         border-left:10px solid blue;
38     }
39     button{
40         margin:10px;
41         width:73px;
42     }
43     .information{
44         display: inline-block;
45         border:1px solid black;
46     }
47     </style>
48   </head>
49 <body>
50 <table id="table">
51 </table>    
52 <ul class="information">
53 點擊下面按鈕後，正方形會作出相應動做
54 <li>GO：向藍色邊所面向的方向前進一格（一格等同於正方形的邊長）</li>
55 <li>TUN LEF：向左轉（逆時針旋轉90度）</li>
56 <li>TUN RIG：向右轉（順時針旋轉90度）</li>
57 <li>TUN BAC：向右轉（旋轉180度）</li>
58 <li>TRA LEF：向屏幕的左側移動一格，方向不變</li>
59 <li>TRA TOP：向屏幕的上面移動一格，方向不變</li>
60 <li>TRA RIG：向屏幕的右側移動一格，方向不變</li>
61 <li>TRA BOT：向屏幕的下面移動一格，方向不變</li>
62 <li>MOV LEF：方向轉向屏幕左側，並向屏幕的左側移動一格</li>
63 <li>MOV TOP：方向轉向屏幕上面，向屏幕的上面移動一格</li>
64 <li>MOV RIG：方向轉向屏幕右側，向屏幕的右側移動一格</li>
65 <li>MOV BOT：方向轉向屏幕下面，向屏幕的下面移動一格</li>
66 </ul>
67 <form id="buttons">    
68     <button id="go">GO</button>
69     <button id="left">TUN LEF</button>
70     <button id="right">TUN RIG</button>
71     <button id="back">TUN BAC</button>
72     <button id="traLef">TRA LEF</button>
73     <button id="traRig">TRA RIG</button>
74     <button id="traTop">TRA TOP</button>
75     <button id="traBot">TRA BOT</button>
76     <button id="moveLef">MOV LEF</button>
77     <button id="moveRig">MOV RIG</button>
78     <button id="moveTop">MOV TOP</button>
79     <button id="moveBot">MOV BOT</button>
80 </form>
81 </body>
82 </html>

View Code

index.jside

  1 function $(id){
  2     return document.getElementById(id);
  3 }
  4 var position={
  5     x:6,
  6     y:6,
  7     direc:1, //指示方向 上1， 右2，後3，左4
  8     trans:1 //實際運動方向 上1， 右2，後3，左4
  9 };
 10 //點擊不一樣按鈕
 11 $('buttons').addEventListener("click",function(e){
 12     e.preventDefault();
 13     switch(e.target.id){
 14         case'go':{
 15             position.trans=position.direc;
 16             setTimeout('go()',300);
 17             setTimeout('direction()',300);
 18             break;
 19         }
 20         case'left':{
 21             if(position.direc>1) position.direc-=1;
 22             else position.direc=4;
 23             setTimeout('direction()',300);
 24             break;
 25         }
 26         case'right':{
 27             if(position.direc<4) position.direc+=1;
 28             else position.direc=1;
 29             setTimeout('direction()',300);
 30             break;
 31         }
 32         case'back':{
 33             var direc=position.direc;
 34             if(direc==1||direc==3) position.direc=4-direc;
 35             else position.direc=6-direc;
 36             setTimeout('direction()',300);
 37             break;
 38         }
 39         case 'traTop':{
 40             position.trans=1;
 41             setTimeout('go()',300); 
 42             setTimeout('direction()',300);
 43             break;
 44         }
 45         case 'traRig':{
 46             position.trans=2;
 47             setTimeout('go()',300); 
 48             setTimeout('direction()',300);
 49             break;
 50         }
 51         case 'traBot':{
 52             position.trans=3;
 53             setTimeout('go()',300);
 54             setTimeout('direction()',300); 
 55             break;
 56         }
 57         case 'traLef':{
 58             position.trans=4;
 59             setTimeout('go()',300); 
 60             setTimeout('direction()',300);
 61             break;
 62         }
 63         case 'moveTop':{
 64             position.direc=1; //改變指示方向
 65             position.trans=1; 
 66             setTimeout('go()',300); 
 67             setTimeout('direction()',300);
 68             break;
 69         }
 70         case 'moveRig':{
 71             position.direc=2;
 72             position.trans=2;
 73             setTimeout('go()',300);
 74             setTimeout('direction()',300); 
 75             break;
 76         }
 77         case 'moveBot':{
 78             position.direc=3;
 79             position.trans=3;
 80             setTimeout('go()',300); 
 81             setTimeout('direction()',300);
 82             break;
 83         }
 84         case 'moveLef':{
 85             position.direc=4;
 86             position.trans=4;
 87             setTimeout('go()',300); 
 88             setTimeout('direction()',300);
 89             break;
 90         }
 91     }
 92 });
 93 
 94 //指示方向不變，以屏幕方向平移
 95 function go(){
 96     var x=position.x,
 97         y=position.y,
 98         trans=position.trans;
 99     if(x==1&&trans==1||y==10&&trans==2||x==10&&trans==3||y==1&&trans==4) return;
100     else goForward();
101 }
102 //以屏幕方向移動
103 function goForward(){
104     var a=position.x*10+position.y,
105         IDa='td'+a;
106     $(IDa).className='';
107     if(position.trans==1){
108         position.x-=1;
109     } 
110     else if(position.trans==2){
111         position.y+=1;
112     }
113     else if(position.trans==3){ 
114         position.x+=1;
115     }
116     else if(position.trans==4){
117         position.y-=1;
118     }    
119 } 
120 //顯示代表方向的藍色邊框
121 function direction(){
122     var c=position.x*10+position.y,
123         idc='td'+c,
124         IDc=$(idc);
125     IDc.className='';
126     if(position.direc==1){
127         IDc.className='selected top';
128     } 
129     if(position.direc==2){
130         IDc.className='selected right';
131     }
132     if(position.direc==3){ 
133         IDc.className='selected back';
134     }
135     if(position.direc==4){
136         IDc.className='selected left';
137     }
138 }
139 //生成棋盤
140 function origin(){
141     var resultTr='';
142     for(var i=1;i<11;i++){
143         var resultTd='';
144         for(var j=1;j<11;j++){
145             var number=10*i+j;
146             resultTd+="<td id='td"+number+"'></td>";
147         }
148         resultTr+='<tr>'+resultTd+'</tr>';
149     }
150     $('table').innerHTML=resultTr;
151     //定義格子6-6的初始樣式
152     $("td66").className='selected top';
153 };
154 origin();