首页 > 代码库 > 33、任务三十三——棋盘的实现、正方体的移动效果

33、任务三十三——棋盘的实现、正方体的移动效果

2024-08-17 07:25:14   217人阅读

0、题目

  • 如图，实现一个类似棋盘的格子空间，每个格子用两个数字可以定位，一个红正方形的DOM在这个空间内，正方形中的蓝色边表示这是他的正面，有一个input输入框
  • 在输入框中允许输入如下指令，按下按钮后，使得正方形做相应动作
    • GO：向蓝色边所面向的方向前进一格（一格等同于正方形的边长）
    • TUN LEF：向左转（逆时针旋转90度）
    • TUN RIG：向右转（顺时针旋转90度）
    • TUN BAC：向右转（旋转180度）
  • 移动不能超出格子空间

1、解题过程

技术分享 
  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>
View Code

2、遇到的问题

33、任务三十三——棋盘的实现、正方体的移动效果


联系
我们