js旋转V字俄罗斯方块

实现效果如图，也就是一个图像的旋转。注意，旋转后的文字是相对应的，而且文字还是立起的。第一次点击时显示，第二次点击时开始旋转。下面是我做这个效果的记录，方法这么差，我也就不说什么了。

先上HTML/CSS部分，这部分都是相同的。JS放在 script 标签里。

<!--

Author: XiaoWen

Create a file: 2016-12-04 17:03:21

Last modified: 2016-12-05 17:34:58

Start to work:

Finish the work:

Other information:

-->

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>V字方块</title>

  <style>

    body{

      padding: 100px;

    }

    ul,li{

      margin: 0;

      padding: 0;

      list-style:none;

      width:500px;

      height:500px;

      background: #ccc;

    }

    ul{

      position: relative;

    }

    li{

      width: 100px;

      height: 100px;

      background: #f00;

      color: #fff;

      text-align: center;

      line-height: 100px;

      font-size: 16px;

      font-weight:bold;

      position:absolute;

      display:none;

    }

  </style>

</head>

<body>

<button>旋转</button>

<ul>

  <li>1</li>

  <li>2</li>

  <li>3</li>

  <li>4</li>

  <li>5</li>

</ul>

<script>

//这里的 js 代码分次放在下面的文章里。

</script>

</body>

</html>

HTML/CSS

第一次实现的代码，一边写一边都感觉后怕……这是在写JS还是在写CSS？

代码太多了。不但多，而且感觉乱，条理不清晰，不易使用。

开始的思路是直接让所有方块相对于左边定位。

<script>

  var w=100;

  var l=0;

  var t=0;

  var dir=1;

  var a_li=document.getElementsByTagName("ul")[0].getElementsByTagName("li");

  var btn=document.getElementsByTagName("button")[0];

  for(var i=0;i<a_li.length;i++){

    a_li[i].style.display="none";

  }

  btn.onclick=function(){

    for(var i=0;i<a_li.length;i++){

      a_li[i].style.display="block";

    }

    l=0;

    t=0;

    i=0;

    block(dir)

    dir++

    if(dir==5){

      dir=1;

    }

  }

  //dir 方向，1 left/2 top/3 right/4 bottom

  function block(dir){

    for(var i=0; i<a_li.length;i++){

      switch(dir){

        case 1:

          /*左*/

          if(i<2){

            a_li[i].style.left=l*w+"px";

            a_li[i].style.top=t*w+"px";

            l++;

            t++;

          }else if(i==2){

            console.log(l,t,i)

            a_li[i].style.left=l*w+"px";

            a_li[i].style.top=t*w+"px";

          }else{

            l--;

            t++;

            a_li[i].style.left=l*w+"px";

            a_li[i].style.top=t*w+"px";

          }

          break;

        case 2:

          /*上*/

          if(i<2){

            a_li[i].style.left=((a_li.length-l)-1)*w+"px";

            a_li[i].style.top=t*w+"px";

            l++;

            t++;

          }else if(i==2){

            console.log(l,t,i)

            a_li[i].style.left=l*w+"px";

            a_li[i].style.top=t*w+"px";

          }else{

            l--;

            t--;

            a_li[i].style.left=l*w+"px";

            a_li[i].style.top=t*w+"px";

          }

          break;

        case 3:

          /*右*/

          if(i<2){

            a_li[i].style.left=((a_li.length-l)-1)*w+"px";

            a_li[i].style.top=((a_li.length-t)-1)*w+"px";

            l++;

            t++;

          }else if(i==2){

            console.log(l,t,i)

            a_li[i].style.left=l*w+"px";

            a_li[i].style.top=t*w+"px";

          }else{

            l++;

            t--;

            a_li[i].style.left=l*w+"px";

            a_li[i].style.top=t*w+"px";

          }

          break;

        default:

        /*下*/

          if(i<2){

            a_li[i].style.left=l*w+"px";

            a_li[i].style.top=((a_li.length-t)-1)*w+"px";

            l++;

            t++;

          }else if(i==2){

            console.log(l,t,i)

            a_li[i].style.left=l*w+"px";

            a_li[i].style.top=t*w+"px";

          }else{

            l++;

            t++;

            a_li[i].style.left=l*w+"px";

            a_li[i].style.top=t*w+"px";

          }

      }

    }

  }

</script>

代码一

第二次实现的代码。上面写的

