devbox
小舞很执着
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

【小5聊】前端开发经典游戏俄罗斯方块（前端开发领域）_俄罗斯方块前端项目

作者：小舞很执着 | 2024-07-21 20:51:51

赞

踩

俄罗斯方块前端项目

一年一度的博客之星来了，在此通过前端开发方式实现经典游戏俄罗斯方块

俄罗斯方块游戏，大家都玩过，今天就用自己熟悉的jQuery来实现TA

可提供完整源码，如果小伙伴们需要的话（步骤里其实也是完整的源码了）

一、功能分析

1、设置一个高宽度范围

长=20格，宽=10格（标准设置）

2、方块类型

  • 七种类型

O形、I形、S形、Z形、L形、J形、T形 

不管是什么形状，都是由4个小格子拼接而成

  • O形

一种旋转形态

  • I形、S形、Z形

两种形态，就是两种旋转类型

  • L形、J形、T形

四种形态，就是四个旋转方向，上右下左

3、控制方块方向

可以使用键盘的左右下来控制方块的移动方向

4、定时器

通过定时器控制方块向下移动，可以先设置每一秒种向下移动一个单位，比如设置好的30px一个移动单位

5、边界判断

主要有三个边界判断

1）到达底部边界判断

2）到达左右两边边界判断

3）到达某一方块上方边界判断

6、方块旋转

通过left和top移动标志，保持left和top值不变，根据每个形态的每个小方块进行公式计算即可

7、方块消除分析

每个格子都是独立，移动到一定位置后，如果10个小方块都是同在一行，那么就直接对当前行的小方块进行移除即可

二、实现流程

1、页面范围设计

长宽2:1，div高宽设计为600px:300px

  • 代码
  1. <div style="background:#099dff;position:absolute;top:150px;left:50%;height:600px;width:300px;box-shadow:0 0 13px #ccc;margin-left:-150px;">
  2.     <!--游戏面板-->
  3.     <div class="playDiv" style="background: #099dff; position: relative; height: 600px; width: 300px;">
  4.  
  5.     </div>
  6.  
  7.     <!--开始按钮-->
  8.     <div class="btnStartDiv" style="position:absolute;top:-45px;left:0px;width:60px;height:35px;line-height:35px;text-align:center;background:#099dff;color:#fff;cursor:pointer;">
  9.         <span>开始</span>
  10.     </div>
  11.  
  12.     <!--测试-->
  13.     <div class="testDiv" style="position:absolute;top:0px;right:-150px;">
  14.         <div class="one" style="height:35px;line-height:35px;"></div>
  15.         <div class="two" style="height:35px;line-height:35px;"></div>
  16.         <div class="three" style="height:35px;line-height:35px;"></div>
  17.     </div>
  18. </div>
  19.  
  20. <script type="text/template" id="shapeTemplate">
  21.     <div class="shapeDiv shapeMoveDiv" style="width: 30px;height: 30px;background: #3e3cd0;position:absolute;top:0px;left:0px;">
  22.         <div style="width:100%;height:100%;box-sizing:border-box;border:2px solid #000;"></div>
  23.     </div>
  24.     <div class="shapeDiv shapeMoveDiv" style="width: 30px;height: 30px;background: #3e3cd0;position:absolute;top:0px;left:0px;">
  25.         <div style="width:100%;height:100%;box-sizing:border-box;border:2px solid #000;"></div>
  26.     </div>
  27.     <div class="shapeDiv shapeMoveDiv" style="width: 30px;height: 30px;background: #3e3cd0;position:absolute;top:0px;left:0px;">
  28.         <div style="width:100%;height:100%;box-sizing:border-box;border:2px solid #000;"></div>
  29.     </div>
  30.     <div class="shapeDiv shapeMoveDiv" style="width: 30px;height: 30px;background: #3e3cd0;position:absolute;top:0px;left:0px;">
  31.         <div style="width:100%;height:100%;box-sizing:border-box;border:2px solid #000;"></div>
  32.     </div>
  33. </script>

 2、方块形状设计

上一步骤设计了宽度为300px，那么一个小格子就是30px，并且每个形状都有四个方向的

1）O形

 2）I形

 3）S形

4）Z形

5）L形

 6）J形

7）T形

 

3、全局参数设置

1）方块模板

