Phaser 2D HTML5 游戏框架

Irmingard 是一款基于网页的纸牌接龙游戏，其核心目标是将棋盘上的所有牌按照花色和点数升序（从 A 到 K）移动到弃牌堆中。游戏使用两副标准扑克牌（共 104 张，包含黑桃、红桃、方块、梅花四种花色，点数从 A 到 K，无大小王），并设有 8 个弃牌堆（每种花色两个）。目前游戏仅支持单人模式，但作者表示未来希望加入与姐姐同时游玩的协作模式。

游戏名称“Irmingard”来源于作者认识的一个人。项目采用 CoffeeScript 编写，基于 Backbone.js 和 Backbone Marionette 框架构建，并使用了 HTML5 拖放 API 实现交互。

玩法指南

游戏开始时，棋盘上会以 1、2、3、4、5、4、3、2、1 的数量从左到右铺开 9 列牌，每列只有最底部的一张牌是明牌且可移动，其余牌均背面朝上且被阻挡。玩家可以通过拖拽将牌移动到其他符合条件的牌下方（例如红桃 7 可以放到黑桃 8 或梅花 8 下面），也可以双击一张牌将其直接送入弃牌堆。当没有可移动的牌时，可以点击右上角的“Hit me”按钮，从牌堆中向每列底部补充新的明牌，直到清空棋盘或无法继续移动。

具体规则如下：

• 目标是将所有牌按花色和升序排列到 8 个弃牌堆中（每种花色两个弃牌堆）。
• 拖拽牌时，可拖拽的牌在悬停时显示绿色，可放置的目标在拖拽另一张牌时悬停显示黄色。
• 双击一张牌可将其弃置到弃牌堆。
• 点击“Hit me”按钮获取新牌。
• 空列只能放置 K。
• 弃牌堆的第一张牌必须是 A。
• 弃牌堆顶部的牌可以拖回棋盘（这在游戏后期非常有用）。

开发故事

作者在 2012 年 11 月的 CologneJS 会议上做了题为“Solitaire mit Backbone”的演讲，分享了使用 Backbone 开发纸牌游戏的经验。项目开发过程中遇到了一些技术挑战，例如在渲染卡牌时，由于 Backbone Relational 尚未更新卡牌所属的列，导致无法直接设置卡牌的可拖拽性。作者在 README 中记录了这个问题，并提出了可能的解决方案：在 Column 的 handleAdd 回调中更新卡牌的可拖拽性，并绑定 CardView 到可拖拽性的变化。

技术要点

项目采用了一系列前端技术栈，主要包括：

• HTML5 拖放 API：用于实现卡牌的拖拽交互，参考了 HTML5 Rocks 的教程。
• Backbone.js：提供模型-视图-控制器（MVC）架构的基础。
• CoffeeScript：作为主要开发语言，编译为 JavaScript。
• Backbone Marionette：基于 Backbone 的复合应用框架，简化视图管理和应用结构。
• Backbone Relational：处理模型之间的关系（如卡牌与列、弃牌堆的关联）。
• HAML Coffee Templates：用于编写视图模板。
• Gon gem：将 Rails 后端数据传递给 JavaScript。
• Rails 3.2.8：作为后端框架（主要用于资源管道和开发服务器）。
• jQuery Pinkify：可能用于某些视觉效果。

测试方面，项目计划使用 Jasmine 编写测试，并搭配 Jasminerice 和 Guard Jasmine（基于 PhantomJS）进行自动化测试。目前测试仍在开发中。