36、IFE任务35——听指令的小方块（三）

0、题目

   任务目的

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

   任务描述

  • 如图，命令输入框由input变为textarea，可以允许输入多条指令，每一行一条
  • textarea左侧有一列可以显示当前行数的列（代码行数列），列数保持和textarea中一致
  • 当textarea发生上下滚动时，代码行数列同步滚动
  • 能够判断指令是否合法，不合法的指令给出提示（如图）
  • 点击执行时，依次逐条执行所有命令
  • 对于GO，TRA以及MOV指令增加可以移动格子数量的参数，例如
    • GO 3：向当前方向前进三格
    • TRA TOP 2：向屏幕上方平移两格
    • MOV RIG 4：方向转向屏幕右侧，向屏幕的右侧移动四格

1、解题过程

index.html

  1 <!DOCTYPE html>
  2 <html>
  3   <head>
  4     <meta charset="UTF-8">
  5     <title>Task 35-听指令的小方块（三）</title>
  6     <style>
  7     table{
  8         display: inline-block;
  9         border-spacing: 0;
 10         border:2px solid black;
 11         margin:10px 30px 0 50px;
 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         display: inline-block;
 22         width:320px;
 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:15px;
 41     }
 42     textarea:focus{
 43         outline: none;
 44     }
 45     #number,#input{
 46         line-height:24px;
 47         padding: 0;
 48         margin:0;
 49     }
 50     #number{
 51         position:absolute;
 52         overflow: hidden;
 53         height: 194px;
 54         width: 20px;
 55         list-style: none;
 56         background-color: rgba(241, 241, 233, 0.71);
 57         color: white;
 58     }
 59     #input{
 60         width: 270px;
 61         height: 192px;
 62         padding-left:24px;
 63         font-size: 20px;
 64         font-weight: bold;
 65         background-color: black;
 66         color:green;
 67     }
 68     .wrong{
 69         background:red;
 70     }
 71     .information{
 72         margin:0;
 73         padding-top:10px;
 74         display: inline-block;
 75         border:1px solid black;
 76     }
 77     </style>
 78   </head>
 79 <body>
 80 <table id="table">
 81 </table>     
 82 <form id="buttons">    
 83     <button id="run">执行</button>
 84     <button id="refresh">Refresh</button>
 85     <div>
 86         <ul id='number'></ul>
 87         <textarea id="input" onkeyup='keyUp();' onscroll="$('number').scrollTop=this.scrollTop;"></textarea>
 88     </div>
 89 </form>
 90 <ul class="information">
 91 点击下面按钮后，正方形会做出相应动作
 92 <li>GO：向蓝色边所面向的方向前进一格</li>
 93 <li>TUN LEF：向左转（逆时针旋转90度）</li>
 94 <li>TUN RIG：向右转（顺时针旋转90度）</li>
 95 <li>TUN BAC：向右转（旋转180度）</li>
 96 <li>TRA LEF：向屏幕的左侧移动一格，方向不变</li>
 97 <li>TRA TOP：向屏幕的上面移动一格，方向不变</li>
 98 <li>TRA RIG：向屏幕的右侧移动一格，方向不变</li>
 99 <li>TRA BOT：向屏幕的下面移动一格，方向不变</li>
100 <li>MOV LEF：方向转向屏幕左侧，并向屏幕的左侧移动一格</li>
101 <li>MOV TOP：方向转向屏幕上面，向屏幕的上面移动一格</li>
102 <li>MOV RIG：方向转向屏幕右侧，向屏幕的右侧移动一格</li>
103 <li>MOV BOT：方向转向屏幕下面，向屏幕的下面移动一格</li>
104 </ul>
105 </body>
106 </html>
View Code