模板里有4个小方块，然后根据随机以及公式对4个方块进行absolute相对定位，组成一个方块形状以及方块方向

  1. <script type="text/template" id="shapeTemplate">
  2.     <div class="shapeDiv shapeMoveDiv" style="width: 30px;height: 30px;background: #3e3cd0;position:absolute;top:0px;left:0px;">
  3.         <div style="width:100%;height:100%;box-sizing:border-box;border:2px solid #000;"></div>
  4.     </div>
  5.     <div class="shapeDiv shapeMoveDiv" style="width: 30px;height: 30px;background: #3e3cd0;position:absolute;top:0px;left:0px;">
  6.         <div style="width:100%;height:100%;box-sizing:border-box;border:2px solid #000;"></div>
  7.     </div>
  8.     <div class="shapeDiv shapeMoveDiv" style="width: 30px;height: 30px;background: #3e3cd0;position:absolute;top:0px;left:0px;">
  9.         <div style="width:100%;height:100%;box-sizing:border-box;border:2px solid #000;"></div>
  10.     </div>
  11.     <div class="shapeDiv shapeMoveDiv" style="width: 30px;height: 30px;background: #3e3cd0;position:absolute;top:0px;left:0px;">
  12.         <div style="width:100%;height:100%;box-sizing:border-box;border:2px solid #000;"></div>
  13.     </div>
  14. </script>

2）全局变量如下

  1. var shapeUnitPx = 30; //格子单元像素
  2. var leftMaxValue = 30 * 10; //300px，小方块最大的移动宽度
  3. var topMaxValue = 30 * 20; //600px，小方块最大的移动高度
  4.  
  5. var leftArr = [0, 0, 0, 0]; //单元格的left值（每个方块都有4个小方块）
  6. var topArr = [0, 0, 0, 0]; //单元格的top值（每个方块都有4个小方块）
  7. var nextIndex = 0; //下一个切换方向下标
  8. var currentIndex = 0; //当前小方块下标
  9.  
  10. var moveLeft = 0; //方块移动的left倍数
  11. var moveTop = 0; //方块移动的top倍数
  12.  
  13. var htmlTemplate = $("#shapeTemplate").html(); //单元格模板
  14.  
  15.  
  16. moveLeft = 5; //每个小方块的left值乘以5
  17. moveTop = -2; //每个小方块的top值乘以-2

4、开始游戏按钮

1）点击开始游戏，默认方块的初始位置为left值的5倍，top的-2倍

2）随机从19种方块里获得1个方块

3）将随机得到的方块下标保存到全局当前方块下标里

4）调用创建方块方法或者移动方块方法

5）同时开启定时器，设置初始状态每隔1秒向下移动一个单元

  1. //===开始===
  2. $(".btnStartDiv").click(function () {
  3.  
  4.     moveLeft = 5;
  5.     moveTop = -2;
  6.  
  7.     var shapeIndex = Math.ceil(Math.random() * 19); //1~19随机出现数字
  8.     currentIndex = shapeIndex;
  9.  
  10.     createShapeOrChangeHtml(shapeIndex);
  11.  
  12.     moveTime = setInterval(autoMoveShape, 1 * 1000); //开启定时器
  13. });

5、创建方块或移动方块

1）根据方块下标，定位到不同的小方块的left和top值计算公式里

2）设置好方块的4个小方块的left和top值后，即可追加方块到游戏面板里

