基于html+css+js开发的俄罗斯方块前端游戏设计

- 日理万妓 2024-03-16 22:50 48阅读 0赞

[源码下载地址][Link 1]：https://download.csdn.net/download/sheziqiong/87946018  
[源码下载地址][Link 1]：https://download.csdn.net/download/sheziqiong/87946018

## **一、整体架构** ##

### 1.1项目介绍 ###

该项目是基于html+css+js开发的俄罗斯方块前端游戏。

### 1.2 项目架构 ###

本项目总体分为四个文件夹:html,css,js,img。img包含了背景图片。html中只有index.html，负责游戏的展示。css文件中只有index.css，负责对index.html的美化。游戏具体逻辑包含在js文件中。

js文件夹中，const.js定义了整个游戏的常量，例如游戏长宽，方块颜色，键盘的键与数值等。tetris.js代表着一种特点的方块类型,方块位置，也包含了方块变换等。controller.js执行了游戏的具体逻辑，如控制方块下落，方块变体，是否得分，游戏是否结束等等。view.js负责游戏区与下一方块区表格的动态生成以及游戏方块的绘制等等。

![在这里插入图片描述][f287f6d451e84c84bd82bd1a0c38b55e.png_pic_center]  
![在这里插入图片描述][2b9c68a7f0d24a108a2f20f90da2a8bb.png_pic_center]

## **二、项目实现** ##

### 2.1 index.html实现 ###

index.html中首先引入了相关的css文件以及js文件。主体通过div将页面分为三部分：左边为游戏区域,右边为辅助区域(右上角为下一方块预告区,右下角为操作说明区)。

在游戏区以及下一方块预告区，都只放了一个table标签，并且赋予一个id，之后通过index.css控制他的样式，通过view.js动态往表格添加行列，以可以根据传入值动态改变游戏区的长宽。预告区则是一些文本，其中的分数和速度则有id，可以在js中根据游戏进度动态改变。

![在这里插入图片描述][2d54e3e44ce44cf380c506067747ac28.png_pic_center]  
![在这里插入图片描述][7f5fc15f512c432e90d8e17d358aef60.png_pic_center]

### 2.2 index.css实现 ###

主要设置了整体的背景，以及控制了游戏区，下一方块预告区，操作提示区的相对位置。以及游戏区，下一方块区中每个小方格的样式。

![在这里插入图片描述][c587279d87ab4b608662154b461974c5.png_pic_center]  
![在这里插入图片描述][720174e461514444bf170d776da6142c.png_pic_center]

### 2.3const.js实现 ###

该文件定义了整体程序需要用到的一些常量，一是为了便于修改，二是通过字符串代替数字，便于代码阅读。首先定义了游戏主界面的宽高以及下一方块提示区的宽高。其次定义了初始方块产生的位置。然后定义了不同种类的方块对应的字符串，例如WALL代表墙。还定义了使用到的键盘的键与值的对应关系。最后定义了使用到的颜色。

![在这里插入图片描述][a2013cf01a3f4c13b534b19b0c97d480.png_pic_center]  
![在这里插入图片描述][d835aceb3e1741518829bf07f1bd1de4.png_pic_center]

### 2.4 tetris.js实现 ###

定义二维位置坐标类,方便坐标表示。然后定义了方块类，包含了重要点坐标，方块类型，方块颜色，整体形状坐标。

众所周知，一个整体的方块由四个原子方块组成。所以重要点坐标标记了该整体方块的一个点的位置，然后其他三个点则可以通过该重要点的坐标以及该方块类型得到（通过makeTetris（）函数生成）。每个整体方块的颜色是随机生成的。

![在这里插入图片描述][19e35757fad341c193f9f7ebe8f9928e.png_pic_center]  
![在这里插入图片描述][22a115a11c564c45b7aef9425626bf52.png_pic_center]

makeTetris（）函数则就是根据上述的重要点坐标（x,y）以及方块类型flag来生成。俄罗斯方块一共21种类型，对应每种类型生成他四个点的坐标并存储在数组中。

