听指令的小方块
来源:互联网 发布:淘宝代购包包是真的吗 编辑:程序博客网 时间: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
- 听指令的小方块
- 【ife】任务三十三:听指令的小方块(一)
- 【ife】任务三十四:听指令的小方块(二)
- 【ife】任务三十五:听指令的小方块(三)
- 【ife】任务三十六:听指令的小方块(四)
- 听指令的小方块(一)总结
- 百度前端学院任务:听指令的小方块的实现
- 黑皮的小方块
- openGL :转圈的小方块
- 随意拖动的小方块特效
- JabRef中文显示小方块的解决
- C语言 - 移动的小方块
- 听统计计算后的小感悟
- 《小方块》开发日志
- centos里面中文是小方块的解决方法
- 基于java的俄罗斯小方块,code code...
- 基于java的俄罗斯小方块(二),code,code...
- 基于java的俄罗斯小方块(三),code code...
- hive视图和索引的简单介绍
- C# protected修饰词
- 常见排序算法及JAVA实现
- 设计模式系列(7)线程下的懒汉式单例
- uva11090
- 听指令的小方块
- scala spark 机器学习初探
- 处理器和存储器的错位相连
- 题目1144:Freckles
- 【寒江雪】测试之前的一点准备
- AutoConfig工具使用指南
- AutoLayout——Android屏幕自动适配
- java获取JVM的CPU占用率、内存占用率、线程数及服务器的网口吞吐率、磁盘读写速率
- 腾讯十天Vue.js课程之四:编辑便签任务