百度前端学院task33源码及总结——听指令的小方块
任务描述
- 如图，实现一个类似棋盘的格子空间，每个格子用两个数字可以定位，一个红正方形的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>
百度前端学院task33源码及总结——听指令的小方块的更多相关文章
- 百度前端技术学院task35源代码——听指令的小方块3
任务描述 如图,命令输入框由input变为textarea,可以允许输入多条指令,每一行一条 textarea左侧有一列可以显示当前行数的列(代码行数列),列数保持和textarea中一致 当text ...
- 百度网盘采集源码 ，直接采集网盘添加cookies功能
名称:百度网盘采集源码 程序语言:php 数据库:mysql 程序介绍: 1.直接采集百度网盘url 2.前端基于bootstrap 3.搜索考虑到后期上亿数据,是基于coreseek,搜索时间毫秒级 ...
- 鸿蒙内核源码分析(静态链接篇) | 完整小项目看透静态链接过程 | 百篇博客分析OpenHarmony源码 | v54.01
百篇博客系列篇.本篇为: v54.xx 鸿蒙内核源码分析(静态链接篇) | 完整小项目看透静态链接过程 | 51.c.h.o 下图是一个可执行文件编译,链接的过程. 本篇将通过一个完整的小工程来阐述E ...
- Mustache.js前端模板引擎源码解读
mustache是一个很轻的前端模板引擎,因为之前接手的项目用了这个模板引擎,自己就也继续用了一会觉得还不错,最近项目相对没那么忙,于是就抽了点时间看了一下这个的源码.源码很少,也就只有六百多行,所以 ...
- 10款基于jquery的web前端特效及源码下载
1.jQuery时间轴插件:jQuery Timelinr 这是一款可用于展示历史和计划的时间轴插件,尤其比较适合一些网站展示发展历程.大事件等场景.该插件基于jQuery,可以滑动切换.水平和垂直滚 ...
- 教程视频、项目源码、全部干货【微信小程序、React Native、Java、iOS、数据结构】
把我收藏多年的教学视频.项目源码分享给大家,大神就可以忽略了,很多东西都是基础性的,都是期初学习阶段收集的东西. 微信小程序(入门级,有web前端基础的人群): 链接: https://pan.bai ...
- Vue.js 源码分析(十八) 指令篇 v-for 指令详解
我们可以用 v-for 指令基于一个数组or对象来渲染一个列表,有五种使用方法,如下: <!DOCTYPE html> <html lang="en"> & ...
- 【源码】谷歌代理~WPF简单小软件-2015-10-15首发 （2016-03-01已更新源）
蛋疼,昨天把代理去了后才发现,原来咱们连谷歌应用都访问不了,,,用别人的总觉得不怎么安全,然后今天早上就编了个小软件干掉他这限制==> GoogleProxy.exe [主要目的:为了能在线安 ...
- 复用微信小程序源码包后仍然有原小程序的版本管理怎么处理
前言: 复用微信小程序源码包后,重新创建项目导入源码包,会发现开发者工具版本管理中仍然有原来小程序的版本,这样就不太好了.毕竟是一个新的小程序,需要有新的版本控制的.那么这个问题怎么处理呢? 解决方案 ...
随机推荐
- How to give a math lecture
摘自 http://www.timhsu.net/courses/generic/proof.pdf 或 http://www.timhsu.net/courses/generic/how-to- ...
- Spring Security ——AuthenticationProvider
AuthenticationProvider 目录 1.1 用户信息从数据库获取 1.1.1 使用jdbc-user-service获取 1.1.2 直接使用JdbcDaoImpl ...
- 质量能量等效的泛化--物理学定律方程与等效原理的对应关系 Generalization of Mass-Energy Equivalence--Corresponding Relations between Equations of Physical Laws and Equiva
前文所述,质能方程E=Mc^2可知质能等效,即可设计实验,使得实验无法分辨是何者变化. 泛化:所有的物理学定律方程都可看作方程两边的概念是等效的. 举几个栗子: 例一:F=ma--伊萨克爵士的代表作. ...
- php file_get_contents fopen 连接远程文件
使用file_get_contents和fopen必须空间开启allow_url_fopen. 方法: 编辑php.ini,设置allow_url_fopen =true On,allow_url_f ...
- ASP.NET Forms 认证流程
ASP.NET Forms 认证 Forms认证基础 HTTP是无状态的协议,也就是说用户的每次请求对服务器来说都是一次全新的请求,服务器不能识别这个请求是哪个用户发送的. 那服务器如何去判断一个用户 ...
- ModelValidator基于元数据的验证
ModelValidator主要是应用在ModelMetadata元数据的类型上或类型属性上.它是验证的基础类型,所有的ModelValidatorProviders.DataAnnotationVa ...
- CentOS 7 - 安装MySQL 5.7
CentOS 7的默认yum仓库中并没有MySQL5.7,我们需要手动添加,好在MySQL官方提供了仓库的地址,所以我们能够比较简单地安装MySQL. 本文我们将介绍CentOS 7下MySQL5.7 ...
- AJPFX：外汇的爆仓和追加保证金
在外汇交易中,当可用保证金变成0时,账户即会爆仓.而为了防止爆仓,您可以在可用保证金不足时追加保证金以防止爆仓. 例如,您在AJPFX的账户是100倍的杠杆,一手欧美货币对合约为10万美金(1 LOT ...
- AJPFX：什么是止盈？什么是止损？
在您进行外汇交易后,会碰到Take Profit(止盈)和 Stop Loss(止损)这两个词,均是用作控制风险的工具. 止盈(Take Profit):当单子达到预期的获利价格时锁定盈利.当订单在盈 ...
- Dubbo原理实现之代理接口的定义
Dubbo有很多的实现采用了代码模式,Dubbo由代理工厂ProxyFactory对象创建代理对象. ProxyFactory接口的定义如下: @SPI("javassist") ...