Web版俄罗斯方块,500行代码实现

- 日理万妓 2022-12-07 12:24 203阅读 0赞

Hello,I'm Shendi;

--------------------

做了一个Web版的小游戏，也是我制作的第一个H5小游戏

> 更多实战内容请进入我的实战专栏**:** [https://blog.csdn.net/qq\_41806966/category\_9656338.html][https_blog.csdn.net_qq_41806966_category_9656338.html]

**目录**

简介

效果视频

解析

游戏规则

页面的制作

绘制背景

画布的初始化

方块对象

游戏逻辑执行

按键监听

交互事件(\*)

思路

结果判断,加分机制

暂停游戏

游戏结束

在线试玩

源码

--------------------

# 简介 #

拥有俄罗斯方块的基本功能

方块颜色随机

掉落速度会随着时间增长而加速

直接落地

实现了暂停功能

实现了虚拟按键

下一个方块的显示

## 效果视频 ##

首先上制作和效果视频---基本上看完视频就能了解到制作过程了

比较简单,麻烦的是方块的变换部分都需要自己一个个去实现(使用矩阵旋转效果不好)

H5俄罗斯方块

--------------------

# 解析 #

整个项目只有两个文件一个 html 文件,一个 js 文件

主要的地方就是 canvas,如果对canvas不熟可以先看下这篇文章

[https://blog.csdn.net/qq\_41806966/article/details/103779839][https_blog.csdn.net_qq_41806966_article_details_103779839]

## 游戏规则 ##

*  宽: 10
 *  高: 20
 *  一横排满则消除
 *  最后一个方块到了顶端则游戏结束
 *  七个方块

为了更好地体验,方块下降速度应该随着时间增长而加速

## 页面的制作 ##

整体页面只有一个 canvas 和 两个 div

两个 div 分别为暂停界面和结算界面

代码片段如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODA2OTY2_size_16_color_FFFFFF_t_70][]

html页面的js片段

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODA2OTY2_size_16_color_FFFFFF_t_70 1][]

上面代码就是提供了显示暂停界面和结束界面的方法

以及对应界面的按钮点击后做的操作,也就是 ui 方面的 js 代码

主要的是 game.init 这一行,初始化整个画布

## 绘制背景 ##

我将绘制背景的方法放到了 game 对象中

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODA2OTY2_size_16_color_FFFFFF_t_70 2][]

上面的代码,前三行是绘制背景,黑色

然后绘制场景的四条线

![20200915214939865.png][]

接下来的代码就是绘制按键了

![20200915215009269.png][]

## 画布的初始化 ##

我将关于游戏处理的一些方法都放到了 game 对象中

html 页面会执行 game对象的init方法,传递canvas对象

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODA2OTY2_size_16_color_FFFFFF_t_70 3][]

此方法会先判断canvas是否为空,后面重新开始游戏不需要再次传递参数了

并且将画布的context获取

![20200915214530638.png][]

当获取到画布和画笔后,会先绘制背景,然后绘制开始游戏

接下来给画布添加点击事件,用于点击虚拟按键(位置是自己通过输出试出来的)

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODA2OTY2_size_16_color_FFFFFF_t_70 4][]

最后会初始化一些变量,包括了分数,速度,时间,场景

![20200915215252553.png][]

当点击开始游戏的时候会执行 game对象的 run 方法

![20200915215453830.png][]

主要的操作都在 start 方法中

## 方块对象 ##

我创建了两个方块对象,一个是当前方块,一个是下一个方块

提供了 spawn 方法用来生成方块信息

当前方块代码如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODA2OTY2_size_16_color_FFFFFF_t_70 5][]

当前方块的信息都是从下一个方块的信息拷贝

当生成了当前方块,会生成新的下一个方块

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODA2OTY2_size_16_color_FFFFFF_t_70 6][]

下一个方块多了颜色集合

在生成方块的时候,会生成一个随机的方块,生成位置是预定义的

在生成方块中有一个init方法用于初始化一些方块信息

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODA2OTY2_size_16_color_FFFFFF_t_70 7][]

然后就是一些固定的位置设置

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODA2OTY2_size_16_color_FFFFFF_t_70 8][]

## 游戏逻辑执行 ##

start() 方法主要用于界面的渲染

