百度前端学院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 [主要目的:为了能在线安 ...
- 复用微信小程序源码包后仍然有原小程序的版本管理怎么处理
前言: 复用微信小程序源码包后,重新创建项目导入源码包,会发现开发者工具版本管理中仍然有原来小程序的版本,这样就不太好了.毕竟是一个新的小程序,需要有新的版本控制的.那么这个问题怎么处理呢? 解决方案 ...
随机推荐
- appcompat_v7报错
appcompat_v7如果报找不到资源,value-xx出错.一般就是因为appcompat_v7的版本问题,直接修改api版本至appcompat_v7对应value的最高版本. 我的v7包最高对 ...
- 团队项目第6周 - Alpha阶段项目复审 - 天冷记得穿秋裤队
团队项目第六周 - Alpha阶段项目复审 - 天冷记得穿秋裤队 经小组讨论得出以下排名 小组 优点 缺点,bug报告 最终名次 冲鸭队 一款融合了2048和俄罗斯方块的小游戏,题材十分新颖,游戏充满 ...
- 《principal component analysis based cataract grading and classification》学习笔记
Abstract A cataract is lens opacification caused by protein denaturation which leads to a decrease i ...
- iOS计算UIWebView的高度和iOS8之后的WKWebView的高度问题
当我们涉及到webView和自定义控件结合的时候,例如一个资讯详情,上半部分是webView,下面位置想加上我们的自定义控件,可可以计算出webView的高度,在刷新界面. 下边是计算UIWebVie ...
- 我最常用的7个Web在线工具
为什么要用Web在线工具呢?有两个原因,第一,它不受限于物理平台,我既可以在自己的电脑上使用,也可以在公司或亲戚朋友的电脑上使用(不管对方的操作系统是什么,只要能上网):第二,可以解放硬盘,减少PC端 ...
- python安装mysql-python依赖包
# 背景 新公司,对换工作了!接口自动化使用的是python的behave框架,因此需要折腾python了,而公司配的笔记本是windows的,因此要在windows下折腾python了 # 步骤 项 ...
- python实现Telnet远程登陆到设备并执行命令
#encoding=utf-8 import telnetlib import time def do_telnet(Host, username, password, finish, command ...
- UWP Button添加圆角阴影（二）
原文:UWP Button添加圆角阴影(二) 阴影 对于阴影呢,WindowsCommunityToolkit中已经有封装好的DropShadowPanel啦,只要引用Microsoft.Toolki ...
- element-ui table 最后一行合计,单元格合并
接着写两个方法--最后一行合计的方法 --单元格合并的方法 先写一个rowspan方法,计算出spanArr数组是怎么单元格合并的,注意rowspan方法要在渲染完成之前使用,可以在mounted中使 ...
- 机器学习-Matplotlib绘图（柱状图，曲线图，点图）
matplotlib 作为机器学习三大剑客之一 ,比热按时无比强大的 matplotlib是绘图库,所以呢我就分享一下简单的绘图方式 #柱状图 #导报 柱状图 import matplotlib. ...