3）或者修改方块在面板的移动位置

  1. //===生成方块形状===
  2. function createShapeOrChangeHtml(shapeIndex) {
  3.  
  4.     //方块形状格子叠加原则：从下到上，从左到右
  5.     //这个规则的目的：为消除方块作为基础条件
  6.  
  7.     //公式创建
  8.     if (shapeIndex == 1) { //O
  9.         nextIndex = 1;
  10.  
  11.         leftArr[3] = (moveLeft - 1) * shapeUnitPx + shapeUnitPx;
  12.         leftArr[2] = (moveLeft - 1) * shapeUnitPx;
  13.         leftArr[1] = (moveLeft - 1) * shapeUnitPx + shapeUnitPx;
  14.         leftArr[0] = (moveLeft - 1) * shapeUnitPx;
  15.  
  16.         topArr[3] = (moveTop - 1) * shapeUnitPx;
  17.         topArr[2] = (moveTop - 1) * shapeUnitPx;
  18.         topArr[1] = (moveTop - 1) * shapeUnitPx + shapeUnitPx;
  19.         topArr[0] = (moveTop - 1) * shapeUnitPx + shapeUnitPx;
  20.     }
  21.     else if (shapeIndex == 2) { //I - 竖线
  22.         nextIndex = 3;
  23.  
  24.         leftArr[3] = (moveLeft - 1) * shapeUnitPx;
  25.         leftArr[2] = (moveLeft - 1) * shapeUnitPx;
  26.         leftArr[1] = (moveLeft - 1) * shapeUnitPx;
  27.         leftArr[0] = (moveLeft - 1) * shapeUnitPx;
  28.  
  29.         topArr[3] = (moveTop - 1) * shapeUnitPx;
  30.         topArr[2] = (moveTop - 1) * shapeUnitPx + shapeUnitPx;
  31.         topArr[1] = (moveTop - 1) * shapeUnitPx + shapeUnitPx * 2;
  32.         topArr[0] = (moveTop - 1) * shapeUnitPx + shapeUnitPx * 3;
  33.     }
  34.     else if (shapeIndex == 3) { //I - 横线
  35.         nextIndex = 2;
  36.  
  37.         leftArr[3] = (moveLeft - 1) * shapeUnitPx;
  38.         leftArr[2] = (moveLeft - 1) * shapeUnitPx + shapeUnitPx;
  39.         leftArr[1] = (moveLeft - 1) * shapeUnitPx + shapeUnitPx * 2;
  40.         leftArr[0] = (moveLeft - 1) * shapeUnitPx + shapeUnitPx * 3;
  41.  
  42.         topArr[3] = (moveTop - 1) * shapeUnitPx;
  43.         topArr[2] = (moveTop - 1) * shapeUnitPx;
  44.         topArr[1] = (moveTop - 1) * shapeUnitPx;
  45.         topArr[0] = (moveTop - 1) * shapeUnitPx;
  46.     }
  47.     else if (shapeIndex == 4) { //S形 - 向右
  48.  
  49.         /*
  50.             0 30 60
  51.             0   3 4
  52.         30 1 2
  53.         60
  54.             */
  55.  
  56.         leftArr[3] = (moveLeft - 1) * shapeUnitPx + shapeUnitPx * 2;
  57.         leftArr[2] = (moveLeft - 1) * shapeUnitPx + shapeUnitPx;
  58.         leftArr[1] = (moveLeft - 1) * shapeUnitPx + shapeUnitPx;
  59.         leftArr[0] = (moveLeft - 1) * shapeUnitPx;
  60.  
  61.         topArr[3] = (moveTop - 1) * shapeUnitPx;
  62.         topArr[2] = (moveTop - 1) * shapeUnitPx;
  63.         topArr[1] = (moveTop - 1) * shapeUnitPx + shapeUnitPx;
  64.         topArr[0] = (moveTop - 1) * shapeUnitPx + shapeUnitPx;
  65.  
  66.         nextIndex = 5;
  67.     }
  68.     else if (shapeIndex == 5) { //S形 - 向下
  69.  
  70.         /*
  71.             0 30 60
  72.             0 4
  73.         30 2 3
  74.         60   1
  75.             */
  76.  
  77.         leftArr[3] = (moveLeft - 1) * shapeUnitPx;
  78.         leftArr[2] = (moveLeft - 1) * shapeUnitPx + shapeUnitPx;
  79.         leftArr[1] = (moveLeft - 1) * shapeUnitPx;
  80.         leftArr[0] = (moveLeft - 1) * shapeUnitPx + shapeUnitPx;
  81.  
  82.         topArr[3] = (moveTop - 1) * shapeUnitPx;
  83.         topArr[2] = (moveTop - 1) * shapeUnitPx + shapeUnitPx;
  84.         topArr[1] = (moveTop - 1) * shapeUnitPx + shapeUnitPx;
  85.         topArr[0] = (moveTop - 1) * shapeUnitPx + shapeUnitPx * 2;
  86.  
  87.         nextIndex = 4;
  88.     }
  89.     else if (shapeIndex == 6) { //Z形 - 向左
  90.  
  91.         /*
  92.             34
  93.             12
  94.             */
  95.  
  96.         leftArr[3] = (moveLeft - 1) * shapeUnitPx + shapeUnitPx;
  97.         leftArr[2] = (moveLeft - 1) * shapeUnitPx;
  98.         leftArr[1] = (moveLeft - 1) * shapeUnitPx + shapeUnitPx * 2;
  99.         leftArr[0] = (moveLeft - 1) * shapeUnitPx + shapeUnitPx;
  100.  
  101.         topArr[3] = (moveTop - 1) * shapeUnitPx;
  102.         topArr[2] = (moveTop - 1) * shapeUnitPx;
  103.         topArr[1] = (moveTop - 1) * shapeUnitPx + shapeUnitPx;
  104.         topArr[0] = (moveTop - 1) * shapeUnitPx + shapeUnitPx;
  105.  
  106.         nextIndex = 7;
  107.     }
  108.     else if (shapeIndex == 7) { //Z形 - 向上
  109.  
  110.         /*
  111.             4
  112.             23
  113.             1
  114.             */
  115.  
  116.         leftArr[3] = (moveLeft - 1) * shapeUnitPx + shapeUnitPx;
  117.         leftArr[2] = (moveLeft - 1) * shapeUnitPx + shapeUnitPx;
  118.         leftArr[1] = (moveLeft - 1) * shapeUnitPx;
  119.         leftArr[0] = (moveLeft - 1) * shapeUnitPx;
  120.  
  121.         topArr[3] = (moveTop - 1) * shapeUnitPx;
  122.         topArr[2] = (moveTop - 1) * shapeUnitPx + shapeUnitPx;
  123.         topArr[1] = (moveTop - 1) * shapeUnitPx + shapeUnitPx;
  124.         topArr[0] = (moveTop - 1) * shapeUnitPx + shapeUnitPx * 2;
  125.  
  126.         nextIndex = 6;
  127.     }
  128.     else if (shapeIndex == 8) { //L形 - 向上
  129.  
  130.         /*
  131.             0 30 60
  132.             0 4
  133.         30 3
  134.         60 1 2
  135.             */
  136.  
  137.         leftArr[3] = (moveLeft - 1) * shapeUnitPx;
  138.         leftArr[2] = (moveLeft - 1) * shapeUnitPx;
  139.         leftArr[1] = (moveLeft - 1) * shapeUnitPx + shapeUnitPx;
  140.         leftArr[0] = (moveLeft - 1) * shapeUnitPx;
  141.  
  142.         topArr[3] = (moveTop - 1) * shapeUnitPx;
  143.         topArr[2] = (moveTop - 1) * shapeUnitPx + shapeUnitPx;
  144.         topArr[1] = (moveTop - 1) * shapeUnitPx + shapeUnitPx * 2;
  145.         topArr[0] = (moveTop - 1) * shapeUnitPx + shapeUnitPx * 2;
  146.  
  147.         nextIndex = 9;
  148.     }
  149.     else if (shapeIndex == 9) { //L形 - 向右
  150.  
  151.         /*
  152.             0 30 60
  153.             0 1 2 3
  154.         30 4
  155.         60
  156.             */
  157.  
  158.         leftArr[3] = (moveLeft - 1) * shapeUnitPx;
  159.         leftArr[2] = (moveLeft - 1) * shapeUnitPx + shapeUnitPx * 2;
  160.         leftArr[1] = (moveLeft - 1) * shapeUnitPx + shapeUnitPx;
  161.         leftArr[0] = (moveLeft - 1) * shapeUnitPx;
  162.  
  163.         topArr[3] = (moveTop - 1) * shapeUnitPx + shapeUnitPx;
  164.         topArr[2] = (moveTop - 1) * shapeUnitPx;
  165.         topArr[1] = (moveTop - 1) * shapeUnitPx;
  166.         topArr[0] = (moveTop - 1) * shapeUnitPx;
  167.  
  168.         nextIndex = 10;
  169.     }
  170.     else if (shapeIndex == 10) { //L形 - 向下
  171.  
  172.         /*
  173.             0 30 60
  174.             0 3 4
  175.         30   2
  176.         60   1
  177.             */
  178.  
  179.         leftArr[3] = (moveLeft - 1) * shapeUnitPx + shapeUnitPx;
  180.         leftArr[2] = (moveLeft - 1) * shapeUnitPx;
  181.         leftArr[1] = (moveLeft - 1) * shapeUnitPx + shapeUnitPx;
  182.         leftArr[0] = (moveLeft - 1) * shapeUnitPx + shapeUnitPx;
  183.  
  184.         topArr[3] = (moveTop - 1) * shapeUnitPx;
  185.         topArr[2] = (moveTop - 1) * shapeUnitPx;
  186.         topArr[1] = (moveTop - 1) * shapeUnitPx + shapeUnitPx;
  187.         topArr[0] = (moveTop - 1) * shapeUnitPx + shapeUnitPx * 2;
  188.  
  189.         nextIndex = 11;
  190.     }
  191.     else if (shapeIndex == 11) { //L形 - 向左
  192.  
  193.         /*
  194.             0 30 60
  195.             0     4
  196.         30 1 2 3
  197.         60
  198.             */
  199.  
  200.         leftArr[3] = (moveLeft - 1) * shapeUnitPx + shapeUnitPx * 2;
  201.         leftArr[2] = (moveLeft - 1) * shapeUnitPx + shapeUnitPx * 2;
  202.         leftArr[1] = (moveLeft - 1) * shapeUnitPx + shapeUnitPx;
  203.         leftArr[0] = (moveLeft - 1) * shapeUnitPx;
  204.  
  205.         topArr[3] = (moveTop - 1) * shapeUnitPx;
  206.         topArr[2] = (moveTop - 1) * shapeUnitPx + shapeUnitPx;
  207.         topArr[1] = (moveTop - 1) * shapeUnitPx + shapeUnitPx;
  208.         topArr[0] = (moveTop - 1) * shapeUnitPx + shapeUnitPx;
  209.  
  210.         nextIndex = 8;
  211.     }
  212.     else if (shapeIndex == 12) { //J形 - 向上
  213.  
  214.         /*
  215.             4
  216.             3
  217.             12
  218.             */
  219.  
  220.         leftArr[3] = (moveLeft - 1) * shapeUnitPx + shapeUnitPx;
  221.         leftArr[2] = (moveLeft - 1) * shapeUnitPx + shapeUnitPx;
  222.         leftArr[1] = (moveLeft - 1) * shapeUnitPx + shapeUnitPx;
  223.         leftArr[0] = (moveLeft - 1) * shapeUnitPx;
  224.  
  225.         topArr[3] = (moveTop - 1) * shapeUnitPx;
  226.         topArr[2] = (moveTop - 1) * shapeUnitPx + shapeUnitPx;
  227.         topArr[1] = (moveTop - 1) * shapeUnitPx + shapeUnitPx * 2;
  228.         topArr[0] = (moveTop - 1) * shapeUnitPx + shapeUnitPx * 2;
  229.  
  230.         nextIndex = 13;
  231.     }
  232.     else if (shapeIndex == 13) { //J形 - 向右
  233.  
  234.         /*
  235.             0 30 60
  236.             0 4
  237.         30 1 2 3
  238.         60
  239.             */
  240.  
  241.         leftArr[3] = (moveLeft - 1) * shapeUnitPx;
  242.         leftArr[2] = (moveLeft - 1) * shapeUnitPx + shapeUnitPx * 2;
  243.         leftArr[1] = (moveLeft - 1) * shapeUnitPx + shapeUnitPx;
  244.         leftArr[0] = (moveLeft - 1) * shapeUnitPx;
  245.  
  246.         topArr[3] = (moveTop - 1) * shapeUnitPx;
  247.         topArr[2] = (moveTop - 1) * shapeUnitPx + shapeUnitPx;
  248.         topArr[1] = (moveTop - 1) * shapeUnitPx + shapeUnitPx;
  249.         topArr[0] = (moveTop - 1) * shapeUnitPx + shapeUnitPx;
  250.  
  251.         nextIndex = 14;
  252.     }
  253.     else if (shapeIndex == 14) { //J形 - 向下
  254.  
  255.         /*
  256.             0 30 60
  257.             0 3 4
  258.         30 2
  259.         60 1
  260.             */
  261.  
  262.         leftArr[3] = (moveLeft - 1) * shapeUnitPx + shapeUnitPx;
  263.         leftArr[2] = (moveLeft - 1) * shapeUnitPx;
  264.         leftArr[1] = (moveLeft - 1) * shapeUnitPx;
  265.         leftArr[0] = (moveLeft - 1) * shapeUnitPx;
  266.  
  267.         topArr[3] = (moveTop - 1) * shapeUnitPx;
  268.         topArr[2] = (moveTop - 1) * shapeUnitPx;
  269.         topArr[1] = (moveTop - 1) * shapeUnitPx + shapeUnitPx;
  270.         topArr[0] = (moveTop - 1) * shapeUnitPx + shapeUnitPx * 2;
  271.  
  272.         nextIndex = 15;
  273.     }
  274.     else if (shapeIndex == 15) { //J形 - 向左
  275.  
  276.         /*
  277.             0 30 60
  278.             0 2 3 4
  279.         30     1
  280.         60
  281.             */
  282.  
  283.         leftArr[3] = (moveLeft - 1) * shapeUnitPx + shapeUnitPx * 2;
  284.         leftArr[2] = (moveLeft - 1) * shapeUnitPx + shapeUnitPx;
  285.         leftArr[1] = (moveLeft - 1) * shapeUnitPx;
  286.         leftArr[0] = (moveLeft - 1) * shapeUnitPx + shapeUnitPx * 2;
  287.  
  288.         topArr[3] = (moveTop - 1) * shapeUnitPx;
  289.         topArr[2] = (moveTop - 1) * shapeUnitPx;
  290.         topArr[1] = (moveTop - 1) * shapeUnitPx;
  291.         topArr[0] = (moveTop - 1) * shapeUnitPx + shapeUnitPx;
  292.  
  293.         nextIndex = 12;
  294.     }
  295.     else if (shapeIndex == 16) { //T形 - 向下
  296.  
  297.         /*
  298.             0 30 60
  299.             0 2 3 4
  300.         30   1
  301.         60
  302.             */
  303.  
  304.         leftArr[3] = (moveLeft - 1) * shapeUnitPx + shapeUnitPx * 2;
  305.         leftArr[2] = (moveLeft - 1) * shapeUnitPx + shapeUnitPx;
  306.         leftArr[1] = (moveLeft - 1) * shapeUnitPx;
  307.         leftArr[0] = (moveLeft - 1) * shapeUnitPx + shapeUnitPx;
  308.  
  309.         topArr[3] = (moveTop - 1) * shapeUnitPx;
  310.         topArr[2] = (moveTop - 1) * shapeUnitPx;
  311.         topArr[1] = (moveTop - 1) * shapeUnitPx;
  312.         topArr[0] = (moveTop - 1) * shapeUnitPx + shapeUnitPx;
  313.  
  314.         nextIndex = 17;
  315.     }
  316.     else if (shapeIndex == 17) { //T形 - 向左
  317.  
  318.         /*
  319.             0 30 60
  320.             0   4
  321.         30 2 3
  322.         60   1
  323.             */
  324.  
  325.         leftArr[3] = (moveLeft - 1) * shapeUnitPx + shapeUnitPx;
  326.         leftArr[2] = (moveLeft - 1) * shapeUnitPx + shapeUnitPx;
  327.         leftArr[1] = (moveLeft - 1) * shapeUnitPx;
  328.         leftArr[0] = (moveLeft - 1) * shapeUnitPx + shapeUnitPx;
  329.  
  330.         topArr[3] = (moveTop - 1) * shapeUnitPx;
  331.         topArr[2] = (moveTop - 1) * shapeUnitPx + shapeUnitPx;
  332.         topArr[1] = (moveTop - 1) * shapeUnitPx + shapeUnitPx;
  333.         topArr[0] = (moveTop - 1) * shapeUnitPx + shapeUnitPx * 2;
  334.  
  335.         nextIndex = 18;
  336.     }
  337.     else if (shapeIndex == 18) { //T形 - 向上
  338.  
  339.         /*
  340.             0 30 60
  341.             0   4
  342.         30 1 2 3
  343.         60
  344.             */
  345.  
  346.         leftArr[3] = (moveLeft - 1) * shapeUnitPx + shapeUnitPx;
  347.         leftArr[2] = (moveLeft - 1) * shapeUnitPx + shapeUnitPx * 2;
  348.         leftArr[1] = (moveLeft - 1) * shapeUnitPx + shapeUnitPx;
  349.         leftArr[0] = (moveLeft - 1) * shapeUnitPx;
  350.  
  351.         topArr[3] = (moveTop - 1) * shapeUnitPx;
  352.         topArr[2] = (moveTop - 1) * shapeUnitPx + shapeUnitPx;
  353.         topArr[1] = (moveTop - 1) * shapeUnitPx + shapeUnitPx;
  354.         topArr[0] = (moveTop - 1) * shapeUnitPx + shapeUnitPx;
  355.  
  356.         nextIndex = 19;
  357.     }
  358.     else if (shapeIndex == 19) { //T形 - 向右
  359.  
  360.         /*
  361.             0 30
  362.             0 4
  363.         30 2 3
  364.         60 1
  365.             */
  366.  
  367.         leftArr[3] = (moveLeft - 1) * shapeUnitPx;
  368.         leftArr[2] = (moveLeft - 1) * shapeUnitPx + shapeUnitPx;
  369.         leftArr[1] = (moveLeft - 1) * shapeUnitPx;
  370.         leftArr[0] = (moveLeft - 1) * shapeUnitPx;
  371.  
  372.         topArr[3] = (moveTop - 1) * shapeUnitPx;
  373.         topArr[2] = (moveTop - 1) * shapeUnitPx + shapeUnitPx;
  374.         topArr[1] = (moveTop - 1) * shapeUnitPx + shapeUnitPx;
  375.         topArr[0] = (moveTop - 1) * shapeUnitPx + shapeUnitPx * 2;
  376.  
  377.         nextIndex = 16;
  378.     }
  379.  
  380.     //===方块是否可移动判断===
  381.     IsMove(function () {
  382.         if ($(".shapeMoveDiv").html() == undefined) { //下一个方法（新增方块到游戏面板）
  383.  
  384.             var html = '';
  385.  
  386.             for (var i = 0; i < leftArr.length; i++) {
  387.                 var html1 = htmlTemplate;
  388.                 html += $(html1).css({ "left": leftArr[i] + "px", "top": topArr[i] + "px" }).prop('outerHTML');
  389.             }
  390.  
  391.             $(".playDiv").append(html);
  392.         }
  393.         else { //移动当前方块
  394.  
  395.             for (var i = 0; i < leftArr.length; i++) {
  396.  
  397.                 $(".shapeMoveDiv").eq(i).css({ "left": leftArr[i] + "px", "top": topArr[i] + "px" });
  398.             }
  399.         }
  400.  
  401.         tempDisplay();
  402.     });
  403.     //===/方块是否可移动判断===
  404. }

