百度前端学院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 [主要目的:为了能在线安 ...
- 复用微信小程序源码包后仍然有原小程序的版本管理怎么处理
前言: 复用微信小程序源码包后,重新创建项目导入源码包,会发现开发者工具版本管理中仍然有原来小程序的版本,这样就不太好了.毕竟是一个新的小程序,需要有新的版本控制的.那么这个问题怎么处理呢? 解决方案 ...
随机推荐
- http发送请求方式；分为post和get两种方式
http发送请求方式:分为post和get两种方式
- 运行批处理文件怎么不显示DOS命令窗口
运行批处理文件怎么不显示DOS命令窗口 BAT没法不显示DOS窗口.你可以考虑用脚本保持以下到文本文件,重命名为AutoUp_ddyy.vbs set WshShell = WScript.Cre ...
- [NewCoder 3] 二维数组中的查找
题目描述 在一个二维数组中,每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数. 来分析下,假设在数 ...
- [转载]腾讯专家:论高级DBA的自我修养
作者介绍: 张秀云:2007年开始从事运维方面的工作,经历过网络管理员.linux运维工程师.DBA.分布式存储运维等多个IT职位.对linux运维.mysql数据库.分布式存储有丰富的经验.2012 ...
- ipad协议
getLoginQRCode (获取登录二维码)CheckLoginQRCode(检测扫码状态)ManualAuth(扫码登录)ManualAuth(62数据登录)ManualAuth(账号密码登录) ...
- DDD Code First 迁移数据实现EF CORE的软删除，值对象迁移配置
感谢Jeffcky大佬的博客: EntityFramework Core 2.0全局过滤 (HasQueryFilter) https://www.cnblogs.com/CreateMyself/p ...
- .Net Mvc AutoMapper简单使用
1.安装automapper nuget包. 2.新建一个AutoMapper配置类并实现一个静态配置方法. 方法一. using AutoMapper; using AutoMapperTest.M ...
- centos下配置nginx遇到的一些基本的坑
作为一个用.net的渣渣,常年混迹在window平台下,对Linux啥都不懂.随着.net core开源.跨平台后,也开始学习下linux. 在Desktop/Webs下放了一个index.html的 ...
- “全栈2019”Java多线程第三十章：尝试获取锁tryLock()方法详解
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java多 ...
- 阿里云mysql数据库备份还原
1.下载备份包 在rds的备份恢复中点击下载,在弹出的窗口中复制内网下载地址(前提是目标服务器与rds内网互通,否则请复制外网地址) 在目标服务器中执行如下命令进行下载: wget -c '复制的地址 ...