![在这里插入图片描述][fdc5ea440bd641aaafd9dc577ba397e8.png_pic_center]  
![在这里插入图片描述][6ca1918e695b45b98a1949bcf652c3c9.png_pic_center]

changeTetris（）函数是为了支持方块变形而存在的。首先改变flag到他的下一个转体的flag。因为除了田字形只有一种类型外，其他四个为一组，所以可以简单的操作即可得到转变后的flag。得到之后，调用之前的makeTetris（）即可得到转变后的整体方块的四个坐标。

![在这里插入图片描述][a595c9a60cf84823b9050799690ce73b.png_pic_center]  
![在这里插入图片描述][97c41e33c48d4e93aa2167b62996297f.png_pic_center]

rechangeTetris（）函数是changeTetris（）函数的逆运算，为的是模拟转体后发现空间不够则要转回原本的形状。实现起来差不多，只是形状改变的方向不一样。

![在这里插入图片描述][0e91c86f9d254218b6a692cb139d9dde.png_pic_center]  
![在这里插入图片描述][d34b3f80a744449f87f6a788279d97a2.png_pic_center]

### 2.5 view.js实现 ###

主要是负责图像的绘制，即往表中根据const.js中定义的宽高，动态的生成表格的行和列，代表了每个小方块。还绘制了小方块的颜色。

首先，定义了游戏区，下一方块预告区（以下简称next区）的二维数组，之后基本通过操作二维数组来实现功能。![在这里插入图片描述][fd9946d5073d4546abb9046aee258a7d.png_pic_center]

初始化函数init（）。负责将游戏区和next区的二维数组初始化。游戏区一部分初始化为EMPTY代表此时没有方块，边缘初始化为WALL，代表是墙。next区则全部初始化为EMPTY。

![在这里插入图片描述][76900006291841cdabd188e68600815b.png_pic_center]  
![在这里插入图片描述][feb226d286164296ab6275c13a993a09.png_pic_center]

append（）函数。负责在屏幕上动态添加表格，即根据const定义的宽高往游戏区，next区动态添加对应的表格。

![在这里插入图片描述][a065c625715943fbac2c4836eb9ee9ed.png_pic_center]

draw（）函数。负责绘制游戏区的方块颜色，根据不同种类的方块（空白，墙，已经落下的，正在落下的），绘制不同的颜色。

![在这里插入图片描述][9bed6dc6cf944c4dafa2155d4527f580.png_pic_center]

drawSmall（）函数。负责next区的绘图。和draw（）原理一样。

![在这里插入图片描述][4c92ba65c0f844a99e6f4bccc42317c7.png_pic_center]

### 2.6 controller.js实现 ###

该js文件负责游戏的具体逻辑实现。首先定义了一些全局变量。例如当前方块类型flag，下一方块类型nextFlag。当前方块tetris，下一方块nextTetris。以及两个变量movable，gameOver表示是否能移动，是否游戏结束。以及两个变量speed，scope代表速度和得分。最后moveDownId是控制方块不断下移函数moveDown的定时器的返回值，为了能停止定时器，调整速度等等。

![在这里插入图片描述][d274c872e19a4a74a0c513d54e93e905.png_pic_center]

window.onload（）函数。是该js文件的入口，当html页面一加载就进入该函数。他调用了之后用到的函数，大概逻辑是：先初始化游戏区，next区的二维数组，然后将初始的表格给动态添加好。随后就绘制游戏区和next区的方块。随后就调用定时器，每隔一段时间调用moveDown函数，让当前方块下移。最后还添加了事件监听。

![在这里插入图片描述][2e14c57d464447dcaede13d659bbc871.png_pic_center]

addEventListener（）函数。添加键盘事件监听。根据不同的键盘按键，采取对应的措施。如果是UP，则方块先变形，如果不能变形，则回退。如果是DOWN，则让方块向下移动一位，且调用makeTetris()函数，让核心小方块之外的其他三个小方块坐标也发生改变，同样的，如果是不能向下移动，则取消刚刚的操作。LEFT，RIGHT函数以此类推。SPACE，则简单的将moveable=！moveable就实现了暂停。而±号则改变速度，首先先把speed变量做相应的改变然后先通过之前提到的定时器ID：moveDownId来停止movedown函数的定时器，再新建一个定时器（因为不这样的话，定时器的速度会按照之前的速度，即不会改变）。同时，获取html上的对应speed元素，并且修改值。