6、方块是否可移动判断

1）设置一个全局变量，保存已经在游戏面板占据空间的小方块的坐标

2）首先对方块进行右边界的判断，如果方块有一个小方块的left值大于等于了游戏面板的最大宽度，那么就停止向右边移动

3）到达底部判断，如果方块有一个小方块的top值超过了游戏面板的最大宽度，那么就停止向下移动，并移除当前方块移动标志的class值

4）如果游戏面板已经有方块存在，那么根据前面已经保存好的方块坐标来判断，如果存在相同坐标，那么停止方块移动，并将当前方块的坐标保存到全局变量里

5）如果通过上面步骤都不满足，那么就是可以移动，否则就进行下一步操作

6）如果方块触发了停止，那么就停止定时器向下移动方法

7）如果当前停止移动的方块的top值有出现负数，那么就结束游戏

  1. //===判断是否可以移动===
  2. var havePositionArr = [];
  3. function IsMove(call) {
  4.  
  5.     var flag = 1;
  6.  
  7.     //判断右边边界
  8.     for (var i = 0; i < leftArr.length; i++) {
  9.  
  10.         var _v = leftArr[i];
  11.         if (_v >= leftMaxValue) {
  12.             flag = 0;
  13.             moveLeft -= 1;
  14.         }
  15.     }
  16.     if (!flag) {
  17.         return;
  18.     }
  19.  
  20.     //到达了底部，不可再移动
  21.     for (var i = 0; i < leftArr.length; i++) {
  22.  
  23.         var _v = topArr[i];
  24.         if (_v >= topMaxValue) {
  25.             flag = 0;
  26.         }
  27.     }
  28.  
  29.     //再判断是否存在的单元格
  30.     if (havePositionArr.length > 0) {
  31.         for (var i = 0; i < leftArr.length; i++) {
  32.             var currentPosition = leftArr[i] + "," + topArr[i];
  33.             for (var j = 0; j < havePositionArr.length; j++) {
  34.                 var havaPosition = havePositionArr[j];
  35.                 if (currentPosition == havaPosition) {
  36.                     flag = 0;
  37.                 }
  38.             }
  39.         }
  40.     }
  41.  
  42.     //判断
  43.     if (flag) { //可以移动方块
  44.  
  45.         call();
  46.     }
  47.     else { //停止移动方块
  48.  
  49.         //===先停止定时器===
  50.         clearInterval(moveTime); 
  51.  
  52.         //===移除移动标志class===
  53.         var isFinal = 0;
  54.         for (var i = 0; i < $(".shapeMoveDiv").length; i++) {
  55.  
  56.             havePositionArr.push($(".shapeMoveDiv").eq(i).css("left").replace("px", "") + "," + $(".shapeMoveDiv").eq(i).css("top").replace("px", ""));
  57.  
  58.             if (parseInt($(".shapeMoveDiv").eq(i).css("top").replace("px", "")) < 0) {
  59.                 isFinal = 1;
  60.             }
  61.         }
  62.         $(".shapeMoveDiv").removeClass("shapeMoveDiv");
  63.         if (isFinal) {
  64.  
  65.             alert("游戏结束！");
  66.             return;
  67.         }
  68.         //===/移除移动标志class===
  69.  
  70.         //===再检查是否有可移除的方块==
  71.         checkRemoveFun();
  72.     }
  73. }

