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

随机推荐

easyUi DataGrid 显示日期列,时间为空也可，的正常显示，及普通居中列情况
$('#tt').datagrid({ url: '@Url.Content("~/kpi/FindList")', w ...
C#基础——C#中问号的使用
1. 可空类型修饰符(?): 引用类型可以使用空引用表示一个不存在的值,而值类型通常不能表示为空. 例如:string str=null; 是正确的,int i=null; 编译器就会报错. 为了使值 ...
.NET中的FileUpload控件的使用-Jquery(一)
FileUpload在HTML中是个常用的基础控件,在涉及到上传各种格式的文件时候都会用到:笔者前段时间正好用到它做上传功能,记录下来做一些累积, 前端到后台用的是的Jquery中的Ajax进行数据传 ...
C# windform 使用TreeGridView
1 下载 treeGridView.DLL库文件. 2 添加到工程中. 右键“工具箱”选择“选择项” 弹出对话框选择“浏览” 选中下载还的dll库文件.完成后工具箱中会有 treeGridView控 ...
python 通过pytz模块进行时区的转换，获取指定时区的时间
import pytz import time import datetime print(pytz.country_timezones('cn')) # 查询中国所拥有的时区 print(pytz. ...
移动端font-size适配方案
概述这是我研究移动端页面时的思考,记录下来供以后开发时参考,相信对其他人也有用.由于我写移动端页面写的还比较少,一些问题都还没遇到,所以我的这篇博文不免有些错误的地方,还请大佬多多指正. 这篇文章是 ...
C#6.0语言规范(五) 变量
变量代表存储位置.每个变量都有一个类型,用于确定可以在变量中存储的值.C#是一种类型安全的语言,C#编译器保证存储在变量中的值始终是适当的类型.可以通过赋值或使用++和--运算符来更改变量的值. 必须 ...
joi库学习笔记
零.背景 node.js 应用中,req.query / req.body 传来的参数需要做 valication( 合法性验证 ) 一.安装 https://github.com/hapijs/jo ...
centos7下elasticSearch安装配置
OS:Centos7x虚拟机 1H2Gjdk:1.8elasticsearch:5.6.0 1.下载“elasticsearch-5.6.0.tar.gz”解压到/usr/local/elastics ...
SDK 上报信息史上最全持续更新
SDK 上报信息史上最全持续更新接入SDK总会遇到各种需求,有些SDK巴不得把玩家信息全部上报到他们服务器! 以下是我接SDK遇到的, 欢迎大家补全. 上报事件注册(按道理这个应该是SDK的功 ...

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

任务描述

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

随机推荐

热门专题