Flash的死亡：在2013年构建一个Facebook集成的HTML5记忆游戏
Source: Dev.to
引言
2013 年，网页开发格局正快速变化。Adobe Flash 正逐渐退出舞台，取而代之的是 HTML5、CSS3 以及移动网页的崛起。品牌们正在寻找在浏览器和社交媒体上直接吸引用户的新方式，这导致交互式网页应用激增。
html5-memory-game 仓库（版本 0.8）是这一时代的完美时间胶囊，它是由开发者 arpad1337 创建的基于模块模式的记忆游戏插件。该项目为一次促销活动而设计，展示了 2013 年现代网页技术和面向对象的 JavaScript 如何被用于构建引人入胜、抗机器人的社交媒体营销工具。
为 SuperShop 网络打造的营销工具
深入仓库的资源可以看出，这款游戏是为 SuperShop——一家在匈牙利颇具影响力的多合作伙伴忠诚度计划——而构建的。JavaScript 应用会主动初始化一个 SupershopApp 对象。
游戏的瓦片上展示了参与该网络的主要欧洲及全球品牌的标志，包括：
- Interspar & Spar
- OMV & OMV MaxxMotion
- OBI
- Burger King
- UNION Biztosító & Erste Bank
匹配卡片的背面则印有显眼的黄色和蓝色 SuperShop 标志。
内部实现：CSS3 与面向对象的 JavaScript
游戏基于流行的 HTML5 Boilerplate 框架构建，彻底摒弃了对 Flash 插件的依赖。视觉效果通过 CSS3 3D 变换实现。卡片翻转效果通过动态添加 active 或 active3d 类来完成，相关规则如下：
/* CSS3 3D flip */
.card {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
transition: transform 0.6s;
}
.card.active3d {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}Modernizr（v2.6.1）用于检测用户浏览器是否支持这些 3D 变换，并在不支持时优雅降级。
JavaScript 架构严格遵循面向对象编程，使用 模块模式 来保持全局命名空间的整洁。开发者实现了一个严格的接口（受 Ross Harmes 和 Dustin Diaz 启发），确保 Item 类正确实现了诸如 toString 等必需方法。
核心的 MemoryGame 类充当游戏引擎，绘制 120 × 120 像素的网格瓦片，跟踪点击、评估匹配并管理内置的毫秒计时器。
Facebook 集成与防作弊验证
在 2013 年，促销类网页游戏高度依赖社交集成以实现病毒式传播。仓库中包含官方 Facebook PHP SDK（v3.2.2），表明该游戏以 Facebook Canvas 或页面标签应用的形式部署。
一个巧妙的防作弊机制保障奖品发放的公平性。MemoryGame 类不会仅发送一个“游戏获胜”的简单负载，而是记录一组用户交互数据，精确记录每一次点击的鼠标坐标（clientX、clientY、offsetX、offsetY）和时间戳。
游戏结束时，会触发自定义的 gameOver 事件，包含：
- 交互日志（坐标 + 时间戳）
- 生成的卡片顺序
- 最终完成时间
这些数据被封装为 JSON，并通过自定义的 XMLHttpRequest 回退包装器，以 AJAX POST 请求发送到 ajax.php。PHP 后端处理诸如 register 和 sendAnswer 等操作，明确验证是人类而非自动化机器人在玩游戏。
通过硬件加速的 CSS3 动画、严格的 OOP JavaScript 设计模式以及与 Facebook Graph API 的深度集成，这款记忆游戏成为 2013 年前端促销网页开发最佳实践的绝佳快照。