1. 编程号首页

俄罗斯方块游戏h5在线玩_俄罗斯游戏方块

编程小号 • • 未分类

俄罗斯方块游戏h5在线玩_俄罗斯游戏方块https://www.fgba.net/sitemap.xml_对俄罗斯方块进行分析

俄罗斯方块和五子棋一样，规则简单，上手容易。几乎每个开发者，都会在其青春年华时，签下”xx到此一游”。犹记得大一老师在布置大程作业的时候提过：“什么都可以写，唯一不能写的是俄罗斯方块”。

这次想借学Html5的机会，重温下俄罗斯方块。当然不是单一的实现，希望有所创新，在可玩性/趣味性上有所突破。

调研

在4399这个游戏平台上，选择了几款俄罗斯方块相关的游戏进行试玩。大致总结了下各类俄罗斯方块的新意。

一、需求分析与目标创新

引入场景
 

俄罗斯方块游戏h5在线玩_俄罗斯游戏方块

码头俄罗斯方块：借用大型运输船作为游戏主场景，而傍边的卡车作为下个方块的提供者。画风让人舒服，游戏忠于原版算是中规中矩。

方块组成和消除规则创新
 

俄罗斯方块游戏h5在线玩_俄罗斯游戏方块

烟火俄罗斯方块：方块由六边形组成，消除不在拘泥于行，而在同色的连接区域。

彩泡俄罗斯方块：由圆来代替方块，消除不在拘泥于行，而在同色的连接区域。

结合物理引擎
 

俄罗斯方块游戏h5在线玩_俄罗斯游戏方块

外星俄罗斯方块：借助7种形状的方块，来堆一个最高的塔(类似于搭积木)。

大部分游戏都在图形和消除效果上做足个功夫，为了提高用户的粘度，有的引入排行版等功能。总之只有变化，才能在同质化的产品中脱颖而出。

初步设想：

上述的同类产品，好归好。但单机游戏缺少变化容易让人觉得单调。

由此想参考QQ游戏的火拼俄罗斯的实现。
 

俄罗斯方块游戏h5在线玩_俄罗斯游戏方块

多人PK对战， 引入攻击/防守道具，最终决出胜负。游戏激烈，且充满偶然性。

俗话说：“他山之石，即可攻玉”。取其精华，多人PK和引入道具，都是很好的点。

1)两人PK对战，当然这边不联网，采用机器人AI的方式实现。
 

俄罗斯方块游戏h5在线玩_俄罗斯游戏方块

游戏AI分等级，用户可从易到难依次挑战。

2)引入道具，使得游戏更加刺激和紧凑。

减行道具：消去本方的行数。

加行道具：增加对方的行数。

其余类型的道具，后续再添加。

3)引入排名，若获胜，则把当前局的得分计入排行榜

游戏规则可简单描述如下：有限的时间内，用户玩家得分超过游戏AI，即表示玩家获胜。

小结：

单机游戏没有网络，也意味着社交元素的缺失。如果能尝试去弥补下，比如引入排行榜，引入社会化分享组件，都是提高游戏用户黏性的好办法。

这部分讲述了俄罗斯方块的初步目标，下一步将简单实现一个可玩的俄罗斯方块版本。

二、游戏的基本框架和实现

演示&下载：

初步版本效果较为简陋，其大致效果如图所示：
 

俄罗斯方块游戏h5在线玩_俄罗斯游戏方块

其代码下载地址为：http：//pan。baidu。com/s/1dDm4B0P

该版本参考了不少cnblogs网友的同类版本，尤其是博主”奕秋”的”Canvas俄罗斯方块”。再次表示感谢。

模型和构建：

方块抽象和建模

俄罗斯方块由7种方块组成，各有特点。当然也不能忽视方块的旋转特性，手游买号这边采用了”Arika Rotation System”体系，其具体的旋转变化如下所示：

俄罗斯方块游戏h5在线玩_俄罗斯游戏方块

因此对方块进行抽象，构建一个基类Shape，然后7种形状继承于基类Shape来构建。
 

  1. function Shape(x, y, idx, color, shapes) {
  2. this.x = x;
  3. this.y = y;
  4. this.idx = idx;
  5. this.color = color;
  6. this.shapes = shapes;
  7. };

复制代码

注： 这边的属性依次为x，y坐标，颜色，变换形状数组及索引标识。

