教你用 ECharts 轻松做一个Flappy Bird小游戏

转x33g5p2x  于2022-05-13 转载在 其他  
字(5.0k)|赞(0)|评价(0)|浏览(430)

本文分享自华为云社区《没想到吧！这个可可爱爱的游戏居然是用 ECharts 实现的！》，作者： DevUI 。

前言

echarts是一个很强大的图表库，除了我们常见的图表功能，echarts有一个自定义图形的功能，这个功能可以让我们很简单地在画布上绘制一些非常规的图形，基于此，我们来玩一些花哨的。

Flappy Bird小游戏体验地址（看看你能玩几分）：

https://foolmadao.github.io/echart-flappy-bird/echarts-bird.html

下面我们来一步步实现他。

1 在坐标系中画一只会动的小鸟

首先实例化一个echart容器，再从网上找一个像素小鸟的图片，将散点图的散点形状，用自定义图片的方式改为小鸟。

  1. const myChart = echarts.init(document.getElementById('main'));
  2. option = {
  3.   series: [
  4.     {
  5.       name: 'bird',
  6.       type: 'scatter',
  7.       symbolSize: 50,
  8.       symbol: 'image://bird.png',
  9.       data: [
  10.         [50, 80]
  11.       ],
  12.       animation: false
  13.     },
  14.   ]
  15. };
  17. myChart.setOption(option);

要让小鸟动起来，就需要给一个向右的速度和向下的加速度，并在每一帧的场景中刷新小鸟的位置。而小鸟向上飞的动作，则可以靠角度的旋转来实现，向上飞的触发条件设置为空格事件。

  1. option = {
  2.   series: [
  3.     {
  4.       xAxis: {
  5.         show: false,
  6.         type: 'value',
  7.         min: 0,
  8.         max: 200,
  9.       },
  10.       yAxis: {
  11.         show: false,
  12.         min: 0,
  13.         max: 100
  14.       },
  15.       name: 'bird',
  16.       type: 'scatter',
  17.       symbolSize: 50,
  18.       symbol: 'image://bird.png',
  19.       data: [
  20.         [50, 80]
  21.       ],
  22.       animation: false
  23.     },
  24.   ]
  25. };
  27. // 设置速度和加速度
  28. let a = 0.05;
  29. let vh = 0;
  30. let vw = 0.5
  32. timer = setInterval(() => {
  33.   // 小鸟位置和仰角调整
  34.   vh = vh - a;
  35.   option.series[0].data[0][1] += vh;
  36.   option.series[0].data[0][0] += vw;
  37.   option.series[0].symbolRotate = option.series[0].symbolRotate ? option.series[0].symbolRotate - 5 : 0;
  39.   // 坐标系范围调整
  40.   option.xAxis.min += vw;
  41.   option.xAxis.max += vw;
  43.   myChart.setOption(option);
  44. }, 25);

效果如下

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， 矩形类，通过定义矩形左上角坐标点，和矩形宽高确定图形。
  1. // 数据项定义为[x坐标，下方水管上侧y坐标， 上方水管下侧y坐标]
  2. data: [
  3.   [150, 50, 80],
  4.   ...
  5. ]
  7. renderItem: function (params, api) {
  8.     // 获取每个水管主体矩形的起始坐标点
  9.     let start1 = api.coord([api.value(0) - 10, api.value(1)]);
  10.     let start2 = api.coord([api.value(0) - 10, 100]);
  11.     // 获取两个水管头矩形的起始坐标点
  12.     let startHead1 = api.coord([api.value(0) - 12, api.value(1)]);
  13.     let startHead2 = api.coord([api.value(0) - 12, api.value(2) + 8])
  14.     // 水管头矩形的宽高
  15.     let headSize = api.size([24, 8])
  16.     // 水管头矩形的宽高
  17.     let rect = api.size([20, api.value(1)]);
  18.     let rect2 = api.size([20, 100 - api.value(2)]);
  19.     // 坐标系配置
  20.     const common = {
  21.         x: params.coordSys.x,
  22.         y: params.coordSys.y,
  23.         width: params.coordSys.width,
  24.         height: params.coordSys.height
  25.     }
  26.     // 水管形状
  27.     const rectShape = echarts.graphic.clipRectByRect(
  28.       {
  29.         x: start1[0],
  30.         y: start1[1],
  31.         width: rect[0],
  32.         height: rect[1]
  33.       },common
  34.     );
  35.     const rectShape2 = echarts.graphic.clipRectByRect(
  36.       {
  37.         x: start2[0],
  38.         y: start2[1],
  39.         width: rect2[0],
  40.         height: rect2[1]
  41.       },
  42.       common
  43.     )
  45.     // 水管头形状
  46.     const rectHeadShape = echarts.graphic.clipRectByRect(
  47.       {
  48.         x: startHead1[0],
  49.         y: startHead1[1],
  50.         width: headSize[0],
  51.         height: headSize[1]
  52.       },common
  53.     );
  55.     const rectHeadShape2 = echarts.graphic.clipRectByRect(
  56.       {
  57.         x: startHead2[0],
  58.         y: startHead2[1],
  59.         width: headSize[0],
  60.         height: headSize[1]
  61.       },common
  62.     );
  64.     // 返回一个group类，由四个矩形组成
  65.     return {
  66.         type: 'group',
  67.         children: [{
  68.             type: 'rect',
  69.             shape: rectShape,
  70.             style: {
  71.               ...api.style(),
  72.               lineWidth: 1,
  73.               stroke: '#000'
  74.             }
  75.         }, {
  76.             type: 'rect',
  77.             shape: rectShape2,
  78.             style: {
  79.               ...api.style(),
  80.               lineWidth: 1,
  81.               stroke: '#000'
  82.             }
  83.         },
  84.         {
  85.             type: 'rect',
  86.             shape: rectHeadShape,
  87.             style: {
  88.               ...api.style(),
  89.               lineWidth: 1,
  90.               stroke: '#000'
  91.             }
  92.         },
  93.         {
  94.             type: 'rect',
  95.             shape: rectHeadShape2,
  96.             style: {
  97.               ...api.style(),
  98.               lineWidth: 1,
  99.               stroke: '#000'
  100.             }
  101.         }]
  102.     };
  103.   },

