基于JS实现的消消乐游戏的示例代码

目录
  • 前言
  • 游戏的准备工作
    • 总结一下
  • 棋盘
  • 渲染画面
  • 动画效果
    • genCollapse()
    • genDownfall()
    • genEmerge()
  • 整合效果
    • genLoop()
    • genSwap()

前言

一直对小游戏挺感兴趣的，也尝试着做过一些小游戏，实现游戏是一个不错的提高代码基础水平的方式，因此这次挑战了一个较为困难的小游戏：消消乐。

如果仅仅是从消除方面来制作一个静态的消消乐（只有消除和补充方块的过程，但是没有任何交互和动画）其实并不算太难，只要我们能够想通方块消除（主要是三消）的原理和方块下落后的新位置，我们就可以解决这个问题。但如果我们要同时实现各个状态的动画呢？这就是一个比较复杂的问题了。

本文将从逻辑到实现步骤慢慢详细的介绍该游戏的制作过程。对了，这个游戏是完全用原生js实现的，考虑到要将游戏成品发给一些不懂程序的朋友，因此没做代码拆分，所有的代码均在一个单一的html文件上。

该游戏已放在codepen上面，点击查看游戏在线演示。有兴趣的小伙伴可以查看，如果能点一个小爱心更好呢。

游戏目前仅做了最简单的三消功能，如果有时间可以把其他交互也写出来。

游戏的准备工作

首先我们思考游戏的机制： 游戏有一个“棋盘”，是一个n*m的矩形。矩形中有若干个颜色（或者类型）的方块，相同类型的方块，在一个横行或者竖行，有3个或者3个以上时，便会消除。

在部分方块消除后，这些方块上方的方块便会下坠并补充这些消除方块的缺口，同时，上方又会生成新的方块来补充下坠方块的位置，在执行完上述步骤后，便完成了一个游戏过程的循环。

总结一下

一共有3个步骤，将生成一个游戏循环：消除，下坠，补充。在补充后，如果方块们无法自然消除，循环便会结束。这时候就需要玩家来交还两个相邻方块，来人为制造可以消除的情况，以重新进入循环。

如果玩家的交换并不能使得重新进入消除循环呢？那么这个交换将重新换回原样。

基本机制思考完毕，现在开始代码构建：

首先考虑到方块们会进行大量的动画过程（主要是四种：移动，消除，下坠，冒出），于是我们使用绝对定位来安排这些方块，并且在其行类样式当中添加属性：transition，用css来实现这些方块的动画。具体实现如下：

移动：通过left和top值的改变，控制方块的移动。

消除：通过修改transform，修改为scale(0)，以实现消除的动画。

下坠：通过top值的改变，同移动。

冒出：通过修改transform，将本来为scale(0)的transform值修改为scale(1)，以实现冒出的动画。

考虑到这些动画是一个接一个的执行，我们应该是需要使用异步来执行这些动画的，当然使用回调函数也能实现，但回调函数可能会很麻烦，所以我们使用Promise对象来解决这些麻烦。

废话太多了！现在开始写代码。

棋盘

首先是棋盘的实现，简单操作就定义了一个棋盘的整体结构出来。当然，给#app添加position:relative或者position:absolute是必不可少的。

<body>
    <div id="app">
    </div>
</body>

接下来我们用面向对象的思想，构造棋盘的具体内容：

首先一个棋盘有它的宽度和高度（x和y），我们还同时还定义它的方块大小（size）。

matrix则为之后要用到的，存放不同type的矩阵，types则为所有的棋子种类。

除此之外，还有几个属性，这些之后再说。

class GameMap {
	constructor(x, y, size) {
			this.x = x;
			this.y = y;
			this.size = size;
			this.matrix = [];
			this.useSwap = false;
			this.handleable = true;
			this.types = emojis.length;
		}
}

我们再来构造“棋子”，棋子的属性很多，所以我们通过仅将options作为参数，并将options解构，来赋予棋子这些属性，这些属性分别是

