zoukankan      html  css  js  c++  java
  • 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(下一个方向)吧。

    那么,还有没有更简单的方法呢?

  • 相关阅读:
    Educational Codeforces Round 20 D. Magazine Ad
    Educational Codeforces Round 20 C. Maximal GCD
    紫书第三章训练2 暴力集
    Educational Codeforces Round 20 B. Distances to Zero
    Educational Codeforces Round 20 A. Maximal Binary Matrix
    紫书第三章训练1 D
    紫书第一章训练1 D -Message Decoding
    HAZU校赛 Problem K: Deadline
    Mutual Training for Wannafly Union #8 D
    紫书第三章训练1 E
  • 原文地址:https://www.cnblogs.com/daysme/p/6134777.html
Copyright © 2011-2022 走看看