index.js

  1 function $(id){
  2     return document.getElementById(id);
  3 }
  4 var num='',
  5     array=[],
  6     a;
  7 //检验输入内容的行数
  8 function keyUp(){
  9     var str=$('input').value,n;
 10     array=str.split("
");
 11     n=array.length;
 12     showNum(n);
 13 }
 14 //显示代码行数
 15 function showNum(n){
 16     for(var i=1;i<=n;i++){
 17         num+='<li id="li'+i+'">'+i+'</li>';
 18     }
 19     $('number').innerHTML=num;
 20     num='';
 21 }
 22 //点击执行，依次执行命令
 23 $('run').addEventListener("click",function(e){
 24     a=1;
 25     figure=[];
 26     newArr=[];
 27     for(var i=0;i<array.length;i++){
 28         var cont=array[i].replace(/(^s*)|(s*$)/g,"");
 29         //去掉首尾空格
 30         cutOut(cont,i);//分别得到命令和执行的次数
 31         check(newArr[i]);//检验输入代码的合规性
 32         if(a==0){
 33             var id='li'+(i+1);
 34             $(id).className="wrong";
 35             i=array.length-1;
 36         }        
 37     }
 38     carryOut();//依次执行命令
 39     e.preventDefault();
 40     return false;
 41 });
 42 //根据输入的内容得到命令和执行的次数
 43 var figure=[],
 44     newArr=[];
 45 function cutOut(cont,i){
 46     var fig=cont.slice(-1);
 47     if(/^[0-9]*$/.test(fig)) figure[i]=fig;
 48     else figure[i]=1;
 49     if(cont.slice(0,2)=='GO') newArr[i]=cont.slice(0,2);
 50     else newArr[i]=cont.slice(0,7);
 51 }
 52 //检验输入命令的合规性
 53 function check(cont){
 54     if(cont=='GO'||cont=='TUN RIG'||cont=='TUN BAC'||cont=='TUN LEF'||cont=='TRA TOP'||cont=='TRA RIG'||cont=='TRA BOT'||cont=='TRA LEF'||cont=='MOV TOP'||cont=='MOV RIG'||cont=='MOV BOT'||cont=='MOV LEF') a=1;
 55     else a=0;
 56 }
 57 //依次执行指令
 58 function carryOut(){
 59     var j=0,i=0;
 60     var timer=setInterval(function(){
 61         if(i<figure.length){
 62             if(j<figure[i]){
 63                 move(newArr[i]);
 64                 j++;
 65             }
 66             else{
 67                 i++;
 68                 j=0;
 69             }
 70         }
 71         else clearInterval(timer);
 72     },500);
 73 }
 74 var position={
 75     x:6,
 76     y:6,
 77     direc:1,//指示方向 上1， 右2，后3，左4
 78     trans:1 //实际运动方向 上1， 右2，后3，左4
 79 };
 80 //点击不同按钮
 81 function move(order){
 82     switch(order){
 83         case'GO':{
 84             position.trans=position.direc;
 85             go();
 86             direction();
 87             break;
 88         }
 89         case'TUN LEF':{
 90             if(position.direc>1) position.direc-=1;
 91             else position.direc=4;
 92             direction();
 93             break;
 94         }
 95         case'TUN RIG':{
 96             if(position.direc<4) position.direc+=1;
 97             else position.direc=1;
 98             direction();
 99             break;
100         }
101         case'TUN BAC':{
102             var direc=position.direc;
103             if(direc==1||direc==3) position.direc=4-direc;
104             else position.direc=6-direc;
105             direction();
106             break;
107         }
108         case 'TRA TOP':{
109             position.trans=1;
110             go(); 
111             direction();
112             break;
113         }
114         case 'TRA RIG':{
115             position.trans=2;
116             go(); 
117             direction();
118             break;
119         }
120         case 'TRA BOT':{
121             position.trans=3;
122             go();
123             direction(); 
124             break;
125         }
126         case 'TRA LEF':{
127             position.trans=4;
128             go(); 
129             direction();
130             break;
131         }
132         case 'MOV TOP':{
133             position.direc=1; //改变指示方向
134             position.trans=1; 
135             go(); 
136             direction();
137             break;
138         }
139         case 'MOV RIG':{
140             position.direc=2;
141             position.trans=2;
142             go();
143             direction(); 
144             break;
145         }
146         case 'MOV BOT':{
147             position.direc=3;
148             position.trans=3;
149             go(); 
150             direction();
151             break;
152         }
153         case 'MOV LEF':{
154             position.direc=4;
155             position.trans=4;
156             go(); 
157             direction();
158             break;
159         }
160     }
161 }
162 //指示方向不变，以屏幕方向平移
163 function go(){
164     var x=position.x,
165         y=position.y,
166         trans=position.trans;
167     if(x==1&&trans==1||y==10&&trans==2||x==10&&trans==3||y==1&&trans==4) return;
168     else goForward();
169 }
170 //以屏幕方向移动
171 function goForward(){
172     var a=position.x*10+position.y,
173         IDa='td'+a;
174     $(IDa).className='';
175     if(position.trans==1){
176         position.x-=1;
177     } 
178     else if(position.trans==2){
179         position.y+=1;
180     }
181     else if(position.trans==3){ 
182         position.x+=1;
183     }
184     else if(position.trans==4){
185         position.y-=1;
186     }    
187 } 
188 //显示表明方向的蓝色边框
189 function direction(){
190     var c=position.x*10+position.y,
191         idc='td'+c,
192         IDc=$(idc);
193     IDc.className='';
194     if(position.direc==1){
195         IDc.className='selected top';
196     } 
197     if(position.direc==2){
198         IDc.className='selected right';
199     }
200     if(position.direc==3){ 
201         IDc.className='selected back';
202     }
203     if(position.direc==4){
204         IDc.className='selected left';
205     }
206 }
207 //生成棋盘
208 function origin(){
209     var resultTr='';
210     for(var i=1;i<11;i++){
211         var resultTd='';
212         for(var j=1;j<11;j++){
213             var number=10*i+j;
214             resultTd+="<td id='td"+number+"'></td>";
215         }
216         resultTr+='<tr>'+resultTd+'</tr>';
217     }
218     $('table').innerHTML=resultTr;
219     //定义格子6-6的初始样式
220     $("td66").className='selected top';
221 };
222 origin();
View Code

2、遇到的问题

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