35、IFE任务34——听指令的小方块（二）

0、题目

   任务目的

  • 练习JavaScript在DOM、字符串处理相关知识
  • 练习对于复杂UI，如何进行数据机构建模

   任务描述

  • 对于正方形的移动增加相应动画，包括移动和旋转
  • 每个指令的执行时间是1s（可以自己调整）
  • 增加新的指令如下：
    • TRA LEF：向屏幕的左侧移动一格，方向不变
    • TRA TOP：向屏幕的上面移动一格，方向不变
    • TRA RIG：向屏幕的右侧移动一格，方向不变
    • TRA BOT：向屏幕的下面移动一格，方向不变
    • MOV LEF：方向转向屏幕左侧，并向屏幕的左侧移动一格
    • MOV TOP：方向转向屏幕上面，向屏幕的上面移动一格
    • MOV RIG：方向转向屏幕右侧，向屏幕的右侧移动一格
    • MOV BOT：方向转向屏幕下面，向屏幕的下面移动一格

1、解题过程

index.html

 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.js

  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();
View Code

2、遇到的问题

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/cjlalala/p/6197845.html