扫雷舰
扫雷……是的,您记得当年在 Windows 95 上玩过的经典游戏(事实上,直到 Windows 8 之前它一直在 Microsoft 的软件更新中实现)。扫雷起源于 20 世纪 60 年代和 1970 年代最早的大型机游戏。扫雷的最早祖先是 Jerimac Ratliff's Cube。基本游戏风格成为 20 世纪 80 年代益智游戏类型的流行部分。
在这里重温一下您的扫雷历史。
你知道什么是真正的扫雷机吗?在我读到这篇文章之前我也没有。
我记得我第一次接触电脑是在 90 年代,经常玩这个游戏,所以我想还有什么比这个更好的游戏呢?
我的版本
入门
在这里玩游戏!
基本游戏玩法
- 选择您的难度级别。
- 简单 = 9x9,10 个地雷
- 中型 = 16x16,40 个地雷
- 硬 = 30x30,160 个地雷
- 单击板上的任意位置即可开始并启动计时器。 *数字表示与任何给定单元格相邻的地雷数量。
- 如果您认为某个单元格是地雷,请使用“Shift + 单击”向该单元格添加标记。
赢/输
- 如果你碰到了地雷...游戏就结束了,伙计。
- 揭开所有没有地雷的牢房即可获胜!
(明白了...我的...扫地机...?)
使用的技术
好老的三个朋友:
超文本标记语言
从源代码中可以看出,HTML 非常简洁,因为大部分操作都发生在 JavaScript 中。更不用说,游戏板本身只是一个简单的桌子。
CSS
我很高兴将其设计成 Windows '95 桌面视图的旧外观。我仍然想稍微修改一下它以使其完美(无法找到 MS 使用的确切字体)。
我对 CSS 的最大挑战是确定表格样式(边框、td 大小等)
JavaScript
由于这是我第一次使用 JavaScript 编写功能齐全的 Web 应用程序,因此这部分对我来说是该项目迄今为止最大的挑战,这并不奇怪。
以下是一些亮点:
- 单击难度级别时动态调整表格大小
- 我创建了一个函数(当然是在 Jim 的帮助下),它解析表上 ID 中的数字,将其转换为 ${size} 变量,该变量基本上根据它获取的数字附加行/列。这个概念让我大吃一惊。
- 反过来,动态创建数组的数组以匹配可视表。
- 创建一个“Cell”类,我用它来创建单独的“单元对象”,我为其分配了大量属性:row#、col#、bomb t/f、相邻炸弹的#(顺便说一句,这本身就是另一个挑战) ,显示 t/f,并标记 t/f。
- 这种方法使编写更简洁的代码变得更加容易,而不必一遍又一遍地重复自己,并在类上创建将为每个单元对象运行的方法。
- 创建一个显示已过去秒数的功能计时器。
- 在阵列上随机放置炸弹。
- 渲染 DOM 中的所有内容。
- 将点击处理程序分配给不同的事件。
- 创建赢/输逻辑
- 弄清楚所有功能如何同步链接在一起的控制流程。
- 学习递归以及如何正确编写产生这种效果的函数。
我的设计选择
我决定采用 OG Windows '95 外观。我坚信“模仿、同化、创新”。学习模型,因此对于我的第一个项目来说,我需要先走路,然后才能跑步并开始学习过程的模仿阶段。
我很高兴我选择了这条道路,因为我通过尝试匹配原始游戏的风格学到了很多东西。
话虽如此,我肯定很快就会创建一个现代化版本。
下一步!
这个项目对我来说真的很有趣。我计划继续完善它,并回顾未来几年学到的许多经验教训。
- 就像我之前提到的,我很想制作一个“显示切换”,将 CSS 翻转为现代化、干净、扁平、简约的 UI。
- 有一些愚蠢的小美学错误让我抓狂,比如当板子完全暴露时,单元格宽度/高度如何调整几个像素。我需要解决这个问题。
- 我还想进一步充实 Windows '95 的内容,让“开始”按钮执行某些操作,在右下角添加一个时钟,以及一些功能性桌面图标。
- 我想要解决的一个非常困难的功能是创建一个功能,用户可以通过输入数字(行/列/矿号)来选择难度。
这将是为了一个下雨天。
感谢您的阅读!我希望你喜欢这个游戏:)