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