游戏的思路和小猫的图片来源于 www.gamedesign.jp,原来的游戏名叫 Chat Noir。

我尝试使用 Phaser 3 游戏引擎,用 JavaScript 仿了一遍,体验一下 HTML 5 小游戏的开发流程。

游戏玩法

  • 点击小圆点,围住小猫。
  • 你点击一次,小猫走一次。
  • 直到你把小猫围住(赢),或者小猫走到边界并逃跑(输)。

注意:并不一定每一局你都有可能获胜,能否获胜与开始生成的地形有关,有的地形可能根本没有赢的可能性。

其他玩法

你还可以自己编写小猫的算法,来让小猫的判断能力变得更强。

自带的算法是挑选距离边缘最近的路。玩几把你就会发现小猫的规律,然后骗自带算法小猫掉入你的陷阱。

技术特色

Phaser 3 本身不支持在代码中内联 SVG 图片代码,所有的图片资源必须通过 XHR 在线获取,所以我使用 FakeXMLHttpRequest,自己实现了一个 SVG 的 Loader,这样就可以把 SVG 图片通过 webpackraw-loader 直接内联到 JavaScript 中,相当于把图片打包在 js 中了,便于分发。

附录

在线游戏链接