百度前端学院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 [主要目的:为了能在线安 ...
- 复用微信小程序源码包后仍然有原小程序的版本管理怎么处理
前言: 复用微信小程序源码包后,重新创建项目导入源码包,会发现开发者工具版本管理中仍然有原来小程序的版本,这样就不太好了.毕竟是一个新的小程序,需要有新的版本控制的.那么这个问题怎么处理呢? 解决方案 ...
随机推荐
- 解决UNIGUI字体太小的问题
解决UNIGUI字体太小的问题 Unigui运行在chrome浏览器下可以有最佳的效果,但用ie打开用unigui做的项目会发现字体明显小一截,可以用自定义css来解决这个问题. 可以在UniServ ...
- MVVM Light 新手入门（1）：准备阶段
1.新建WPF空白项目. 2.NuGet 程序包中安装 3.根据MVVM分层结构,建立包含Model.View.ViewModel三层文件夹 如图: 1.View负责前端展示,与ViewModel进行 ...
- 背水一战 Windows 10 (47) - 控件（ScrollViewer 特性）: Chaining, Rail, Inertia, Snap, Zoom
[源码下载] 背水一战 Windows 10 (47) - 控件(ScrollViewer 特性): Chaining, Rail, Inertia, Snap, Zoom 作者:webabcd 介绍 ...
- C# Winform下一个热插拔的MIS/MRP/ERP框架（简介）
Programmer普弱哥们都喜欢玩自己的框架,我也不例外. 理想中,这个框架要易于理解.易于扩展.易于维护:最重要的,易于CODING. 系统是1主体框架+N模组的多个EXE/DLL组成的,在主体框 ...
- 30_网络编程-socketserver
一.socketserver socketserver可以实现和多个客户端通信.它是在socket的基础上进行了一层封装,也就是说底层还是调用的socket,在py2.7里面叫做Socke ...
- [HTML] 动态修改input placeholder的颜色
.invalid:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: red; } .invalid::-moz-placeholder { ...
- 解决ssh远程连接错误问题
使用 Xshell 远程连接服务器时,经常会出现这么个错误提示 WARNING! The remote SSH server rejected X11 forwarding request. ➜ ~ ...
- 03-创建高可用 etcd 集群
本文档记录自己的学习历程! 创建高可用 etcd 集群 kuberntes 系统使用 etcd 存储所有数据,本文档介绍部署一个三节点高可用 etcd 集群的步骤,这三个节点使用以下机器: 192.1 ...
- MyEclipse 编写 JSP 代码时很卡的解决办法
在网上看到很多方法,都是尝试过,个人感觉都没有说到重点,所以收效甚微. 后来自己总结了一下: 我们都是习惯在MyEclipse 工具,双击jsp 文件打开进行编辑.这时,工具会打开窗口的 Previe ...
- redis安装（linux）
redis安装 1. 安装tcl # cd /usr/local # wget http://downloads.sourceforge.net/tcl/tcl8.6.1-src.tar.gz # t ...