开始寻找新思路，然后一直看图……

发现：元素在每一边上的位置都是相同的。有一个方向的位置只增不减，有一个方向有增有减。如函数：fk(fx1,fx2)。然后，这种方法写出来的效果显然不符合要求，5的位置应该是1，没事，反正这是一个思路而已，办法总是人想的，代码行数正在减少中……

<script>

  //思路：先不考虑具体元素，只考虑元素的位置。

  //元素在每一边上的位置都是相同的。有一个方向的位置只增不减，有一个方向有增有减。如函数：fk(fx1,fx2)

  var w=100;

  var btn_num=0;

  var a_li=document.getElementsByTagName("ul")[0].getElementsByTagName("li");

  var btn=document.getElementsByTagName("button")[0];

  btn.onclick=function(){

    btn_num++;

    switch(btn_num){

      case 1:

        for(var i=0;i<a_li.length;i++){

          a_li[i].style.display="block";

        }

        fk("left","top");

        break;

      case 2:

        fk("top","left");

        break;

      case 3:

        fk("right","top");

        break;

      default:

        fk("bottom","left");

        btn_num=0;

    }

  }

  //fx1 增减方向， fx2仅增方向

  function fk(fx1,fx2){

    for(var i=0;i<a_li.length;i++){

      /*下面这四行用来消除上次的位置*/

      a_li[i].style.left="auto";

      a_li[i].style.top="auto";

      a_li[i].style.right="auto";

      a_li[i].style.bottom="auto";

      if(i>parseInt(a_li.length/2)){ //取出中间以上的元素

        a_li[i].style[fx1]=(a_li.length-i-1)*w+"px"; //a_li.length-i-1相当于a_li.length-(i+1)，表示剩下的位置关系。

        a_li[i].style[fx2]=i*w+"px";

      }else{

        a_li[i].style[fx1]=i*w+"px";

        a_li[i].style[fx2]=i*w+"px";

      }

    }

  }

</script>

代码二

第三次，感觉总算是像点样子了。思路：直接四个边分别考虑，元素只相对某一边定位。

<script>

  //思路：直接四个边分别考虑，元素只相对某一边定位。

  //

  var w=100;

  var btn_num=0;

  var a_li=document.getElementsByTagName("ul")[0].getElementsByTagName("li");

  var btn=document.getElementsByTagName("button")[0];

  btn.onclick=function(){

    btn_num++;

    switch(btn_num){

      case 1:

        for(var i=0;i<a_li.length;i++){

          a_li[i].style.display="block";

        }

        fk("left","top");

        break;

      case 2:

        fk("top","right");

        break;

      case 3:

        fk("right","bottom");

        break;

      default:

        fk("bottom","left");

        btn_num=0;

    }

  }

  //fx1定位的方向， fx2开始增加方向(下一方向)

  function fk(fx1,fx2){

    for(var i=0;i<a_li.length;i++){

      /*下面这四行用来消除上次的位置*/

      a_li[i].style.left="auto";

      a_li[i].style.top="auto";

      a_li[i].style.right="auto";

      a_li[i].style.bottom="auto";

      /****/

      a_li[i].style[fx1]=i*w+"px";

      a_li[i].style[fx2]=i*w+"px";

      if(i>parseInt(a_li.length/2)){

        a_li[i].style[fx1]=(a_li.length-(i+1))*w+"px";

        a_li[i].style[fx2]=i*w+"px";

      }

    }

  }

</script>

代码三

第三次写的代码，感觉函数fk(fx1,fx2)的第二个参数的存在有点鸡肋。按分析fx2是能根据fx1算出来的（也就是如果第一个参数是top，第二个就是right。顺时针方向的下一个），所以其实不用这个参数也可以。

我最后还是要了，因为我的想法是，如果不要的话还得在函数里判断一下fx1的参数，配合已知的fx2继续计算。这就得多写几行判断语句了，大概得增加十行代码以上吧。所以就手工传送参数2（下一个方向）吧。

那么，还有没有更简单的方法呢？

js旋转V字俄罗斯方块的更多相关文章

