百度前端技术学院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 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理 ...
随机推荐
- ASP.NET实现头像剪切保存
利用swfupload上传头像,利用Jcrop来实现头像在线选择,然后提交个ashx对原头像进行剪切.代码如下: default.aspx: <%@ Page Language="C# ...
- unidbgrid单元格操作
unidbgrid单元格操作 //GRID里回车替换TABfunction cellkeydown(sender, td, cellIndex, record, tr, rowIndex, e, eO ...
- Android-Kotlin-函数表达式&String与Int转换$异常处理
Kotlin的函数表达式: package cn.kotlin.kotlin_base03 /** * 函数第一种写法 */ fun addMethod1(number1: Int, number2: ...
- linux下git远程仓库的搭建
一.服务器环境 ubuntukylin-16.04-server-amd64 二.远程服务器创建一个名字叫git的用户,专门用于管理git仓库. $ adduser git 三.安装git.服务器端和 ...
- 如何获取 docker 容器(container)的 ip 地址
1. 进入容器内部后 cat /etc/hosts 会显示自己以及(– link)软连接的容器IP 2.使用命令 docker inspect --format '{{ .NetworkSetting ...
- Azure DevOps Server：Git权限设置
Azure DevOps Server 权限概述 在Azure DevOps Server (之前名称为TFS)中,权限是一个比较复杂的概念.从权限层级上来说,包括服务器级别.团队项目集合级别.团队项 ...
- FastReport使用方法（C/S版）
前言 这两天群里一直有群友问一些关于FastReport的问题,结合他们的问题,在这里做一个整理,有不明白的可以加 FastReport 交流群 群 号:554714044 工具 VS2017 + ...
- Devexpress中Gridcontrol查找分组
private void button1_Click(object sender, EventArgs e) { DataTable dt = new DataTable(); dt.Columns. ...
- ASP.NET MVC的切片(Section)脚本(script)
在ASP.NET MVC使用切片脚本,实在是很溜. 在使用layout之后,只是视图套用_Layout之后,在视图中任一位置任一时候均可以使用切片脚本. 首先在_Layout.cshtml定一些规则: ...
- C# byte array 跟 string 互转
用 System.Text.Encoding.Default.GetString() 转换时,byte array 中大于 127 的数据转 string 时会出问题. 把这里的 Default 换成 ...