![在这里插入图片描述][bdd40a12c0404294b1b5172d58c0ab1e.png_pic_center]  
![在这里插入图片描述][c3bf20b1191e4f09ab29717f49edeec2.png_pic_center]  
![在这里插入图片描述][05acb725020d4056a877f75b5fb85f8e.png_pic_center]

moveDown()函数：之前所提到的，就是通过定时器调用moveDown()函数实现方块的自动下落，是一个比较关键的函数。

该函数首先会判断，如果没有暂停，则将tetris的核心小方块x坐标下移，并且将其他三个小方块也下移。随后判断是否可移动，如果是不可移动的，说明该方块已经落到了下面，则调用newStart（）函数生成新的方块继续。如果是可以移动的，则调用updateBoard()函数更新方块位置，并且通过draw（）函数绘制当前方块情况。

![在这里插入图片描述][2398186e48944c2b9ab7b1e553f676da.png_pic_center]

updateBoard()函数：负责每次方块下落时将游戏区的二维数组更新，具体逻辑是先将数组中值等于NEW，即刚刚落下的给赋值为EMPTY。再将当前tetris的四个小方块位置坐标标记为NEW。

![在这里插入图片描述][c9e2bf1fc8c54542963064b19f9cdb1b.png_pic_center]

isMovable()函数：负责碰撞检测。具体做法是，对方块中的每一个小方块，首先判断是否数组越界，然后判断坐标所在位置是否是OLD或者WALL，是则返回false，代表不能移动。（因为碰撞检测是在updateBoard()之前，所以还不会覆盖）。

![在这里插入图片描述][8224a95457ab4d56a78e994e8a48ccf7.png_pic_center]

newStart()函数：当一个方块下落到不能继续下落时调用该方法。首先将方块整体上移一格，以抵消之前的下移操作。随后更新方块，将此方块变成已下落状态。并且此时还调用clearLine()进行满行清空操作。最后还判断游戏是否结束，结束则调用newGame（）函数进行相关清理工作，未结束则把之前的nextTetris变成当前的tetris，并且重新生成下一方块并展示。

![在这里插入图片描述][e573f9f5597246b6aba35b6f521f7853.png_pic_center]

newGame()函数：初始化数组，重新绘图，并且终止定时器。

isOver()函数：用于判断游戏是否结束，具体是查看游戏区的顶部是否已经有了已经落下的方块，或者是应该落下新方块的位置是否已经有了方块。

![在这里插入图片描述][ffa34edebac1486e9cc509987db4af34.png_pic_center]

clearLine()函数则负责消除满行。具体做法是，从游戏区的底部往上进行扫描操作，并且计算每一行的方块数，如果某一行满了，则让该行清空。并且让这一行上面的所有方块都不断下移，把空出来的位置填满，并且又从底部重新开始扫描（因为可能消去之后下面的区域又全满了）。最后更新分数，并且展示在屏幕上。

![在这里插入图片描述][40255050e8bc43b1b9d741993931d6df.png_pic_center]

## **三、项目展示** ##

初始页面：

![在这里插入图片描述][9598d331b87f43008211c5258b7e76f9.png_pic_center]

消除一行并且改变了速度的页面：

![在这里插入图片描述][4a0f647e7d9f4a3d87fcf5196bf09ba4.png_pic_center]  
[源码下载地址][Link 1]：https://download.csdn.net/download/sheziqiong/87946018  
[源码下载地址][Link 1]：https://download.csdn.net/download/sheziqiong/87946018

