就跟大家唠唠我最近瞎折腾的一个小玩意儿——一个机器猫的小游戏。
一切的开始：为啥想搞这个？
也没啥特别高大上的理由，就是前阵子在家陪娃，娃天天吵着要看机器猫，看着看着，我就寻思，能不能自己也捣鼓一个出来，让他玩玩，也算是我这个当爹的一点心意。网上那些现成的机器猫游戏，我看了一下，什么《道具大暴走》，《哆A梦飞车》什么的，感觉要么就是要联网，要么就是玩法复杂了点，不太适合小娃瞎点。我就想整个最最简单的，点点图就能有反应的那种。
构思阶段：脑子里想得可美了
一开始我想得挺美，就想着做一个哆A梦帮大雄找东西的游戏。比如大雄的零分考卷被藏起来了，或者静香的什么小玩意儿不见了，然后哆A梦就掏出各种道具来帮忙。玩家就点击屏幕上的某个地方，或者某个道具，然后触发个小动画，找到东西就过关。听起来是不是还行？我还琢磨着，道具库得丰富点，竹蜻蜓、任意门、时光机、记忆面包，这些经典的都得有。
动手实践：现实啪啪打脸
结果真上手了才发现，这玩意儿比想象中麻烦多了！
第一步，找素材。 这是个大难题。机器猫、大雄、静香、胖虎、小夫这些人物的图片，还有各种道具的图片，上哪儿找去？自己画？那水平，估计娃看了都得哭。后来我就在网上搜罗各种公开的、没有版权问题的素材，东拼西凑，勉强凑了点能用的，但清晰度和风格统一性就别指望太高了。
第二步，琢磨用啥做。 我本身也不是专业搞游戏开发的，就想着找个简单点的工具。一开始想着用PPT做动画，后来发现交互太弱了。然后又看了看一些简单的游戏制作引擎，感觉学习成本也不低。我决定用最原始的办法，就用HTML和一点点JavaScript来试试，毕竟这个我还算熟悉点，想着大不了就是一堆图片和按钮的组合嘛
第三步，开始码代码，或者说“堆积木”。 我先搭了个基本的网页框架。然后把找来的机器猫图片、大雄图片放上去。想着先实现一个最简单的功能：点击一个道具图标，比如“竹蜻蜓”，然后旁边大雄的头上就出现一个竹蜻蜓的图片。这个倒是很快实现了，就是图片的显示和隐藏。
但接下来就卡壳了。我想让点击竹蜻蜓后，大雄能“飞”一下，哪怕就是图片往上移动一点点。这下就涉及到动画效果了。我用JavaScript写了个简单的位移动画，效果嘛一言难尽，卡卡的，一点也不流畅。而且如果道具多了，每个道具的交互逻辑都不一样，比如点击“任意门”，应该切换背景图片，代表去了新地方。这个用我那三脚猫的JS水平写起来，代码越写越乱，各种判断条件，头都大了。
最终成品：一个“四不像”
折腾了差不多一个星期，每天晚上娃睡了之后搞一会儿。搞出来的东西，跟我一开始想的简直是两码事。由于动画效果太难搞，素材也七零八落，我大大简化了设想。
最终的版本是这样的：
- 一个主界面，上面有机器猫和大雄的静态图片。
- 旁边放了几个道具的小图标，比如竹蜻蜓、任意门、缩小灯。
- 点击竹蜻蜓图标，大雄的图片旁边会冒出来一个对话框，写着：“哇，竹蜻蜓，可以飞！”（对，连飞的动画都省略了，直接文字提示！）
- 点击任意门图标，背景图片会换一张，表示“到达了新地方”。但也就是换张静态图而已。
- 点击缩小灯，大雄的图片会稍微变小一点点，这个倒是勉强实现了。
基本上，就成了一个看图说话的“PPT播放器”的水平，哈哈。连个正经的游戏流程都算不上，更别提什么《道具大暴走》那种消除乐趣，或者《飞车》那种竞速刺激了。我这就是个“点击看图”的小程序。
一点感想
虽然成品挺拿不出手的，甚至可以说是失败的，但这个过程，还挺有意思。起码我知道了，做一个游戏，哪怕是最简单的小游戏，也不是拍脑袋就能成的，从素材、逻辑、交互到最终实现，每一步都有坑。
也算是体验了一把从想法到实践的艰辛。娃倒是没嫌弃，对着那几个破图标和图片切换点来点去也乐呵了半天。可能在他眼里，只要是机器猫，怎么都好玩。他开心，我这番折腾也就算没白费。
行了，今天就瞎叨叨这么多，算是个不太成功的实践记录，给大家看个乐子。下次再有啥好玩的实践，再来分享！
标签：