当游戏开始后,我们需要一直刷新整个canvas

在 game 对象中有一个二维数组代表场景

我们的方块一开始是不在场景内的,当方块完成放置的时才会加入场景

也就是说,场景内只有已放置的方块信息,具体值是颜色信息

具体操作

*  绘制背景
 *  绘制当前方块
 *  绘制下一个方块
 *  绘制现有方块
 *  绘制时间,分数
 *  自动下降
 *  根据时间调整速度
 *  递归

代码如下

/** 开启游戏 */
    	start: function() {
    		// 游戏执行逻辑
    		game.bg();
    		// 分数, 游戏事件
    		game.ctx.fillStyle = "white";
    		game.ctx.fillText("分数:" + game.scope, 120, 60);
    		game.ctx.fillText("坚持时间:" + Math.round(game.time), 250, 60);
    		
    		// 渲染方块
    		game.ctx.fillStyle = cur.color;
    		for (let i = 0; i < cur.num; i++) {
    			game.ctx.fillRect(game.minX + game.size * cur.arrX[i], game.minY + game.size * cur.arrY[i], game.size, game.size);
    		};
    		// 渲染下一个方块
    		game.ctx.fillStyle = nextCur.color;
    		for (let i = 0; i < nextCur.num; i++) {
    			game.ctx.fillRect(game.minX + 180 + game.size * nextCur.arrX[i], game.minY + game.size * nextCur.arrY[i], game.size, game.size);
    		};
    		// 渲染现有方块
    		for (let i = 0; i < game.scene.length; i++) {
    			for (let j = 0; j < game.scene[i].length; j++) {
    				if (game.scene[i][j] != null) {
    					game.ctx.fillStyle = game.scene[i][j];
    					game.ctx.fillRect(game.minX + j * game.size, game.minY + i * game.size, game.size, game.size);
    				}
    			}
    		}
    		
    		// 自动下降
    		if (game.num++ == game.speed) {
    			game.num = 0;
    			gameEnv.down();
    			
    			// 调整速度, 最快为0.1s
    			if (game.speed != 2) {
    				game.speed = 10 - Math.round(game.time / 30);
    			}
    		}
    		
    		game.time += 0.05;
    		
    		// 游戏暂停则不继续
    		if (!game.isPause) setTimeout("game.start()", 50);
    	},

## 按键监听 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODA2OTY2_size_16_color_FFFFFF_t_70 9][]

## 交互事件(\*) ##

封装成了一个对象 gameEnv

里面有 变换,加速,左,右,直接到底 的方法

### 思路 ###

当我们触发左事件时,方块会向左移动,因为之前的设计是将当前方块作为一个单独的对象,所以我们只需要修改对象中的坐标位置就行

*  向左 x-1,当到边界不能往左
    
     *  ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODA2OTY2_size_16_color_FFFFFF_t_70 10][]
 *  向右 x+1,与向左同
    
     *  ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODA2OTY2_size_16_color_FFFFFF_t_70 11][]
 *  向下 y+1,当碰到其他方块或者到底部则完成放置
    
     *  ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODA2OTY2_size_16_color_FFFFFF_t_70 12][]
 *  向上,变换 顺时针旋转90度,需要自己一个一个去实现(大部分都是这么做的),除去正方形,需要实现6\*4=24个if块
    
     *  ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODA2OTY2_size_16_color_FFFFFF_t_70 13][]
 *  直接到底,往下的操作需要判断,正好我们封装了向下的操作,我们只需要在向下方法中返回一个值,让我们知道是否放置完成就可以轻松实现此需求
    
     *  ![20200915221831414.png][]

### 结果判断,加分机制 ###

当我们完成放置时,需要判断先判断游戏是否结束,然后判断是否有可以消除的方块,是则需要加分

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODA2OTY2_size_16_color_FFFFFF_t_70 14][]

如果游戏结束条件不成立,则开始下一个物体,并判断是否有可以消除的方块

![20200915222153529.png][]

*  加分机制
    
     *  一行100
     *  两行200
     *  三行400
     *  四行800

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODA2OTY2_size_16_color_FFFFFF_t_70 15][]

## 暂停游戏 ##

在暂停方法中,会去调用一个名 pause 的方法

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODA2OTY2_size_16_color_FFFFFF_t_70 16][]

