俄罗斯方块游戏——Javascript

目录

 

一、背景

二、实现思路

三、具体实现

1.创建游戏界面

2. 创建 一个图形对象

3.移动

4.代码优化：

5.图形变换

6. 消除符合条件的行

---

一、背景

就是最近面试遇到的，当时也就是大概写了一些思路，所以下来后继续完成，很久没面试过，发现表达能力太差，所以，后续会将我了解的知识写出来，相当于自己整理一遍，下次遇到也好组织语言。

二、实现思路

1. 将整个游戏界面看着是多个小正方形拼接而成

2. 运动中的图形由游戏界面对应的四个正方形渲染颜色构成，每个图形都记录需要染色的坐标

3.移动，相当于修改图形中正方形对应的坐标值，然后重新渲染游戏界面

4.变换图形，指定每个图形变换的下个图形的对象

三、具体实现

1.创建游戏界面

由10*20个正方形组成，并且给每个正方形编号“data-index”,Js代码如下

        //创建游戏区域
        for (let i = 0; i < 200; i++) {
            $(".main").append('<div class="split" data-index="' + i + '"></div>');
        }

通过设置div高度，宽度，采用flex布局，效果如下：

2. 创建 一个图形对象

            //p1-p4 分别表示构成图形四个正方形的坐标【从左到右，从上到下】
            //输入值 x,y 表示创建图标的第一个正方形位置
            function LR2(x, y) {
                //当前坐标位置
                this.Position = {
                    p1: { x: x, y: y },
                    p2: { x: x, y: y + 1 },
                    p3: { x: x - 1, y: y + 2 },
                    p4: { x: x, y: y + 2 }
                };
                //显示出图像
                this.Show = function () {
                    //找到4个方块，然后添加css
                    $.each(this.Position, (i, item) => {
                        $('div[data-index="' + (item.x + item.y * 10 )+ '"]').addClass("show");
                    });
                    return this;
                }
                
            }

        var obj = new LR2(4, 0).Show();

如下图：

3.移动

就是改变图形的坐标，重新渲染，在渲染前要进行边界判断。

实现思路:

3.1 定义坐标对象 NextPosition,记录如果移动后新坐标

3.2 定义计算移动后坐标的方法：ChangeNextPosition(x,y) //传入移动后的第一个方块的坐标

3.3 定义边界检查方法：MoveCheck, 检查NextPostion新坐标是否超出界限

 3.3.1 判断NextPosition 中所有x值是否在0到10之间，y值是否在0到20之间

 3.3.2 判断NextPosition和Position中没有重复的正方形是否已经有了 “Show”样式，有表示有其它图形挡住了，无法移动

3.4 若边界检查成功，清除Position中正方形的坐标位置的Show样式，给NextPostion中正方形加上Show样式。否则移动失败

3.5 移动成功将NextPostion值赋给Postion,否则将NextPostion值还原为Postion

实现代码:举例向下移动，也就是将第一个方块坐标y值加1，通过ChangeNextPosition计算新的坐标

        //p1-p4 分别表示构成图形四个正方形的坐标【从左到右，从上到下