百度前端技术学院task35源代码——听指令的小方块3
任务描述
- 如图，命令输入框由input变为textarea，可以允许输入多条指令，每一行一条
- textarea左侧有一列可以显示当前行数的列（代码行数列），列数保持和textarea中一致
- 当textarea发生上下滚动时，代码行数列同步滚动
- 能够判断指令是否合法，不合法的指令给出提示（如图）
- 点击执行时，依次逐条执行所有命令
- 对于GO，TRA以及MOV指令增加可以移动格子数量的参数，例如
- GO 3：向当前方向前进三格
- TRA TOP 2：向屏幕上方平移两格
- MOV RIG 4：方向转向屏幕右侧，向屏幕的右侧移动四格
分析：
1、指令的复杂度加深了，因此我们有必要对指令进行拆分判断；
2、当textarea发生上下滚动时，代码行数列同步滚动。这个可以采用scrollTop以及 在textarea左边放一个div，每次当按钮起来keyup的时候，判断输入的是不是换行符，是的话，就添加一个数字就可以 了。
3、点击执行的时候，依次逐条执行，这就要求我们必须采用延时，不然你就看不到依次运行的。同时改变行数的背景颜色。就可以了。
难点：
1、延时函数怎么写；
2、MOV RIG 4类似指令的实现；有没有必要为此重新写一个函数，怎样在原来的代码基础上改；
注意点：
1、不能采用keyCode==13,因为如果一旦删除的话，数字也就不能跟着变化了。只能根据换行符判断。
体验网址：http://1.huanssky.applinzi.com/ablum/ife/task35.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: 20px;
left: 50px;
width: 450;
border: 1px solid #ddd;
}
.introduction{
position: absolute;
top: 20px;
right: 50px;
font-size: 14px;
}
#container{
position: relative;
border: 1px solid #ddd;
width: 300px;
height: 300px;
}
span{
width: 30px;
height: 30px;
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: 30px;
height: 30px;
-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: 6px;
width: 100%;
position: relative;
border: none;
}
#box .down{
background: red;
height: 24px;
width: 100%;
position: relative;
border: none;
}
p{
color: red;
text-align: center;
margin: 2px;
}
input{
margin: 4px;
}
textarea{
margin-top: 4px;
padding: 0px;
background: black;
color: green;
float: left;
margin: 4px;
line-height: 16px;
font-size: 12px;
padding-top: 2px;
}
.hanghao{
float:left;
height: 113px;
background: #ccc;
width: 20px;
margin: 4px;
padding: 3px;
-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标准语法)*/
overflow: hidden;
}
#hanghao p{
margin: 0px;
padding: 0px;
line-height: 16px;
font-size: 12px;
color: black;
}
.change{
background: red;
border-radius: 7px;
}
</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> <div id="btndir"><input type="button" id="excute" value="执行">
<input id="refresh" type="button" value="refresh">
</div>
<div>
<div class="hanghao" id="hanghao"></div><textarea type="text" id="invalue" rows="7"></textarea>
</div> </div> <div class="introduction">
<ol>
<li>在输入框中允许输入如下指令，按下按钮后，使得正方形做相应动作</li>
<li>移动不能超出格子空间</li>
<li>GO：向蓝色边所面向的方向前进一格（一格等同于正方形的边长</li>
<li>TUN LEF：向左转（逆时针旋转90度）</li>
<li>TUN RIG：向右转（顺时针旋转90度）</li>
<li>TUN BAC：向右转（旋转180度）</li>
<li>TRA LEF：向屏幕的左侧移动一格，方向不变</li>
<li>TRA TOP：向屏幕的上面移动一格，方向不变</li>
<li>TRA RIG：向屏幕的右侧移动一格，方向不变</li>
<li>TRA BOT：向屏幕的下面移动一格，方向不变</li>
<li>MOV LEF：方向转向屏幕左侧，并向屏幕的左侧移动一格</li>
<li>MOV TOP：方向转向屏幕上面，向屏幕的上面移动一格</li>
<li>MOV RIG：方向转向屏幕右侧，向屏幕的右侧移动一格</li>
<li>MOV BOT：方向转向屏幕下面，向屏幕的下面移动一格</li>
<li>GO 3：向当前方向前进三格</li>
<li>TRA TOP 2：向屏幕上方平移两格</li>
<li>MOV RIG 4：方向转向屏幕右侧，向屏幕的右侧移动四格</li> </ol>
</div>
</body>
<script type="text/javascript"> //将所有的变量都放在moveBox里面。
var moveBox={
box:getid("box") , //获取小块的id
invalue:getid("invalue") , //输入框的id
btndir:getid("excute"), //获取按钮容器的id
left:90, //左边距
topl:90, //上边距
direction:1, //(0代表左，1代表up，2代表右，3代表down)
current:0, //当前角度
message:getid("message"), //获取信息id
hNum:getid("hanghao"),
refresh:getid("refresh"),
} //获取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; }
} function go(dir,num){
//修正方向，使其在[0,4）之间
moveBox.direction=moveBox.direction % 4+(moveBox.direction % 4 < 0 ? 4 : 0);
for(var i=0;i<num;i++){
if(moveBox.left>0 && (moveBox.direction==0 && dir=="go" || dir=="traLeft")){
moveBox.left=moveBox.left-30;
draw();
}else if( moveBox.topl>0 && (moveBox.direction==1 && dir=="go" || dir=="traTop")){
moveBox.topl=moveBox.topl-30;
draw();
}else if( moveBox.left<270 && (moveBox.direction==2 && dir=="go" || dir=="traRight")){
moveBox.left=moveBox.left+30;
draw();
}else if(moveBox.topl<270 && (moveBox.direction==3 && dir=="go" || dir=="traDown")){
moveBox.topl=moveBox.topl+30;
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",timeout); function timeout() {
var arr=moveBox.invalue.value.split("\n");
var len=arr.length;
var i = 0; //命令条数
var pNum=moveBox.hNum.getElementsByTagName("p");
pNum[i].className="change";
var timer = setInterval(function(){
if(i<len){
excute(arr[i],i); //执行指定命令条
i++;
pNum[i].className="change";
pNum[i-1].className="";
} else {
clearInterval(timer);
pNum[i-1].className="";
}
}, 500)
} function rotateNum(num){
var num1=Math.abs(num);
if(num>0){
for(var i=0;i<num1;i++){
rotate("right");
}
}else{
for(var i=0;i<num1;i++){
rotate("left");
}
}
} function excute(arr,i){
var arr1=arr.split(" ");
var arrNum="";
var arr2="";
if(arr1.length>2){
arrNum=parseInt("0"+arr1.pop());
}
if(arrNum<1){ arrNum=1;}
arr2=arr1.join(" ").trim();
if (arr1[0]=="GO"){
arrNum=arr1[1];
arr2=arr1[0];
}
//修正方向，使其在[0,4）之间
moveBox.direction=moveBox.direction % 4+(moveBox.direction % 4 < 0 ? 4 : 0);
switch(arr2){
case "TUN LEF":
rotate("left");
break;
case "TUN RIG":
rotate("right");
break;
case "TUN BAC":
rotate("back");
break;
case "GO":
go("go",arrNum);
break;
case "excute":
var dir=moveBox.invalue.value.toLowerCase();
rotate(dir);
break;
case "TRA BOT":
go("traDown",arrNum);
break;
case "TRA RIG":
go("traRight",arrNum);
break;
case "TRA TOP":
go("traTop",arrNum);
break;
case "TRA LEF":
go("traLeft",arrNum);
break;
case "MOV BOT":
rotateNum((3-moveBox.direction));
go("traDown",arrNum);
break;
case "MOV RIG":
rotateNum((2-moveBox.direction));
go("traRight",arrNum);
break;
case "MOV TOP":
rotateNum((1-moveBox.direction));
go("traTop",arrNum);
break;
case "MOV LEF":
rotateNum((0-moveBox.direction));
go("traLeft",arrNum);
break;
default:
alert("输入命令有误,在第"+(i+1)+"行")
}
} //重绘小块的样式
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(); //显示
//不能采用keyCode,因为如果一旦删除的话，数字也就不能跟着变化了
on(invalue,"keyup",function(){
var value = moveBox.invalue.value;
var rows = value.split("\n");
var arr = [];
var top = moveBox.invalue.scrollTop;
for (var i = 0; i < rows.length; i++) {
arr.push("<p >" + (i + 1) + "</p>");
}
moveBox.hNum.innerHTML = arr.join("");
moveBox.hNum.scrollTop = top; //使得两个块之间是等高的
}); on(refresh,"click",function(){
moveBox.hNum.innerHTML="";
moveBox.invalue.value="";
}); </script>
</html>
百度前端技术学院task35源代码——听指令的小方块3的更多相关文章
- 百度前端技术学院task16源代码
欢迎访问我的github:huanshen 做这道题目的时候遇到了很多困难. 1.怎么给空对象添加数据,愣是不知道从哪里下手:遍历对象,一个个输出操作: 2.中英文的正则表达式不知道,赶紧去百度: 3 ...
- 百度前端技术学院task15源代码
这一道题涉及到排序,读取页面内容,输出显示到某一节点当中以及添加事件. 刚开始一直在想怎么获取某一节点的内容,后面采用的是sdata.childNodes,获取所有的节点.再通过schildNode[ ...
- 百度前端技术学院task14源代码
刚开始理解错误,以为是读取对象,结果后面才发现是二维数组. 另外对于数组排序,创建新的节点啊,输入到doM中啊,都不是很熟悉. <!DOCTYPE html> <html> & ...
- 百度前端技术学院task13源代码
突然发现只看书不练习也是不行的,这么简单的我竟然都不会写了. 要注意innerHTML,innerText和outText之间的异同. 同时也要会使用DOM2的添加事件,移除事件等 <!DOCT ...
- 百度前端技术学院-task1.3源代码
因为其中有图片,所以就给有图片的位置加了边框和设置了大小,这样哪怕图片不显示也可以知道在哪里. <!DOCTYPE html> <html> <head> < ...
- 百度前端技术学院task34源码——会指令的小块2
任务描述 增加新的指令如下: TRA LEF:向屏幕的左侧移动一格,方向不变 TRA TOP:向屏幕的上面移动一格,方向不变 TRA RIG:向屏幕的右侧移动一格,方向不变 TRA BOT:向屏幕的下 ...
- 百度前端学院task33源码及总结——听指令的小方块
任务描述 如图,实现一个类似棋盘的格子空间,每个格子用两个数字可以定位,一个红正方形的DOM在这个空间内,正方形中的蓝色边表示这是他的正面,有一个input输入框 在输入框中允许输入如下指令,按下按钮 ...
- 百度前端技术学院（IFE）2016春季学期总结
今天(5月16日)作为第八个提交者提交了任务五十:RIA微型问卷管理平台 这样一个综合性的大任务,宣告我的IFE春季学期课程学习顺利完成.其实任务五十并不复杂,现在再让我来做,可能一周不到就写出来了, ...
- 百度前端技术学院—-小薇学院(HTML+CSS课程任务)
任务一:零基础HTML编码 课程概述 作业提交截止时间:04-24 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理 ...
随机推荐
- js五道经典练习题--第一道
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- AngularJS 事件广播与接收 $broadcast,$emit,$on 作用域间通信 封装factory服务 发布订阅
不同作用域之间通过组合使用$broadcast,$emit,$on的事件广播机制来进行通信. 一.说明 1.广播 $broadcast 说明:将事件从父级作用域传播至本作用域及子级作用域. 格式:$b ...
- cudnn 安装步骤
上官网下载对应的cudnn https://developer.nvidia.com/cudnn 下载完cudnn后,命令行输入文件所在的文件夹 (ubuntu为本机用户名) cd home/ubun ...
- 一致性hash（整理版）
简单解释: 简单解释一致性hash的原理:网上通篇都是用服务器做的举例,我这里也如此,主要是便于理解. 通常:有N个客户端请求服务器,假设有M台web服务器,通常为了均衡访问会进行N%M的取模,然后分 ...
- Windows 7 系统中开启 ASP.NET State Service 服务的方法
控制面板 -> 程序和功能 -> “打开或者关闭 Windows 功能”对话框 -> Internet 信息服务 -> 万维网服务 -> 应用程序开发功能 -> A ...
- 新品成熟EMR源码电子病历系统软件NET网络版CS可用带数据库全文档
查看电子病历系统演示 医院医疗信息管理系统,EMR电子病历系统,功能模块如下所示: 1.住院医生站 2.住院护士站 3.病案浏览工作站 4.质量控制工作站 5.系统维护工作站 本店出售系统全套源码, ...
- C#后台代码获取程序集资源文件
资源会被打包在程序集内部. 选择这种生成方式后,该资源文件会被嵌入到该应用的程序集中,就是说打开生成的应用程序目录是看不到这个文件的. 可以用相对于当前的XAML文件的相对Uri访问,<Imag ...
- .Net中验证码图片生成
开发网站或平台系统,登录页面是必不可少的功能,但是现在很多人可以使用工具暴力破解网站密码,为了防止这类非法操作,需要在登录页面添加验证,验证码就是最常用的一种验证方式. 我结合了自己的经验和网上的验证 ...
- Python 绝技 —— TCP服务器与客户端
i春秋作家:wasrehpic 0×00 前言 「网络」一直以来都是黑客最热衷的竞技场.数据在网络中肆意传播:主机扫描.代码注入.网络嗅探.数据篡改重放.拒绝服务攻击……黑客的功底越深厚,能做的就越多 ...
- CentOS 7 下网络管理
如果最小化安装centos7 后会发现,安装完了进去配置网络发现,ifup ,ipconfig 这些命令不见了,那是因为 7 使用了新的网络管理工具NetworkManager ,具体的命令是nmc ...