听指令的小方块

来源：互联网发布：淘宝代购包包是真的吗编辑：程序博客网时间：2024/04/30 08:12

最近一直在做百度前端技术学院的任务，其中有一个听指令的小方块的任务，实现起来比较有趣，今年的这部分有（一）和（二）两部分，然而只是指令的不同，于是我就放在一个代码中了。

任务要求：

实现一个类似棋盘的格子空间，每个格子用两个数字可以定位，一个红正方形的DOM在这个空间内，正方形中的蓝色边表示这是他的正面，有一个input输入框
在输入框中允许输入如下指令，按下按钮后，使得正方形做相应动作
- GO：向蓝色边所面向的方向前进一格（一格等同于正方形的边长）
- TUN LEF：向左转（逆时针旋转90度）
- TUN RIG：向右转（顺时针旋转90度）
- TUN BAC：向右转（旋转180度）
移动不能超出格子空间
对于正方形的移动增加相应动画，包括移动和旋转
每个指令的执行时间是1s（可以自己调整）
增加新的指令如下：
- TRA LEF：向屏幕的左侧移动一格，方向不变
- TRA TOP：向屏幕的上面移动一格，方向不变
- TRA RIG：向屏幕的右侧移动一格，方向不变
- TRA BOT：向屏幕的下面移动一格，方向不变
- MOV LEF：方向转向屏幕左侧，并向屏幕的左侧移动一格
- MOV TOP：方向转向屏幕上面，向屏幕的上面移动一格
- MOV RIG：方向转向屏幕右侧，向屏幕的右侧移动一格
- MOV BOT：方向转向屏幕下面，向屏幕的下面移动一格

设计思路：

先利用canvas分别画出棋盘和小方块
设置一个角度变量监视小方块蓝色边框转向的位置，通过改变小方块的style属性从而实现小方块的旋转
设置top、left变量，通过改变小方块的位置实现小方块在棋盘中的移动

代码实现：

<!DOCTYPE html><html><head>  <title>yaoyaoTask4</title>  <meta charset="utf-8">  <style type="text/css">    #block{      position: absolute;      top: 8px;      left: 8px;    }    </style>  </head><body> <canvas id="canvas" width="300" height="300"></canvas> <canvas id="block" width="30" height="30"></canvas> <br> <input type="text" id="order"> <input type="button" id="dod" value="执行"> <script type="text/javascript">   var canvas =document.getElementById("canvas");   var ctx = canvas.getContext("2d");//canvas画棋盘   function backgroundimg (){   ctx.fillStyle="#ccc";   ctx.fillRect = (0,0,canvas.width,canvas.height);      var grid_cols =10;   var grid_rows=10;   var cell_height=canvas.height/grid_rows;   var cell_width=canvas.width/grid_cols;   ctx.lineWidth=1;   ctx.strokeStyle="silver";   ctx.beginPath();   for(var col=0;col<=grid_cols;col++){    var x=col*cell_width;    ctx.moveTo(x,0);    ctx.lineTo(x,canvas.height);   }   for(var row=0;row<=grid_rows;row++){    var y=row*cell_height;    ctx.moveTo(0,y);    ctx.lineTo(canvas.width,y);   }   ctx.stroke(); } //canvas画小方块   function bloc(){   var block=document.getElementById("block");   var blo=block.getContext("2d");   blo.fillStyle="red";   blo.fillRect(0,0,block.width,block.height);   blo.fillStyle="blue";   blo.fillRect(0,0,block.width,block.height/4);}var order=document.getElementById("order");var dod=document.getElementById("dod");var current=0;var to=8; var lef=8; window.addEventListener("load",function(){  backgroundimg();  bloc();  var block=document.getElementById("block");     function moveUp(){       to-=30;           if(to>=8&&to<=278){                        block.style.top=to + "px";           }else{            to+=30;            alert("已到棋盘边界!");         }    }    function moveDown(){      to+=30;           if(to>= 8 && to<=278){            block.style.top=to+"px";           }else{            to-=30;            alert("已到棋盘边界!");                        }    }    function moveLeft(){       lef-=30;            if(lef>=8&&lef<=278){                            block.style.left=lef+"px";            }else{              lef+=30;              alert("已到棋盘边界!");                       }    }    function moveRight(){          lef+=30;            if(lef>=8&&lef<=278){                            block.style.left=lef+"px";            }else{              lef-=30;              alert("已到棋盘边界!");                          }    }        function turn(ang){      current=(current+ang)%360;      block.style.transform='rotate('+ current +'deg)';    }    function rotat(){      block.style.transform='rotate('+ current +'deg)';    }  dod.addEventListener("click",function(){     switch(order.value) {    case "TUN LEF": turn(270); break;    case "TUN RIG":turn(90); break;    case "TUN BAC": turn(180); break;    case "GO":        switch(current%360) {           case 0: moveUp(); break;           case 90: moveRight(); break;           case 180: moveDown(); break;           case 270: moveLeft(); break;};break;   case "TRA LEF":  moveLeft(); break;   case "TRA RIG":  moveRight(); break;   case "TRA TOP":  moveUp(); break;   case "TRA BOT":  moveDown(); break;      case "MOV LEF": current=270; rotat(); moveLeft();          break;   case "MOV RIG": current=90; rotat(); moveRight();          break;   case "MOV TOP": current=0; rotat(); moveUp();          break;   case "MOV BOT": current=180; rotat(); moveDown();          break;   default: alert("指令输入错误!");}    //order.value="";   // order.focus();  },false); },false); </script></body></html>

github: https://github.com/kxinera/baiduIFE/blob/master/yaoyaoTasks/yaoyaoTask5.html

0 0