## 游戏结束 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODA2OTY2_size_16_color_FFFFFF_t_70 17][]

--------------------

# 在线试玩 #

[https://1711680493.github.io/Tetris/index.html][https_1711680493.github.io_Tetris_index.html]

# 源码 #

在我的 github 中的 Tetris 中,可以点下方链接进入,查看里面的介绍获取

[https://github.com/1711680493/Application][https_github.com_1711680493_Application]

**别忘了点 Star~**

[https_blog.csdn.net_qq_41806966_category_9656338.html]: https://blog.csdn.net/qq_41806966/category_9656338.html
[https_blog.csdn.net_qq_41806966_article_details_103779839]: https://blog.csdn.net/qq_41806966/article/details/103779839
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODA2OTY2_size_16_color_FFFFFF_t_70]: /images/20221123/8b595d5b378b47d5937244eff29ad0e8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODA2OTY2_size_16_color_FFFFFF_t_70 1]: /images/20221123/6ab43bc7fca04a639ecebea9abc0675a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODA2OTY2_size_16_color_FFFFFF_t_70 2]: /images/20221123/005e54a7c098471dad08acbda7711d56.png
[20200915214939865.png]: /images/20221123/59f2f8bf347c4f8592e33a7f48c54277.png
[20200915215009269.png]: /images/20221123/6fff5660b90b4e0f877d904785a04066.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODA2OTY2_size_16_color_FFFFFF_t_70 3]: /images/20221123/381b60eaafa44ba799e9ecc3f3f12125.png
[20200915214530638.png]: /images/20221123/3e31268733574498b5aafb5d8cc63bb6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODA2OTY2_size_16_color_FFFFFF_t_70 4]: /images/20221123/cc1ccf1bc30b4ed29778c1a5d42f54b2.png
[20200915215252553.png]: /images/20221123/1622dd4a501e409ea4dd25dbb335de3f.png
[20200915215453830.png]: /images/20221123/0fbe840f9014495c9e78588d9041f381.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODA2OTY2_size_16_color_FFFFFF_t_70 5]: /images/20221123/1947ef08b52e4d1b8e3135f1677574d9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODA2OTY2_size_16_color_FFFFFF_t_70 6]: /images/20221123/8485f25e36d444029c9bb5cb7e0826b5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODA2OTY2_size_16_color_FFFFFF_t_70 7]: /images/20221123/5ca1a6dd2a104b99b72df219a738e7fb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODA2OTY2_size_16_color_FFFFFF_t_70 8]: /images/20221123/8e4531f2b5b7470480164188698bd5d0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODA2OTY2_size_16_color_FFFFFF_t_70 9]: /images/20221123/f267237d21af4d8b87a265ef7f96d3ed.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODA2OTY2_size_16_color_FFFFFF_t_70 10]: /images/20221123/4c5e40b441de4b9b9010e8945ea1e15c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODA2OTY2_size_16_color_FFFFFF_t_70 11]: /images/20221123/9f1128d03bee4cd59111688fa977e271.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODA2OTY2_size_16_color_FFFFFF_t_70 12]: /images/20221123/83822bf06b444225b375e16846737f95.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODA2OTY2_size_16_color_FFFFFF_t_70 13]: /images/20221123/87bb779d943043bdbe644303003e278f.png
[20200915221831414.png]: /images/20221123/6603e88005234bf8a4858918bd1035cb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODA2OTY2_size_16_color_FFFFFF_t_70 14]: /images/20221123/4b68c219335f4518a10f4a023c586df5.png
[20200915222153529.png]: /images/20221123/56e3a1f9d20b4fe5921f77b512d543e9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODA2OTY2_size_16_color_FFFFFF_t_70 15]: /images/20221123/4d24b7dc5ea3408e914fccd3b6b914bf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODA2OTY2_size_16_color_FFFFFF_t_70 16]: /images/20221123/c57dcf5e144b4518aff0ae6cba60e2a9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODA2OTY2_size_16_color_FFFFFF_t_70 17]: /images/20221123/38def5d0594447dfb4e6ffc814d6cd13.png
[https_1711680493.github.io_Tetris_index.html]: https://1711680493.github.io/Tetris/index.html
[https_github.com_1711680493_Application]: https://github.com/1711680493/Application