Fork me on GitHub

我最喜欢的PC游戏——扫雷

2018-11-18 中文

技术

我的项目 JavaScript Vue.js

我之前用原生JavaScript、jQuery、微信小程序写过3个版本的扫雷游戏,当我体验过类似Vue的微信小程序之后,学习Vue好像是自然而然的事,于是我终于用Vue写出了最让我满意的一个版本的扫雷~

我和扫雷

我其实不是一个爱玩游戏的人,不管是PC、iPad、手机还是PS4上的游戏,我都是浅尝辄止,过了一段时间之后甚至记不起自己装过什么游戏。

小学大概三、四年级时家里开始有台式机了,然而我一个半文盲并不怎么会操作电脑,只是观察我爸爸玩电脑自带的游戏,后来我就学会玩了,并且一直持续到大学。

大二的时候爸爸给我买了个苹果壳子的无牌笔记本电脑,由于里面装的是盗版精简Windows系统,小游戏和日语输入法这种一般人用不到的东西就没有装,于是我用优盘从学校的机房把它们拷出来,装进了自己的电脑。

当然了,这也证明了小游戏和日语都是一般人不需要的东西。

我写扫雷

好了,现在说说我做的这个扫雷。

首先写一个雷区的算法,获得一个地雷的矩阵,然后把它渲染到画面上。

这个雷区的算法是我在codefights上刷题的时候想到的,也是因为做了这道题,我才兴起了做这个游戏的念头。

一开始想挑战下用原生JavaScript,可仅仅是写document.getElementsByTagName就已经累个半死了,点击事件也都写得很长,还只完成了基本的翻开单个方块、标记地雷、确认输赢、开始新一局等功能,远没有达到我想要的复刻经典版功能的目标。

后来第二版用了jQuery,在DOM操作上确实简单了一些,但是仍然免不了在看不见摸不着的数据和眼见着要操作的DOM之间纠缠,而且由于各种限制,游戏在功能上并没有增多。

再来是第三版,尝试用微信小程序的wxml、wxss、JS来写。

学习微信小程序的文档和各类经验贴的时候确实有不少收获,由于它和Vue的相似性,顺带还学了点Vue,而游戏的功能上则新增了计时、计数、保存成绩等功能。

然而由于微信小程序限制了开发游戏的时候不可以使用wxml、wxss、JS,它就这么死掉了。

它死掉之后,我因为过于伤心,直到11月之前都没有再碰过。

上个星期五晚上,我突发奇想,要用Vue来重写一遍,于是我重新设计了CSS,再结合Vue的文档,终于用了一个周末的时间写出了这个最新的VueJS版本的扫雷游戏。

Vue版扫雷

这个Vue版本的最大特点是实现了根据窗口大小调整雷区和地雷数,而且可以做到点开周围没有雷的方块时可以一连翻开一大片。

之前的三个版本中,我一直想做成片翻开方块的功能,但是写着写着就报错call stack limit exceeded,自查又查不出bug在哪,简直令人头秃。

这次我着重在这个功能上花了心思,每写一步都去console输出一下,一旦报错就立刻调整。

最终结果是,大概报错3、4次之后就完成了这个功能,开心~

除了成片翻开的功能之外,我还在设置按钮和它的弹出窗口上下了功夫。

设置按钮的图标是我以前用CSS画的八齿空心齿轮,而它的弹出窗口本身是一个轮播图的形式,以后也可以直接复用。

轮播图在 这里

我想做的功能都实现了,这个版本基本上算是圆满了。

扫雷游戏完整版在 这里

其他人的扫雷

在查找各种用法资料的时候,我顺便还看了一些关于扫雷的帖子,才发现原来世界上还有比我更沉迷于扫雷的人。

他们专门建立了扫雷的论坛,按照各人的扫雷成绩进行排名,甚至还拿到世界上参与排名。

跟他们比起来,我的扫雷成绩可能只能算新手入门,但我对扫雷这个游戏的热爱跟他们是一样的。

有那么点爱好,真的挺好。

完~