class Cell {
	constructor(options) {
		const { position, status, type, left, top, right, bottom, instance } = options;
			this.type = type;
			this.position = position;
			this.status = status;
			this.top = top;
			this.bottom = bottom;
			this.left = left;
			this.right = right;
			this.instance = instance;
                    }
}

type 类型（颜色），number类型表示，相同的number即被视为同样的类型。

position 位置，用一个形如[m,n]的二维数组存储

status 状态，分为'common' 普通 'collapse' 崩塌 'emerge' 冒出，一共三种

top 棋子上方的棋子对象，值也是一个Cell实例，如果棋子上方没有棋子，那它就是undefined

left 棋子的左侧棋子对象

right 棋子的右侧棋子对象

bottom 棋子的下方棋子对象

instance 根据上述属性刻画出的真实的棋子的DOM对象，最终这些对象会在GameMap中展现出来

在这里我们使用emoji表情来展现这些棋子，我们定义全局变量emojis：

const emojis = ['', '
赞 (0)

相关推荐

  • 基于JS编写开心消消乐游戏的示例代码

    基于JS编写开心消消乐游戏的示例代码

    目录 展示 游戏背景 游戏规则 源码部分 对关卡的地图设置 介绍一下游戏中的一些功能 展示 游戏背景 一天晚上,天空中掉下一颗神奇的豌豆种子,正好落在了梦之森林的村长屋附近,种子落地后吸收了池塘的水分,迅速成长,一夜之间变成参天大藤蔓…… 第二天早上,村民们醒来后看到巨大的藤蔓都惊呆了,聚在一起议论纷纷.有人说他似乎看到村长的房子在高耸入云的藤蔓上,房子似乎还在上升,有人号召说应该爬上去救村长,玩家需要爬到藤曼顶部救出村长 游戏规则 把三个颜色相同的小动物连成一条直线,即可消除.达到指定的目标通

  • JavaScript实现消消乐的源代码

    JavaScript实现消消乐的源代码

    JavaScript实现消消乐的源码下载地址:点击下载源代码 index.html <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0,

  • 基于JS实现二维码名片生成的示例代码

    基于JS实现二维码名片生成的示例代码

    目录 演示 技术栈 源码 css js 演示 技术栈 这里用到了一个二维码生成库qrcode.js下面是简单介绍: //初始化QRCode对象 var qrcode = new QRCode(document.getElementById("qrcode")); //也可以在初始化QRCode对象,传入更多参数 var qrcode = new QRCode(document.getElementById("qrcode"),{ width: 128, height

  • JS实现别踩白块游戏的示例代码

    目录 实现思路 核心代码 HTML代码 CSS代码 JS代码 实现思路 1.offsetTop,与style.top 2.我们看到的是白块在向下运动,其实不是,政治运动的是装着白块的盒子,白块只是被装在了盒子里面被带着向下,而向下运动也只是改变top值.同事盒子total的高度也不是无限长的能一直向下运动,所以肯定是运动到某个地方他又回去了. childNodes:由childNodes属性返回的数组中包含着所有类型的节点,所有的属性节点和文本节点也包含在其中.(不能乱用) JS获取元素的lef

  • 基于JS实现的消消乐游戏的示例代码

    基于JS实现的消消乐游戏的示例代码

    目录 前言 游戏的准备工作 总结一下 棋盘 渲染画面 动画效果 genCollapse() genDownfall() genEmerge() 整合效果 genLoop() genSwap() 前言 一直对小游戏挺感兴趣的,也尝试着做过一些小游戏,实现游戏是一个不错的提高代码基础水平的方式,因此这次挑战了一个较为困难的小游戏:消消乐. 如果仅仅是从消除方面来制作一个静态的消消乐(只有消除和补充方块的过程,但是没有任何交互和动画)其实并不算太难,只要我们能够想通方块消除(主要是三消)的原理和方块下

  • VUE+Canvas 实现桌面弹球消砖块小游戏的示例代码

    VUE+Canvas 实现桌面弹球消砖块小游戏的示例代码

    大家都玩过弹球消砖块游戏,左右键控制最底端的一个小木板平移,接住掉落的小球,将球弹起后消除画面上方的一堆砖块. 那么用VUE+Canvas如何来实现呢?实现思路很简单,首先来拆分一下要画在画布上的内容: (1)用键盘左右按键控制平移的木板: (2)在画布内四处弹跳的小球: (3)固定在画面上方,并且被球碰撞后就消失的一堆砖块. 将上述三种对象,用requestAnimationFrame()函数平移运动起来,再结合各种碰撞检查,就可以得到最终的结果. 先看看最终的效果: 一.左右平移的木板 最底

  • 基于Python实现开心消消乐小游戏的示例代码

    基于Python实现开心消消乐小游戏的示例代码

    目录 前言 一.准备 1.1 图片素材 1.2 音频素材 二.代码 2.1 导入模块 2.2 游戏音乐设置 2.3 制作树类 2.4 制作鼠标点击效果 2.5 制作出现元素 2.6 数组 2.7 制作人物画板 三.效果展示(仅部分) 3.1 初始页面 3.2 第一关画面 3.3 失败画面 3.4 第十关画面 穿过云朵升一级是要花6个金币的,有的时候金币真的很重要 前言 嗨喽,大家好呀!这里是魔王~ 一天晚上,天空中掉下一颗神奇的豌豆种子,正好落在了梦之森林的村长屋附近. 种子落地后吸收了池塘的水

  • C/C++百行代码实现热门游戏消消乐功能的示例代码

    游戏设计 首先我们需要使用第三方框架,这里我使用的是sfml,不会使用sfml在我的上几篇文章当中-扫雷(上)有详细的开发环境搭建介绍 首先准备图片资源 一张背景图片,一张宝石图片 窗口初始化加载图片 Texture t1; t1.loadFromFile("images/bg2.png"); 当鼠标第一次单击时,记录下位置,第二次单击又记录一下位置,如果两个小方块相邻就交换位置,如果不相邻如图c的位置则,不发生变化 判断行或列如果三张一样的图片相邻,清除一下图片,进行刷新 实列 #i

  • 基于JS实现Flappy Bird游戏的示例代码

    基于JS实现Flappy Bird游戏的示例代码

    前言 Flappy Bird 是一款无尽的游戏,玩家可以控制一只鸟.玩家必须保护小鸟免于与管道等障碍物相撞.每次小鸟通过管道时,分数都会增加一.当小鸟与管道碰撞或因重力而坠落时,游戏结束.以下部分描述了构建此游戏必须采取的步骤. 游戏可以通过这个链接进入 完整源码地址 实现代码 HTML 部分:在此部分中,创建和加载游戏的元素.选择背景.鸟类.障碍和得分元素的图像.接下来,我们创建并链接 style.css 和 index.js 文件. <!DOCTYPE html> <html>

  • 基于JS实现接粽子小游戏的示例代码

    基于JS实现接粽子小游戏的示例代码

    目录 游戏设计 游戏实现 添加粽子元素 粽子掉落 难度选择 开始游戏 总结 端午节马上就到了,听说你们公司没发粽子大礼包?没关系,这里用 JS 实现了一个简单的接粽子小游戏,能接到多少粽子,完全看你手速,不用担心端午没粽子了. 游戏设计 在游戏屏幕内,会随机的从顶部掉落粽子,通过鼠标移动到粽子上并点击,成功接住粽子,得到积分.在设置面板中,可以设置游戏难度,分为简单.很难.超级难三种等级,不同等级的积分也是不同的,玩家可根据自己的手速进行设置.游戏结束后,可看到自己的成绩.实现出来的效果如下(可

  • 基于JS实现蜘蛛侠动作游戏的示例代码

    基于JS实现蜘蛛侠动作游戏的示例代码

    目录 代码结构 代码展示 HTML JS 项目运行 游戏截图 整个游戏源码是由html.js. css.图片等代码完成的,无后端数据保存功能. 代码结构 js文件夹是游戏事件控制文件 vapp文件夹是游戏图片文件 icon.png 是网页游戏图标 index.html 是游戏主页 代码展示 HTML index.html代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/

随机推荐