旋转V字俄罗斯方块
实现效果如图,也就是一个图像的旋转.注意,旋转后的文字是相对应的,而且文字还是立起的.第一次点击时显示,第二次点击时开始旋转.下面是我做这个效果的记录,方法这么差,我也就不说什么了. 先上HTML/C ...
JS随机生成100个DIV每10个换行(换色，生成V字和倒V)
附图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8& ...
原生js，一些小应用（逢10进一，生成V字，多个div抖动）
第一题:每隔10个div换一行.并且鼠标移入改变opacity. <!DOCTYPE html> <html lang="en"> <head> ...
js实现简单的俄罗斯方块小游戏
js实现简单的俄罗斯方块小游戏开始 1. 创建一个宽为 200px,高为 360px 的背景容器 <!DOCTYPE html> <html lang="en" ...
JS/Jquery版本的俄罗斯方块(附源码分析)
转载于http://blog.csdn.net/unionline/article/details/63250597 且后续更新于此 1.前言写这个jQuery版本的小游戏的缘由在于我想通过从零到有 ...
JS旋转和css旋转
js旋转 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <styl ...
d3.js 制作简单的俄罗斯方块
d3.js是一个不错的可视化框架,同时对于操作dom也是十分方便的.今天我们使用d3.js配合es6的类来制作一个童年小游戏--俄罗斯方块.话不多说先上图片. 1. js tetris类由于方法拆分 ...
exif.js 旋转图片
还是那个问题:网上的大胸弟们BB一大堆,没几个给的代码能用的,话不多说,直接上demo: 链接:https://pan.baidu.com/s/1jJ6vnt8 密码:swwm 不要忽视demo中的s ...
简单JS旋转实现转盘抽奖效果
闲来没事,做了一个模拟转盘抽奖的HTML&JS的效果: 可以在设置的时候,选择几个区域,并且可以填写指针将要停止的区域比如,我选择了"区域2",结果就是这样具体可以见下 ...

随机推荐

20165316 技能学习心得与c语言学习
20165316 技能学习心得与c语言学习一.技能学习经验我会打乒乓球,在中国,我只能说我"会"打,至于"比大多数人更好"我不敢断言,因为我无时无刻不感受到 ...
区块链3.0 ada Cardano卡尔达诺如何获得一致好评？
区块链3.0 ada Cardano卡尔达诺如何获得一致好评? EOS 的直接竞争对手是以太坊.文章介绍的卡尔达诺(Cardano)的目标就更加远大了,他要同时锁定比特币和以太坊.但大家去网上搜索卡尔 ...
Django框架----跨表查询及添加记录
一:创建表书籍模型: 书籍有书名和出版日期,一本书可能会有多个作者,一个作者也可以写多本书,所以作者和书籍的关系就是多对多的关联关系(many-to-many); 一本书只应该由一个出版商出 ...
linux下的ifconfig命令
ifconfig工具不仅可以被用来简单地获取网络接口配置信息,还可以修改这些配置. 1．命令格式: ifconfig [网络设备] [参数] 2．命令功能: ifconfig 命令用来查看和配置网络设 ...
Python cv2 OpenCV 中传统图片格式与 base64 转换
Base64是网络上最常见的用于传输8Bit字节码的编码方式之一,是一种基于64个可打印字符来表示二进制数据的方法.通过http传输图片常常将图片数据转换成base64之后再进行传输. Base64简 ...
self asyncio
import asyncio from threading import Thread import time print('main start:',time.time()) async def d ...
Fiddler（三）Fiddler 报错creation of the root certificate was not successful
打开CMD,找到Fiddler所在目录,我这里是把汉化版的解压在了桌面,所以通过CMD进入桌面下的Fiddler文件夹. 执行命令 makecert.exe -r -ss my -n -h -cy a ...
关于__declspec(dllexport)
windows下dll动态库函数的导入与导出. __declspec Microsoft Specific __declspec ( extended-attribute ) declarator l ...
springmvc StringHttpMessageConverter 中文乱码的几种解决办法（亲测）
昨天,将一个原来使用JSR 311作为restful实现的测试系统改成了使用spring mvc,最后测试的时候发现输出的json字符串为乱码,从日志可以看出使用的是StringHttpMessage ...
Linux下Keepalived安装与配置
一.简介负载平衡是一种在真实服务器集群中分配IP流量的方法,可提供一个或多个高度可用的虚拟服务.在设计负载均衡拓扑时,重要的是要考虑负载均衡器本身的可用性以及它背后的真实服务器.用C编写的类似于la ...

js旋转V字俄罗斯方块

js旋转V字俄罗斯方块的更多相关文章

随机推荐

热门专题