1.创作动机
当时我还在吃午餐，正在考虑如何制作一款对自己而言毫无技术障碍，短平快却又直击创意的小游戏，在沉思的时候，脑海里突然闪过之前看过的一张gif图，gif图中使用了各种突然系列的表情包演示了一段双人的动作对战。以表情包为精灵帧的想法在脑海里迅速成形，回到电脑前我也迫不及待地拿起了键盘...
2.创作构思
首先玩家应该能够左右移动，用于靠近和远离另一位玩家。
接着玩家应该能够跳跃，用于腾空连击和产生受伤后的腾空效果。
再者需要使用状态机控制两位玩家状态博弈的结果。
最后还需要为游戏添加一个结束游戏的判定。
3，实现细节
对游戏做出合理的设计后，代码实现其实就是一个水到渠成，马到成功的翻译过程。
对于各模块的分工而言，不外乎确定不轻易改动的接口，即输入(触发条件)和输出(渲染)部分，和可以随时进行魔改的逻辑设计部分(数据与算法)。
模块抽象
对于玩家的左右移动，需要监听键盘事件获取左右方向的输入，设置和解除移动标志位，并在逐帧回调中依据移动标志位计算出下一帧玩家在x轴的位置。
对于玩家的起跳移动，同样需要监听键盘事件获取向上方向的输入，设置起跳的标志位，并提供起跳的时间戳，起跳位置和起跳的速度，在逐帧回调用依据上诉参数以插值的方式计算出下一帧玩家在y轴上的位置。与地板发生碰撞后，只要解除腾空标志位就能关闭重力的模拟。
键盘方向输入
逐帧渲染玩家位置
解除腾空标志位
此时玩家已经能够进行跳跃和左右移动了。
跳跃与左右移动
接着需要实现双方战斗时的状态机博弈计算
状态机的设计非常简单，只包含了三个状态：
1.攻击状态
2.空闲状态
3.闪避状态
而且状态间可以自由切换，是一个全连接的图。
玩家的状态机
这里使用的是我之前写的状态机可视化插件导出的状态机代码。
状态机可视化插件
自动生成的状态机代码
最后秉承着一切从简的原则，两名玩家状态机博弈的算法为：
当玩家处于闪避状态时，对其攻击无效。
而当玩家处于其他所有状态时，对其攻击生效。
两位玩家的状态机博弈
另外玩家自身的状态机也被当做动画状态机，当进入不同的状态后，会回调不同的动画。
状态机博弈和动画状态机
最后是游戏结束的判定。
同样秉承着一切从简的原则，如果任意一方的玩家触碰到屏幕两侧的红色边界，游戏结束。
游戏结束判定
游戏结束判定
4.更多内容
可以关注我在bilibili的id： qbkivlin 查看更多小游戏的录播内容。
也可以关注我的直播间链接：http://live.bilibili.com/3863689
直播间将会不定期地直播写一些有趣的，短平快的，直击创意的小游戏。欢迎更多的人参与到这种即时创作中。
网友评论