[Link 1]: https://download.csdn.net/download/sheziqiong/87946018
[f287f6d451e84c84bd82bd1a0c38b55e.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/eaff0d3d885144e7b2d376e2f253df36.png
[2b9c68a7f0d24a108a2f20f90da2a8bb.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/5a024e3724554e9aa31b7ea7c0e908e8.png
[2d54e3e44ce44cf380c506067747ac28.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/fa17e2d511f6424bade0847256415951.png
[7f5fc15f512c432e90d8e17d358aef60.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/e6a785010e024e618bbc1cf3ca02211b.png
[c587279d87ab4b608662154b461974c5.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/7455b30fd9c149b0aec9e8a9350d9f66.png
[720174e461514444bf170d776da6142c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/d76a11a745f743acb69f51646a573af4.png
[a2013cf01a3f4c13b534b19b0c97d480.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/83138b7c78e84e3b8ed1d10ff0b5ad5d.png
[d835aceb3e1741518829bf07f1bd1de4.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/098ed1d173d2404a839ad4980dfd1779.png
[19e35757fad341c193f9f7ebe8f9928e.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/2eb7928f518940d8a8091e01fa217873.png
[22a115a11c564c45b7aef9425626bf52.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/4a8cba5601704b0283d202aa45bbd3fa.png
[fdc5ea440bd641aaafd9dc577ba397e8.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/01f25a48c2104eeb99cae9f83aff640f.png
[6ca1918e695b45b98a1949bcf652c3c9.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/6f527d839bb4456e9a8c913f1c2b5707.png
[a595c9a60cf84823b9050799690ce73b.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/c31e4fe65ec5461b8a0632addfcf8ca3.png
[97c41e33c48d4e93aa2167b62996297f.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/db6bcd82feea49a483f48e00c019d1e7.png
[0e91c86f9d254218b6a692cb139d9dde.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/1a0e38d591fc4bf4ac739044277b3f66.png
[d34b3f80a744449f87f6a788279d97a2.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/d947b142d6f54fb28d5ac7a340c37bee.png
[fd9946d5073d4546abb9046aee258a7d.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/26fa87eec0e74696b7e012e728b34e29.png
[76900006291841cdabd188e68600815b.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/a3cd1d0dcd6c4e49b3cee5ba7ddeeff2.png
[feb226d286164296ab6275c13a993a09.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/9b7ac62593c146678c0249e10a05f2fa.png
[a065c625715943fbac2c4836eb9ee9ed.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/fcba974f41204dcb90d4d44ab10e934d.png
[9bed6dc6cf944c4dafa2155d4527f580.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/279869f87f1f4c5594ec67349388303c.png
[4c92ba65c0f844a99e6f4bccc42317c7.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/b6f9dc824ad54e738f8a84fab19063ee.png
[d274c872e19a4a74a0c513d54e93e905.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/835855f44f38417e9b3d52c9d901f709.png
[2e14c57d464447dcaede13d659bbc871.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/a92c82441fd645fd970443b29d86072e.png
[bdd40a12c0404294b1b5172d58c0ab1e.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/85daed06784e4bdca4c7c3c0c3898724.png
[c3bf20b1191e4f09ab29717f49edeec2.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/820ebb020c11466fbdb75b7e132e2355.png
[05acb725020d4056a877f75b5fb85f8e.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/ece16b5f07e1466a9fdf20d56ac372a2.png
[2398186e48944c2b9ab7b1e553f676da.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/52813c028f044c6bb97c34c2b22f97a4.png
[c9e2bf1fc8c54542963064b19f9cdb1b.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/78d2307da5544516b958858cf98cb02a.png
[8224a95457ab4d56a78e994e8a48ccf7.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/617a8c237fe14c2398285ed8c8ec16de.png
[e573f9f5597246b6aba35b6f521f7853.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/fe5b227c15f34973ba4e79f69cb7f4a0.png
[ffa34edebac1486e9cc509987db4af34.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/46af3dce01c7497caf299bb72c90eeaa.png
[40255050e8bc43b1b9d741993931d6df.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/9e41d4cb14544edc816b6f85075edeee.png
[9598d331b87f43008211c5258b7e76f9.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/0ec39a6cfcdd4ccc90e3b2a732991a98.png
[4a0f647e7d9f4a3d87fcf5196bf09ba4.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/8d6214b18dbc4250972b999ff31757d7.png