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

随机推荐

jvm调优的分类
本文部分内容出自https://blog.csdn.net/yang_net/article/details/5830820 调优步骤: 衡量系统现状. 设定调优目标. 寻找性能瓶颈. 性能调优. 衡 ...
CentOS 7.2通过yum安装MairaDB 10.1
CentOS 7.2自带的yum源中mysql已经被替换成了mariadb,然而却是5.5版本,匹配mysql5.5,想要使用mysql 5.7的特性需要mariadb 10.0或10.1版本,10. ...
petaPoco
petaPoco出现在2011年...因此老鸟可忽略该贴...目前最新版是 5.0, 但核心文件变化不大. 在众多的ORM框架中, 其中不乏非常优秀的EF, 但今天仍然想写点关于PetaPoco的文字 ...
[NewCoder 7] 用两个栈实现队列
题目描述用两个栈来实现一个队列,完成队列的Push和Pop操作. 队列中的元素为int类型. 水题,直接上代码: class Solution { public: void push(int nod ...
NODE-WEBKIT教程(5)NATIVE UI API 之FRAMELESS WINDOW
node-webkit教程(5)Native UI API 之Frameless window 文/玄魂原文链接:http://www.xuanhun521.com/Blog/2014/4/15/n ...
tfs查看最近签入记录及文件
在团队资源管理=>源代码管理资源管理器=>选择某个最近签入的文件夹=>右键=>查看历史记录=>双击某个文件夹就能看到最近变更集文件
重写TreeView，自定义图标，生成通行的下划线，取消默认获得焦点失去焦点的效果，并支持拖拽节点到外界
1.运行效果: 2.前端代码 <UserControl x:Class="iPIS.UI.Base.Tree.VideoTreeControl" xmlns="ht ...
CuratorFramework使用
CuratorFrameworkFramework是ZooKeeper Client更高的抽象API 自动连接管理: 1. 当ZooKeeper客户端内部出现异常, 将自动进行重连或重试, 该过程对外 ...
如何使用gradle打jar包
1.进入工程目录,输入./gradlew,如显示"... build success" 则表示当前目录下gradle可用:如当前目录下无gradle,则在线下载 .. 2.输入./ ...
nginx发布静态网页
http://www.jb51.net/article/71384.htm 切记不要把项目放在/root下会出现 nginx open() "" failed (13: Perm ...

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

任务描述

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

随机推荐

热门专题