教你用 ECharts 轻松做一个 Flappy Bird 小游戏
本文分享自华为云社区《没想到吧!这个可可爱爱的游戏居然是用 ECharts 实现的!》,作者: DevUI 。
前言
echarts
是一个很强大的图表库,除了我们常见的图表功能,echarts
有一个自定义图形的功能,这个功能可以让我们很简单地在画布上绘制一些非常规的图形,基于此,我们来玩一些花哨的。
Flappy Bird 小游戏体验地址(看看你能玩几分):
https://foolmadao.github.io/echart-flappy-bird/echarts-bird.html
下面我们来一步步实现他。
1 在坐标系中画一只会动的小鸟
首先实例化一个 echart 容器,再从网上找一个像素小鸟的图片,将散点图的散点形状,用自定义图片的方式改为小鸟。
要让小鸟动起来,就需要给一个向右的速度和向下的加速度,并在每一帧的场景中刷新小鸟的位置。而小鸟向上飞的动作,则可以靠角度的旋转来实现,向上飞的触发条件设置为空格事件。
效果如下
2 用自定义图形绘制障碍物
echarts 自定义系列,渲染逻辑由开发者通过renderItem
函数实现。该函数接收两个参数 params 和 api,params 包含了当前数据信息和坐标系的信息,api 是一些开发者可调用的方法集合,常用的方法有:
api.value(…),意思是取出
dataItem
中的数值。例如api.value(0)
表示取出当前dataItem
中第一个维度的数值。api.coord(…),意思是进行坐标转换计算。例如
var point = api.coord([api.value(0), api.value(1)])
表示dataItem
中的数值转换成坐标系上的点。api.size(…), 可以得到坐标系上一段数值范围对应的长度。
api.style(…),可以获取到
series.itemStyle
中定义的样式信息。
灵活使用上述 api,就可以将用户传入的 Data 数据转换为自己想要的坐标系上的像素位置。
renderItem
函数返回一个echarts
中的graphic
类,可以多种图形组合成你需要的形状,graphic 类型。对于我们游戏中的障碍物只需要使用矩形即可绘制出来,我们使用到下面两个类。
type: group, 组合类,可以将多个图形类组合成一个图形,子类放在 children 中。
type: rect, 矩形类,通过定义矩形左上角坐标点,和矩形宽高确定图形。
颜色定义, 我们为了让水管具有光泽使用了echarts
的线性渐变色对象。
另外,用一个 for 循环一次性随机出多个柱子的数据。
再将背景用游戏图片填充,我们就将整个游戏场景,绘制完成:
3 进行碰撞检测
由于飞行轨迹和障碍物数据都很简单,所以我们可以将碰撞逻辑简化为小鸟图片的正方形中,我们判断右上和右下角是否进入了自定义图形的范围内。
对于特定坐标下的碰撞范围,因为柱子固定每格 50 坐标值一个,宽度也是固定的,所以,可碰撞的横坐标范围就可以简化为 (x / 50 % 1) < 0.6
在特定范围内,依据Math.floor(x / 50)
获取到对应的数据,即可判断出两个边角坐标是否和柱子区域有重叠了。在动画帧中判断,如果重叠了,就停止动画播放,游戏结束。
总结
echarts
提供了强大的图形绘制自定义能力,要使用好这种能力,一定要理解好数据坐标点和像素坐标点之间的转换逻辑,这是将数据具象到画布上的重要一步。
运用好这个功能,再也不怕产品提出奇奇怪怪的图表需求。
源码地址:https://github.com/foolmadao/echart-flappy-bird
版权声明: 本文为 InfoQ 作者【华为云开发者社区】的原创文章。
原文链接:【http://xie.infoq.cn/article/d69279e24df5bb6b2b80de61c】。文章转载请联系作者。
评论