首页 前端知识 2024年HTML5 游戏开发实战 | 俄罗斯方块_俄罗斯方块h5(1)

2024年HTML5 游戏开发实战 | 俄罗斯方块_俄罗斯方块h5(1)

2024-05-09 10:05:14 前端知识 前端哥 655 479 我要收藏

(4) 玩家可以看到游戏的积分。

本文开发俄罗斯方块游戏程序,俄罗斯方块游戏的运行界面如上图所示。

01、俄罗斯方块游戏设计的思路

俄罗斯方块形状设计

游戏中下落的方块有着各种不同的形状,要在游戏中绘画不同形状的方块,就需要使用合理的数据表示方式。常见的俄罗斯方块拥有7种基本的形状以及它们旋转以后的变形体,具体的形状如图1所示。

■ 图1 俄罗斯方块形状

每种形状都是由不同的黑色小方格组成的,如图2所示,在屏幕上只需要显示必要的黑色小方格就可以表现出各种形状,每一形状都是由4个小方格组成的,完全可以用4个点来表示。

■ 图2 俄罗斯方块示意图

4个点的坐标分别是什么呢?每个形状都有一个自己的坐标系。例如,S形可以如图3表示。

■ 图3 S形形状坐标系

S形的数据模型可以表示为4个点组成的数组:[ [0,-1],[0,0],[-1,0],[-1,1] ]。

如图4所示,T形的数据模型可以表示为4个点组成的数组:[ [-1,0],[0,0],[1,0] ,[0,1] ]。

■ 图4 T形形状坐标系

可以用同样的方法建立其他形状的数组模型,然后再将这7个形状的数组模型合起来组成一个大的数组。

另外,每个形状可以是单色,也可以有自己的颜色。增加颜色会增加编程的复杂度,但是也增加不了多少,所以该模型中也会考虑颜色。

最后,最好给每个形状一个编号,这样方便在形状数组和颜色数组中应用它们。

完成上面的分析后,就可以给出形状数据模型的代码了。

//各种形状的编号,0 代表没有形状NoShape = 0;
//z形//s形
ZShape = 1;
SShape = 2;
LineShape = 3;
//竖条形//T形
T斤爱败化仓臂氨尺暗隘肮伴唉懊碍艾蔼巴艾菠蔼懊胺报稗氨= 4;
//正方形//L形//反L形
SquareShape = 5 ;
LShape = 6;
MirroredLShape = 7
//各种形状的颜色
Colors =("black""fuchsia""# cff""red""orange","agua","green","yellow"];
[1,0 ],[ 0,0 ],[ 0,0 ],[ 0,0 ]
[0,-1],[ 0,0 ],[ 1,0 ],[ 1,1 ]
[0,-1],[ 0,0 ],[-1,0 ],[-1,1 ]
[0,-1],[ 0,0 ],[ 0,1 ],[ 0,21]
[-1,1],[ 0,1 ],[ 1,0 ],[ 0, 1]
[1, 1],[ 0,1 ],[ 0,0 ],[ 0,1 ]
[1,-1],[ 0,-1],[ 0,0],[ 0,1 ]

俄罗斯方块游戏面板屏幕

游戏的面板是由一定的行数和列数的单元格组成的,游戏窗口面板屏幕如图5所示。

■ 图5 屏幕网格

屏幕由

转载请注明出处或者链接地址:https://www.qianduange.cn//article/7587.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!