百度前端技术学院task34源码—

任务描述

增加新的指令如下：
- TRA LEF：向屏幕的左侧移动一格，方向不变
- TRA TOP：向屏幕的上面移动一格，方向不变
- TRA RIG：向屏幕的右侧移动一格，方向不变
- TRA BOT：向屏幕的下面移动一格，方向不变
- MOV LEF：方向转向屏幕左侧，并向屏幕的左侧移动一格
- MOV TOP：方向转向屏幕上面，向屏幕的上面移动一格
- MOV RIG：方向转向屏幕右侧，向屏幕的右侧移动一格
- MOV BOT：方向转向屏幕下面，向屏幕的下面移动一格

分析：

　　只是在1的基础上添加了相应的命令，其他并没有太多改变。因此，只要在1的基础上添加相应的代码就好了。

注意点：写好之后，想一想，代码能不能再次精简，有没有多余的地方。

体验网址：http://1.huanssky.applinzi.com/ablum/ife/task34.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="Turn LEFT">

      <input id="tunRig" type="button" value="Turn RIGHT">

      <input id="tunBac" type="button" value="Turn BACK">

      <br>

      <input id="traDown" type="button" value="traDown">

      <input id="traLef" type="button" value="traLeft">

      <input id="traRig" type="button" value="traRight">

      <input id="traTop" type="button" value="traTop">

    </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

        flag:0

    }

    //获取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;

        }

  }

    function go(dir){

        //修正方向，使其在[0,4）之间

        moveBox.direction=moveBox.direction % 4+(moveBox.direction % 4 < 0 ? 4 : 0);

        if(moveBox.left>0 && (moveBox.direction==0 && dir==null || dir=="traLeft")){

          moveBox.left=moveBox.left-50;

          draw();

        }else if( moveBox.topl>0 && (moveBox.direction==1 && dir==null || dir=="traTop")){

          moveBox.topl=moveBox.topl-50;

          draw();

        }else if( moveBox.left<450 && (moveBox.direction==2 && dir==null || dir=="traRight")){

          moveBox.left=moveBox.left+50;

          draw();

        }else if(moveBox.topl<450 && (moveBox.direction==3 && dir==null || dir=="traDown")){

          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;

          case "traDown":

            go("traDown");

            break;

          case "traRig":

            go("traRight");

            break;

          case "traTop":

            go("traTop");

            break;

          case "traLef":

            go("traLeft");

            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>

百度前端技术学院task34源码——会指令的小块2的更多相关文章

通过Github Pages在线查看百度前端技术学院完成的任务成果
前言 .note-content {font-family: "Helvetica Neue", Arial, "Hiragino Sans GB", STHe ...
百度前端技术学院（IFE）2016春季学期总结
今天(5月16日)作为第八个提交者提交了任务五十:RIA微型问卷管理平台这样一个综合性的大任务,宣告我的IFE春季学期课程学习顺利完成.其实任务五十并不复杂,现在再让我来做,可能一周不到就写出来了, ...
百度前端技术学院—-小薇学院(HTML+CSS课程任务)
任务一:零基础HTML编码课程概述作业提交截止时间:04-24 重要说明百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理 ...
百度前端技术学院task1.10
任务十:Flexbox 布局练习面向人群: 有一定HTML及CSS基础的同学难度: 中重要说明百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容 ...
百度前端技术学院-task1.3源代码
因为其中有图片,所以就给有图片的位置加了边框和设置了大小,这样哪怕图片不显示也可以知道在哪里. <!DOCTYPE html> <html> <head> < ...
百度前端技术学院-基础-day1
2020.9.14 今天我开始在百度前端技术学院学习基础课程. 先立一个Flag,希望我能在30天之内学完前四十天的课程,后续课程再一天一节. 第一天的内容主要是提供了很多基础学习的网页,比如W3sc ...
百度前端技术学院-task2.18-2.19源码以及个人总结
源码:http://yun.baidu.com/share/link?shareid=2310452098&uk=1997604551 1.感觉在写js的时候,最好先理清思路,先干什么,在干什 ...
百度前端技术学院-task1.8源代码以及个人总结
通过这次任务的练习我学到了很多,现将所学到的以及遇到的问题总结如下. 源码地址:http://pan.baidu.com/s/1kVB2VZL 下面出现的代码,都是摘自这个上面的源码 1.终于明白了a ...
百度前端技术学院task35源代码——听指令的小方块3
任务描述如图,命令输入框由input变为textarea,可以允许输入多条指令,每一行一条 textarea左侧有一列可以显示当前行数的列(代码行数列),列数保持和textarea中一致当text ...

随机推荐

FastReport使用技巧
使用技巧篇 1.FastReport中如果访问报表中的对象? 可以使用FindObject方法. TfrxMemoView(frxReport1.FindObject('memo ...
Django：haystack全文检索详细教程
参考:https://blog.csdn.net/AC_hell/article/details/52875927 一.安装第三方库及配置 1.1 安装插件 pip install whoosh dj ...
SQL SERVER锁（LOCK）知识及锁应用
提示:这里所摘抄的关于锁的知识有的是不同sql server版本的,对应于特定版本时会有问题. 一关于锁的基础知识 (一). 为什么要引入锁当多个用户同时对数据库的并发操作时会带来以下数据不一致的 ...
NLog配置JsonLayout中文输出为unicode问题
日志输出现要改为json格式,网上查询layout配置为JsonLayout就可以了,结果发现输出中文为unicode编码,看很多文章说配置encode="false"就可以了,结 ...
maven项目无法新增java test目录的问题
有时候当我们构建好maven项目时,再导入eclipse中会缺少src/main/java 和src/test/java,这是需要我们手动创建: 但是有时候在项目视图下或者 enterprise ...
[JavaScript] 的异步编程之手写一个Gernerator的例子
<html> <head> <meta charset="UTF-8"> <title>Generator Demo</tit ...
微信小程序自定义组件的使用以及调用自定义组件中的方法
在写小程序的时候,有时候页面的内容过多,逻辑比较复杂,如果全部都写在一个页面的话,会比较繁杂,代码可读性比较差,也不易于后期代码维护,这时候可以把里面某部分功能抽出来,单独封装为一个组件,也就是通常说 ...
微信小程序导出当前画布指定区域的内容并生成图片保存到本地相册(canvas)
最近在学小程序,在把当前画布指定区域的内容导出并生成图片保存到本地这个知识点上踩坑了. 这里用到的方法是: wx.canvasToTempFilePath(),该方法作用是把当前画布指定区域的内容导出 ...
Python小白学习之路（二十三）—【生成器补充】
生成器的一些补充接着下鸡蛋和吃包子! 补充一:生成器只能遍历一次 (总是把生成器比喻成母鸡下鸡蛋,需要一个下一个,首先是下出来的鸡蛋不能塞回母鸡肚子里,其次是一个母鸡一生只能下一定数量的鸡蛋,下完了 ...
5_Python OOP
1. 实例属性和类属性 (1) 实例属性在构造函数__init__中定义,定义时以self作为前缀,只能通过实例名访问 (2) 类属性在类中方法之外单独定义,还可以在程序中 ...

百度前端技术学院task34源码——会指令的小块2

任务描述

百度前端技术学院task34源码——会指令的小块2的更多相关文章

随机推荐

热门专题