webgl实现3D俄罗斯方块

webgl实现3D俄罗斯方块

文章同时发布于王鹏飞的个人网站。

试玩地址：3d tetris。

源码: https://github.com/pengfeiw/3d-tetris

学习webgl/opengl已经有一段时间了，打算做个小程序练一练，所以就有了这个俄罗斯方块。采用的技术是webgl + typescript + canvas，至于界面使用的是react + material-ui框架。下面我将介绍一些实现的技术点。

一.介绍

界面左侧是可以打开或者关闭的设置面板。可以通过distance和rotate调整界面中视角和距离，以适应不同用户的视觉习惯。下面也讲解了基本操作按键，旋转、左移、右移、加速以及暂停。中间是游戏主体部分，是一个canvas，通过webgl实现游戏内容的绘制。为了使图块视觉效果明显，我加入了平行光照，让方块更真实一点。右侧是当前游戏信息和按钮控制，右侧的图块预览也是一个canvas，不过是canvas的二维绘制，通过CanvasRenderingContext2D实现预览效果。

二.俄罗斯方块实现思路

我不讲解具体的技术细节，我只讲一些功能是如何实现，比如碰撞检测算法。对细节感兴趣想要学习的朋友，可以下载我的源码参考学习。

图形方块的绘制——旋转、移动

一个俄罗斯方块游戏，有很多不同的形状，典型的有I、O、S、Z、L、J、T几种。

可以用一个4x4的区域绘制这些形状，所有的形状都在这个4x4的区域范围内。这里采用二进制01的思想，将4x4的区域内都赋予0和1，如果是0表示这一个cell不需要绘制，如果是1表示需要绘制，那么一个s形的block可以表