7、检查是否有方块可消除

判断的原则

1）通过每个小方块的top值为分组，如果top值相同，且达到10个方块，那么说明是同一行，即可移除方块

2）移除方块后，再根据移除后的方块的top值来判断，小于这个top的上面的所有小方块就需要增加top值往下叠加

3）最后就是触发点击开始按钮，即可下一个方块

  1. //===分段判断===
  2. function checkRemoveFun() {
  3.  
  4.     //检查是否可以消除了
  5.     var length = $(".shapeDiv").length;
  6.     var tempArr = [];
  7.     var flag = '';
  8.     var currentTop = '';
  9.     for (var n = 0; n < length; n++) {
  10.         currentTop = $(".shapeDiv").eq(n).css("top");
  11.  
  12.         if (tempArr.length <= 0) {
  13.  
  14.             flag += currentTop + "|";
  15.             tempArr.push({ key: currentTop, value: 1 });
  16.         }
  17.         else {
  18.  
  19.             if (flag.indexOf(currentTop) < 0) {
  20.  
  21.                 flag += currentTop + "|";
  22.                 tempArr.push({ key: currentTop, value: 1 });
  23.             }
  24.             else {
  25.  
  26.                 for (var i = 0; i < tempArr.length; i++) {
  27.  
  28.                     if (tempArr[i]['key'] == currentTop) {
  29.  
  30.                         var _vvv = parseInt(tempArr[i]['value']) + 1;
  31.                         tempArr[i]['value'] = _vvv;
  32.                     }
  33.                 }
  34.             }
  35.         }
  36.     }
  37.  
  38.     //循环移除10个单元格
  39.     var removeTop = '';
  40.     var removeRow = 0;
  41.     for (var i = 0; i < tempArr.length; i++) {
  42.         if (parseInt(tempArr[i]['value']) >= 10) {
  43.  
  44.             removeTop = tempArr[i]['key'];
  45.  
  46.             //先消除完再移动
  47.             for (var c = 0; c < 10; c++) {
  48.                 for (var n = 0; n < length; n++) {
  49.                     currentTop = $(".shapeDiv").eq(n).css("top");
  50.                     if (currentTop == removeTop) {
  51.                         $(".shapeDiv").eq(n).remove();
  52.                     }
  53.                 }
  54.             }
  55.                     
  56.             removeRow += 1;
  57.         }
  58.     }
  59.  
  60.     //上一层的top值向下
  61.     for (var n = 0; n < $(".shapeDiv").length; n++) {
  62.         currentTop = $(".shapeDiv").eq(n).css("top");
  63.         if (parseInt(currentTop.replace("px", "")) < parseInt(removeTop.replace("px", ""))) {
  64.             $(".shapeDiv").eq(n).css("top", (parseInt(currentTop.replace("px", "")) + shapeUnitPx * removeRow) + "px");
  65.         }
  66.     }
  67.  
  68.     //再循环保存现有的单元格
  69.     if (removeTop != '') {
  70.         havePositionArr = [];
  71.         for (var i = 0; i < $(".shapeDiv").length; i++) {
  72.  
  73.             havePositionArr.push($(".shapeDiv").eq(i).css("left").replace("px", "") + "," + $(".shapeDiv").eq(i).css("top").replace("px", ""));
  74.         }
  75.     }
  76.  
  77.     $(".btnStartDiv").trigger('click'); //触发开始，下一个方块
  78. }

8、到此游戏基础逻辑完成

1）方块随机出现

2）定时器自动将方块往下移动

3）边界判断

4）方块停止判断

5）方块消除判断

9、后续可在基础逻辑上发挥了

1）消除后，增加分数

2）方块动态变化颜色

3）加上消除方块的音效

4）加上背景音乐

5）更换背景皮肤等等可任意发挥的功能

总结

这里提供的是一个开发思路和方向，方法和算法不一定是最佳的，我相信大家通过自己的方式也能快速开发出来

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小舞很执着/article/detail/862208
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号