百度前端技术学院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 ...

随机推荐

Vue的路由设置
一.路由基础介绍 1.什么是前端路由? 路由是根据不同的url地址展示不同的内容或页面前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做,之前是通过服务器根据url的不同返回不同的页面实现 ...
Android记录10--android.os.NetworkOnMainThreadException异常解决办法
2013年11月1日小光棍节有一段时间没有发表新的博客了,最近一直在忙着开发新浪微博客户端遇到很多问题比较头痛,比如说本篇博客要讲的NetworkOnMainThreadException这个异常, ...
DELPHI获取宽带IP
DELPHI获取宽带IP DELPHI获取宽带IP procedure TForm1.Button1Click(Sender: TObject);varurl: string;beginurl : ...
Xcode一些好用的插件，以及这些插件的管理器
最近从xcode6.4升级到xcode7,发现以前所有的插件都失效了,如果要安装,需要重新去一个个下载.安装,很麻烦. 于是,转来了这篇博文,亲自测试,发现很好用...... 地址:http://11 ...
Android开发教程 - 使用Data Binding（二）集成与配置
本系列目录使用Data Binding(一)介绍使用Data Binding(二)集成与配置使用Data Binding(三)在Activity中的使用使用Data Binding(四)在Fr ...
【BZOJ2589】 Spoj 10707 Count on a tree II
BZOJ2589 Spoj 10707 Count on a tree II Solution 吐槽:这道题目简直...丧心病狂如果没有强制在线不就是树上莫队入门题? 如果加了强制在线怎么做? 考虑 ...
JQuery - 阻止回车键
JQuery 和 js 禁止enter回车事件方法 jQuery版 $(window).keydown( function(e) { var key = window.event?e.keyCode: ...
Java Listener中Spring接口注入的使用
在项目中使用Spring通常使用他的依赖注入可以很好的处理,接口与实现类之间的耦合性,但是通常的应用场景中都是Service层和DAO层,或者web层的话, 也是与Strust2来整合,那么如何在Li ...
java极光推送记录
1. 添加poom依赖: <dependency> <groupId>cn.jpush.api</groupId> <artifactId>jigu ...
[Umbraco] 熟悉管理页面
登录到umbraco管理界面后,发现其后台管理页很简洁首页看到左侧部分是一个Content和Sections,右侧是管理区域介绍各个Sections代表的含义: "Content&quo ...

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

任务描述

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

随机推荐

热门专题