php做的网站怎么调试,将wordpress做成淘宝客,人才交流网站建设与设计,晚上偷偷奖励自己的软件手撸俄罗斯方块
简单介绍
《俄罗斯方块》#xff08;俄语#xff1a;Тетрис#xff0c;英语#xff1a;Tetris#xff09;#xff0c;是1980年末期至1990年代初期风靡全世界的电脑游戏#xff0c;是落下型益智游戏的始祖#xff0c;电子游戏领域的代表作之一俄语Тетрис英语Tetris是1980年末期至1990年代初期风靡全世界的电脑游戏是落下型益智游戏的始祖电子游戏领域的代表作之一为苏联首个在美国发布的娱乐软件。此游戏最初由阿列克谢·帕基特诺夫在苏联设计和编写于1984年6月6日首次发布当时他正在苏联科学院电算中心工作。此游戏的名称是由希腊语数字“四”的前缀“tetra-”因所有落下方块皆由四块组成和帕基特诺夫最喜欢的运动网球“tennis”拼接而成华语地区则因游戏为俄罗斯人发明普遍称为“俄罗斯方块”。
数字“四”显而易见最初的图形都是由4个小方块组成的这也是俄罗斯方块的一个特点。游戏的目标是通过控制不同形状的方块使它们在一个矩形的游戏区域中排列成完整的一行或多行然后这些完整的行就会消除给玩家得分。
游戏规则
游戏开始时游戏区域是一个空白的矩形玩家通过控制方块的移动和旋转使它们在游戏区域中排列成完整的一行或多行当一行或多行被完整填满时这些行就会消除给玩家得分当方块堆积到游戏区域的顶部时游戏结束。
游戏特点
游戏简单易上手但是难度逐渐增加游戏的速度会随着游戏的进行而逐渐加快游戏的随机性较大玩家需要根据当前的情况灵活地调整方块的位置和旋转。
形状
俄罗斯方块中的方块有7种不同的形状分别是
I型一字型J型J型L型L型。O型方块型S型S型T型T型Z型Z型
这些形状是由4个小方块组成的每个小方块都可以旋转但是旋转的中心不同。如下图 各种四格骨牌由左至右上至下的英文字母代号I、J、L、O、S、T、Z
操作
玩家通过键盘控制方块的移动和旋转具体操作如下
←向左移动方块→向右移动方块↑旋转方块↓加速下落。
得分
消除一行得100分消除两行得300分消除三行得700分消除四行得1500分。
游戏结束
当方块堆积到游戏区域的顶部时游戏结束游戏结束后显示游戏结束的提示并显示玩家的得分。
从开发角度看俄罗斯方块
坐标系
对于所有二维游戏来说坐标系是一个非常重要的概念。在俄罗斯方块中我们可以使用一个二维数组来表示游戏区域数组的每一个元素表示一个方块数组的索引表示方块的坐标。如下图 图中区域表示正数的范围。但是实际情况下我们可以使用一个二维数组来表示游戏区域。而且计算机在绘画过程中也是自上而下自左而右进行的因此我们需要将坐标进行变换。如下图 x轴表示列y轴表示行。这样我们就可以通过一个二维数组来表示游戏区域。
对于执行的一个元素我们可以通过二维数组快速定位到它。
const points [[]]; // 二维数组
const x 1; // 列
const y 2; // 行
const point points[y][x]; // 获取坐标为(1, 2)的元素需要注意的是数组的索引是从0开始的因此在实际过程中我们将y 0看成第一行x 0看成第一列。
方块的表示
按照上述坐标体系的定义我们可以表示任何一个方块如当表示I型方块时我们可以定义一个数组来表示它的形状
const IHorizonal [[0, 1, 2, 3]
]
const IVertical [[0],[1],[2],[3]
]如下图
这样我们就可以通过一个数组来表示一个方块的形状。通过类似的方法我们可以表示其他的6个方块。但是I方块有两种形态我们到底使用哪一种作为初始形态呢
这里面需要做一个约定我们定义每个方块的初始化形态。定义如下
I型
// 口口口口J型
// 口
// 口口口L型
// 口
// 口口口O型
// 口口
// 口口S型
// 口口
// 口口T型
// 口
// 口口口Z型
// 口口
// 口口方块的移动
在游戏过程中方块是可以移动的。分别可以向左移动、向右移动、向下移动。同时移动必须满足如下条件
移动后的方块不能超出游戏区域即不能超出游戏区域的左边界、右边界和底边界翻译成程序语言为
// 向左移动
if (x - 1 0) {x - 1;
}
// 向右移动
if (x 1 width) {x 1;
}
// 向下移动
if (y 1 height) {y 1;
}移动后的方块不能与其他方块重叠即不能与其他方块的坐标重叠翻译成程序语言为
// 向左移动
if (x - 1 0 !isOverlap(x - 1, y)) {x - 1;
}
// 向右移动
if (x 1 width !isOverlap(x 1, y)) {x 1;
}
// 向下移动
if (y 1 height !isOverlap(x, y 1)) {y 1;
}上面是描述某个点的情况实际上判断方块情况需要所有的点都满足条件。
方块的转换
在游戏过程中方块是可以旋转的。如下图 同样的在旋转过程中也必须满足如下条件 旋转后的方块不能超出游戏区域即不能超出游戏区域的左边界、右边界和底边界 旋转后的方块不能与其他方块重叠即不能与其他方块的坐标重叠。
使用程序语言表述如下
// 旋转
const isValid (newShape) {for (let y 0; y newShape.length; y) {for (let x 0; x newShape[y].length; x) {if (newShape[y][x] (x 0 || x width || y height || isOverlap(x, y))) {return false;}}}return true;
}
const newShape rotate(shape);
if (isValid(newShape)) {shape newShape;
}接下来问题来如何实现rotate函数呢这里面就涉及到了方块的旋转。对于不同的方块旋转的方式是不同的。
如I型方块其旋转形态只有两种分别是横向和纵向。
// I型方块
// 横向
// 口口口口
// 纵向
// 口
// 口
// 口
// 口但是对于T型等其他方块其旋转形态是四种的。
// T型方块
// 1
// 口
// 口口口
// 2
// 口
// 口口
// 口
// 3
// 口口口
// 口
// 4
// 口
// 口口
// 口我们当然可以通过枚举的方式将所有的旋转形态都列出来但是这样的方式是不可取的。因为这样的方式会使得代码变得复杂而且不易维护。因此我们需要找到一种更好的方式来实现方块的旋转。
实际上我们可以通过观察发现方块的旋转是围绕一个中心点进行的。且旋转方向和角度是固定的。
因此我们可以得出如下结论 方块的旋转是围绕一个中心点进行的选择的中心点是不动的。 方块的旋转方向和角度是固定我们可以选取逆时针旋转相对我们定义的坐标系统旋转角度为 π / 2。 故根据旋转公式新坐标定义如下 const newX Math.cos(Math.PI / 2) * (x - centerX) - Math.sin(Math.PI / 2) * (y - centerY) centerX;const newY Math.cos(Math.PI / 2) * (y - centerY) Math.sin(Math.PI / 2) * (x - centerX) centerY;
即 const newX -y centerY centerX;const newY x - centerX centerY;此处不太了解的可以去看看坐标旋转。
小结
上面我们讨论了俄罗斯方块的基本介绍从开发的角度来看我们讨论了坐标系、方块的表示、方块的移动和方块的旋转。那么我们可以通过如下两个实体在表示方块的基本情况。
Point坐标点
interface PointAttr {color?: string; // 颜色isReadyToClean?: boolean; // 是否准备消除[key: string]: any; // 其他属性
}class Point {private x: number;private y: number;private attr: PointAttr;constructor(x, y, attr?: PointAttr) {this.x x;this.y y;this.attr attr || {};}
}每个坐标点均包含了x、y坐标以及其他属性如颜色等
Block方块
我们通过Block来抽象方块定义如下
class Block {private points: Point[];private rotateIndex: number; /// 旋转因子constructor(points: Point[]) {this.points points;}abstract getCenterIndex(): number; // 获取中心点abstract getRotateArray(); number[]; // 获取旋转数组
}其他的方块均继承自Block实现getCenterIndex和getRotateArray方法。
如IBlcok其实现如下
class IBlock extends Block {getCenterIndex() {return 1;}getRotateArray() {return [Math.PI / 2, // 第一次旋转相对于初始位置的角度-Math.PI / 2 // 第二次旋转相对于第一次旋转的角度]}
}通过继承的关系分别实现LBlock、JBlock、OBlock、TBlock、SBlock、ZBlock。
本章内容暂时就到这里后续章节我们将继续讨论如何实现俄罗斯方块的游戏逻辑。
详细内容可以关注我的github账号 https://github.com/shushanfx/tetris
接下来我将从如下几个方面来阐述
手撸俄罗斯方块——游戏设计手撸俄罗斯方块——游戏核心模块设计手撸俄罗斯方块——渲染与交互手撸俄罗斯方块——游戏主题