颜色定义, 我们为了让水管具有光泽使用了echarts的线性渐变色对象。

  1. itemStyle: {
  2.   // 渐变色对象
  3.   color: {
  4.     type: 'linear',
  5.     x: 0,
  6.     y: 0,
  7.     x2: 1,
  8.     y2: 0,
  9.     colorStops: [{
  10.         offset: 0, color: '#ddf38c' // 0% 处的颜色
  11.     }, {
  12.         offset: 1, color: '#587d2a' // 100% 处的颜色
  13.     }],
  14.     global: false // 缺省为 false
  15.   },
  16.   borderWidth: 3
  17. },

另外，用一个for循环一次性随机出多个柱子的数据

  1. function initObstacleData() {
  2.     // 添加minHeight防止空隙太小
  3.     let minHeight = 20;
  4.     let start = 150;
  5.     obstacleData = [];
  6.     for (let index = 0; index < 50; index++) {
  7.       const height = Math.random() * 30 + minHeight;
  8.       const obstacleStart = Math.random() * (90 - minHeight);
  9.       obstacleData.push(
  10.         [
  11.           start + 50 * index,
  12.           obstacleStart,
  13.           obstacleStart + height > 100 ? 100 : obstacleStart + height
  14.         ]
  15.       )
  16.     }
  17.   }

再将背景用游戏图片填充，我们就将整个游戏场景，绘制完成:

3 进行碰撞检测

由于飞行轨迹和障碍物数据都很简单，所以我们可以将碰撞逻辑简化为小鸟图片的正方形中，我们判断右上和右下角是否进入了自定义图形的范围内。

对于特定坐标下的碰撞范围，因为柱子固定每格50坐标值一个，宽度也是固定的，所以，可碰撞的横坐标范围就可以简化为 (x / 50 % 1) < 0.6

在特定范围内，依据Math.floor(x / 50)获取到对应的数据，即可判断出两个边角坐标是否和柱子区域有重叠了。在动画帧中判断，如果重叠了，就停止动画播放，游戏结束。

  1. // centerCoord为散点坐标点
  2. function judgeCollision(centerCoord) {
  3.   if (centerCoord[1] < 0 || centerCoord[1] > 100) {
  4.     return false;
  5.   }
  6.   let coordList = [
  7.     [centerCoord[0] + 15, centerCoord[1] + 1],
  8.     [centerCoord[0] + 15, centerCoord[1] - 1],
  9.   ]
  11.   for (let i = 0; i < 2; i++) {
  12.     const coord = coordList[i];
  13.     const index = coord[0] / 50;
  14.     if (index % 1 < 0.6 && obstacleData[Math.floor(index) - 3]) {
  15.       if (obstacleData[Math.floor(index) - 3][1] > coord[1] || obstacleData[Math.floor(index) - 3][2] < coord[1]) {
  16.         return false;
  17.       }
  18.     }
  19.   }
  20.   return false
  21. }
  23. function initAnimation() {
  24.   // 动画设置
  25.   timer = setInterval(() => {
  26.     // 小鸟速度和仰角调整
  27.     vh = vh - a;
  28.     option.series[0].data[0][1] += vh;
  29.     option.series[0].data[0][0] += vw;
  30.     option.series[0].symbolRotate = option.series[0].symbolRotate ? option.series[0].symbolRotate - 5 : 0;
  32.     // 坐标系范围调整
  33.     option.xAxis.min += vw;
  34.     option.xAxis.max += vw;
  36.     // 碰撞判断
  37.     const result = judgeCollision(option.series[0].data[0])
  39.     if(result) { // 产生碰撞后结束动画
  40.       endAnimation();
  41.     }
  43.     myChart.setOption(option);
  44.   }, 25);
  45. }

总结

echarts提供了强大的图形绘制自定义能力，要使用好这种能力，一定要理解好数据坐标点和像素坐标点之间的转换逻辑，这是将数据具象到画布上的重要一步。

运用好这个功能，再也不怕产品提出奇奇怪怪的图表需求。

源码地址：GitHub - foolmadao/echart-flappy-bird

点击关注，第一时间了解华为云新鲜技术~​

版权说明 : 本文为转载文章, 版权归原作者所有 版权申明

原文链接 : https://huaweicloud.blog.csdn.net/article/details/124725729

内容来源于网络，如有侵权，请联系作者删除！

echarts技术交流小游戏图表库图表

相关文章

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新文章

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com