由于JavaScript没有所谓类和继承的概念，需要依靠原型链来模拟构建，这边我们采用寄生组合式继承方式来实现。以L型方块为例。
 

  1. // *) L型方块的转换变换矩阵
  2. LShape.SHAPES = [
  3. [
  4. [0, 1, 0, 0],
  5. [0, 1, 0, 0],
  6. [0, 1, 1, 0],
  7. [0, 0, 0, 0]
  8. ],
  9. [
  10. [0, 0, 0, 0],
  11. [1, 1, 1, 0],
  12. [1, 0, 0, 0],
  13. [0, 0, 0, 0]
  14. ],
  15. [
  16. [0, 1, 1, 0],
  17. [0, 0, 1, 0],
  18. [0, 0, 1, 0],
  19. [0, 0, 0, 0]
  20. ],
  21. [
  22. [0, 0, 0, 0],
  23. [0, 0, 1, 0],
  24. [1, 1, 1, 0],
  25. [0, 0, 0, 0]
  26. ]
  27. ];
  28. function LShape(x, y, idx, color) {
  29. // *) 继承父类的属性变量
  30. Shape.call(this, x, y, idx, color, LShape.SHAPES);
  31. };
  32. // *) 继承父类的抽象方法
  33. LShape.prototype = new Shape();

复制代码

对方块的生成，可以采用工厂方法，不过为了简便，并没有采用。
 

  1. function createShape() {
  2.     var shapeTypes = [LShape, JShape, IShape, OShape, TShape, SShape, ZShape];
  3.     var colorTypes = [“red”, “green”, “blue”, “pink”]
  4.     var shapeIdx = Math.floor(Math.random() * 100) % shapeTypes.length;
  5.     var shapePos = Math.floor(Math.random() * 100) % 4;
  6.     var colorIdx = Math.floor(Math.random() * 100) % colorTypes.length;
  7.     return new shapeTypes[shapeIdx](4, 0, shapePos, colorTypes[colorIdx]);
  8. }

复制代码

按键事件的注册和处理

俄罗斯方块需要对向左，向右，变换的按键事件作出及时的反应外，还需要对向下的长按键进行处理。

对于向左，向右，变换的按键事件，简单注册按键事件即可。
 

  1. document.body.addEventListener(“keydown”, function(e) {
  2. gameEnv.keydown(e.keyCode);
  3. switch(e.keyCode) {
  4. case 37:
  5. gameScene.keydown(ActionType.ACTION_LEFT);
  6. break;
  7. case 38:
  8. gameScene.keydown(ActionType.ACTION_CHANGE);
  9. break;
  10. case 39:
  11. gameScene.keydown(ActionType.ACTION_RIGHT);
  12. break;
  13. case 40:
  14. gameScene.keydown(ActionType.ACTION_DOWN);
  15. break;
  16. }
  17. });

复制代码

但对于向下的长按键处理，除了监听键盘事件外，还需要在游戏主逻辑循环中，添加轮询该按键状态。

因此我们引入一个按键数组，用于记录按键的状态。
 

  1. function GameEnv() {
  2. this.presskeys = new Array(256);
  3. }
  4. GameEnv.prototype.reset = function() {
  5. for ( var i = 0; i < this.presskeys.length; i++ ) {
  6. this.presskeys[i] = false;
  7. }
  8. }
  9. GameEnv.prototype.keyup = function(keyCode){
  10. if ( keyCode >= 0 && keyCode < 256 ) {
  11. this.presskeys[keyCode] = false;
  12. }
  13. };
  14. GameEnv.prototype.keydown = function(keyCode) {
  15. if ( keyCode >= 0 && keyCode < 256 ) {
  16. this.presskeys[keyCode] = true;
  17. }
  18. };

复制代码

而游戏的主循环如下所示：
 

  1. var fps = 30 || 0;
  2. setInterval(gameLogic, fps);
  4. function gameLogic() {
  5. gameScene.updateGame();
  6. gameScene.renderGame(ctx);
  7. }

复制代码

以上是我觉得有些小难度的地方，其余的都是数据结构和canvas绘图的一些知识点，这边暂略过。

总结：

一个游戏， 说简单也简单，说难也难。难是因为它是个系统工程，涉及图形绘制，语音播放，以及javascript的事件模型等。当前的俄罗斯方块已有个基本框架，初步能玩。虽然离最终设定的目标还有些距离，但”千里之行，始于足下”，终是一个很好的开头。

今天的文章俄罗斯方块游戏h5在线玩_俄罗斯游戏方块分享到此就结束了，感谢您的阅读。

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/83953.html

赞 (0)
编程小号编程小号
0

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注