33任务三十三——棋盘的实现正方体的移动效果
Posted cjlalala
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了33任务三十三——棋盘的实现正方体的移动效果相关的知识，希望对你有一定的参考价值。
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>OpenCV竟然可以这样学！成神之路终将不远（三十三）