任务描述
- 如图，实现一个类似棋盘的格子空间，每个格子用两个数字可以定位，一个红正方形的DOM在这个空间内，正方形中的蓝色边表示这是他的正面，有一个input输入框
- 在输入框中允许输入如下指令，按下按钮后，使得正方形做相应动作
- GO：向蓝色边所面向的方向前进一格（一格等同于正方形的边长）
- TUN LEF：向左转（逆时针旋转90度）
- TUN RIG：向右转（顺时针旋转90度）
- TUN BAC：向右转（旋转180度）
- 移动不能超出格子空间
分析：（结合源码来看）
1、首先我们得画一张棋盘，棋盘可以采用表格的形式，也可以采用其他形式，看个人喜好。
2、首先我们采用draw函数将小方块显示在某个位置。
3、后面其实就是命令的处理，我们分为两部分，一个是旋转函数，一个是移动函数。根据相应的命令，执行相应的代码就好。
注意点：减少全局变量的使用；
尽量减少代码的重复；
采用事件委托的形式，只需要写一个绑定事件就可以了，根据target.id来判断是按了哪一个按钮。
中间遇到的问题：
1、编程过程中，再旋转之后，当再用go的命令，旋转的效果就会失效。
原因：分两次设置css样式，且旋转需要在位置改变之前；
体验网址：http://1.huanssky.applinzi.com/ablum/ife/task33.html。
源代码：
<!doctype html> <html> <head> <title>听指令的小方块 by huansky</title> <meta charset="utf-8"/> <style type="text/css"> h1 { font:400 16px/1 "Microsoft YaHei",KaiTi_GB2312,SimSun; text-align: center; } #main{ position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); } #container{ position: relative; border: 1px solid #ddd; width: 500px; height: 500px; } span{ width: 50px; height: 50px; border: 1px solid #ddd; float: left; -moz-box-sizing: border-box; /*Firefox3.5+*/ -webkit-box-sizing: border-box; /*Safari3.2+*/ -o-box-sizing: border-box; /*Opera9.6*/ -ms-box-sizing: border-box; /*IE8*/ box-sizing: border-box; /*W3C标准(IE9+，Safari5.1+,Chrome10.0+,Opera10.6+都符合box-sizing的w3c标准语法)*/ } #box{ position: absolute; width: 50px; height: 50px; -moz-box-sizing: border-box; /*Firefox3.5+*/ -webkit-box-sizing: border-box; /*Safari3.2+*/ -o-box-sizing: border-box; /*Opera9.6*/ -ms-box-sizing: border-box; /*IE8*/ box-sizing: border-box; /*W3C标准(IE9+，Safari5.1+,Chrome10.0+,Opera10.6+都符合box-sizing的w3c标准语法)*/ } #box .up{ background: blue; height: 10px; width: 100%; position: relative; border: none; } #box .down{ background: red; height: 40px; width: 100%; position: relative; border: none; } p{ color: red; text-align: center; } input{ margin: 6px; } </style> </head> <body> <div id="main"> <h1>听指令的小方块 by huansky</h1> <p id="message"></p> <div id="container"> <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span> <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span> <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span> <span></span><span></span><span></span><span></span> <div id="box"><span class="up"></span><span class="down"></span></div> <span></span><span></span><span></span><span></span><span></span><span></span> <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span> <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span> <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span> <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span> <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span> <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span> </div> <br> <label><input type="text" id="invalue">请输入命令：go, left, right, back; 不区分大小写</label> <div id="btndir"><input type="button" id="excute" value="执行"> <input id="go" type="button" value="GO"> <input id="tunLef" type="button" value="LEFT"> <input id="tunRig" type="button" value="RIGHT"> <input id="tunBac" type="button" value="BACK"> </div> </div> </body> <script type="text/javascript"> //将所有的变量都放在moveBox里面。 var moveBox={ box:getid("box") , //获取小块的id invalue:getid("invalue") , //输入框的id btndir:getid("btndir"), //获取按钮容器的id left:100, //左边距 topl:100, //上边距 direction:1, //(0代表左，1代表up，2代表右，3代表down) current:0, //当前角度 message:getid("message") //获取信息id } //获取id方法 function getid(id){ return document.getElementById(id); } //根据指令进行相应的旋转 function rotate(dir){ switch(dir){ case "left": moveBox.current = (moveBox.current-90)%360; //计算当前需要转的角度 draw(); moveBox.direction--; //改变方向 break; case "right": moveBox.current = (moveBox.current+90)%360; //计算当前需要转的角度 draw(); moveBox.direction++; //改变方向 break; case "back": moveBox.current = (moveBox.current+180)%360; //计算当前需要转的角度 draw(); moveBox.direction++; moveBox.direction++; //改变方向 break; case "go": go(); break; } } function go(){ //修正方向，使其在[0,4）之间 moveBox.direction=moveBox.direction % 4+(moveBox.direction % 4 < 0 ? 4 : 0); if(moveBox.direction==0 && moveBox.left>0){ moveBox.left=moveBox.left-50; draw(); }else if(moveBox.direction==1 && moveBox.topl>0 ){ moveBox.topl=moveBox.topl-50; draw(); }else if(moveBox.direction==2 && moveBox.left<450){ moveBox.left=moveBox.left+50; draw(); }else if(moveBox.direction==3 && moveBox.topl<450){ moveBox.topl=moveBox.topl+50; draw(); } else { //当超出界限的时候，弹出提醒信息 moveBox.message.innerHTML="移动不能超出格子空间"; } } //事件绑定函数 function on(element,eventName,listener){ if (element.addEventListener){ element.addEventListener(eventName,listener,false); } else if (element.attachEvent){ element.attachEvent('on'+eventName,listener); } else element['on'+eventName]=listener; } //进行事件绑定 on(btndir,"click",function(dir){ var e=window.event||event; var target=e.target || e.srcElement; dir=target.id switch(target.id){ case "tunLef": rotate("left"); break; case "tunRig": rotate("right"); break; case "tunBac": rotate("back"); break; case "go": go(); break; case "excute": var dir=moveBox.invalue.value.toLowerCase(); rotate(dir); break; } }); //重绘小块的样式 function draw(){ moveBox.box.style.cssText='transform:rotate('+ (moveBox.current) +'deg);'; moveBox.box.style.left=moveBox.left+"px"; moveBox.box.style.top=moveBox.topl+"px"; moveBox.message.innerHTML=""; } draw(); //显示 </script> </html>