百度前端学院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 [主要目的:为了能在线安 ...
复用微信小程序源码包后仍然有原小程序的版本管理怎么处理
前言: 复用微信小程序源码包后,重新创建项目导入源码包,会发现开发者工具版本管理中仍然有原来小程序的版本,这样就不太好了.毕竟是一个新的小程序,需要有新的版本控制的.那么这个问题怎么处理呢? 解决方案 ...

随机推荐

less（css）语言快速入门
转载原文地址:https://www.ibm.com/developerworks/cn/web/1207_zhaoch_lesscss/ 简介 CSS(层叠样式表)是一门历史悠久的标记性语言,同 ...
I - Dividing Stones
Description There are N stones, which can be divided into some piles arbitrarily. Let the value of e ...
Python 高级编程 ——观察者模式
观察者模式的定义 :定义了对象之间一对多依赖,当一个对象改变状态时,这个对象的所有依赖者都会收到通知并按照自己的方式进行更新. 按照一个气象站的例子来看观察者模式从气象站取得数据后要在三个布告牌显示 ...
C#基础——C#中问号的使用
1. 可空类型修饰符(?): 引用类型可以使用空引用表示一个不存在的值,而值类型通常不能表示为空. 例如:string str=null; 是正确的,int i=null; 编译器就会报错. 为了使值 ...
使用xftp连接到ftp服务器即常见问题的解决
使用xftp连接到ftp服务器新建连接配置连接点击确定,连接到ftp 常见问题中文乱码问题解决: 点击连接设置按钮修改编码方式最后确定保存!刷新一下,就不在乱码了;
[宁波集训]0827Day1
1.\(CF771D\ Bear\ and\ Company\)(原题,比赛时改为多组数据) 一道毒瘤\(dp\)题,\(dp[i][j][k][0/1]\)表示有\(i\)个\(V\),有\(j\) ...
我的AI之路 —— 从裸机搭建GPU版本的深度学习环境
之前一直在CPU上跑深度学习,由于做的是NLP方向所以也能勉强忍受.最近在做图像的时候,实在是扛不住了...还好领导们的支持买个虚拟机先体验下.由于刚买的机器,环境都得自己摸索,瞎搞过很多次,也走过很 ...
TCP连接详解
一. 连接过程示意图二. 建立TCP连接 2.1 三次握手第一次握手:建立连接.客户端发送连接请求报文段,将SYN置为1,Sequence Number为x:然后,客户端进入SYN_SEND状态, ...
POJ 2726
#include <iostream> #include <algorithm> #define MAXN 10005 using namespace std; struct ...
Centos6.7配置Nginx+Tomcat简单整合
系统环境:Centos 6.7 软件环境:JDK-1.8.0_65.Nginx-1.10.3.Tomcat-8.5.8 文档环境:/opt/app/ 存放软件目录,至于mkdir创建文件就不用再说了 ...

百度前端学院task33源码及总结——听指令的小方块

任务描述

百度前端学院task33源码及总结——听指令的小方块的更多相关文章

随机推荐

热门专题