没想到吧！这个可可爱爱的游戏居然是用 ECharts 实现的！

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

const myChart = echarts.init(document.getElementById('main'));
option = {
  series: [
  {
    name: 'bird',
    type: 'scatter',
    symbolSize: 50,
    symbol: 'image://bird.png',
    data: [
    [50, 80]
    ],
    animation: false
  },
  ]
};
myChart.setOption(option);

option = {
  series: [
  {
    xAxis: {
    show: false,
    type: 'value',
    min: 0,
    max: 200,
    },
    yAxis: {
    show: false,
    min: 0,
    max: 100
    },
    name: 'bird',
    type: 'scatter',
    symbolSize: 50,
    symbol: 'image://bird.png',
    data: [
    [50, 80]
    ],
    animation: false
  },
  ]
};
// 设置速度和加速度
let a = 0.05;
let vh = 0;
let vw = 0.5
timer = setInterval(() => {
  // 小鸟位置和仰角调整
  vh = vh - a;
  option.series[0].data[0][1] += vh;
  option.series[0].data[0][0] += vw;
  option.series[0].symbolRotate = option.series[0].symbolRotate ? option.series[0].symbolRotate - 5 : 0;
  // 坐标系范围调整
  option.xAxis.min += vw;
  option.xAxis.max += vw;
  myChart.setOption(option);
}, 25);

   

• 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 中定义的样式信息。  
  

   

• type: group, 组合类，可以将多个图形类组合成一个图形，子类放在children中。   
  
• type: rect， 矩形类，通过定义矩形左上角坐标点，和矩形宽高确定图形。  
  

// 数据项定义为[x坐标，下方水管上侧y坐标， 上方水管下侧y坐标]
data: [
  [150, 50, 80],
  ...
]
renderItem: function (params, api) {
  // 获取每个水管主体矩形的起始坐标点
  let start1 = api.coord([api.value(0) - 10, api.value(1)]);
  let start2 = api.coord([api.value(0) - 10, 100]);
  // 获取两个水管头矩形的起始坐标点
  let startHead1 = api.coord([api.value(0) - 12, api.value(1)]);
  let startHead2 = api.coord([api.value(0) - 12, api.value(2) + 8])
  // 水管头矩形的宽高
  let headSize = api.size([24, 8])
  // 水管头矩形的宽高
  let rect = api.size([20, api.value(1)]);
  let rect2 = api.size([20, 100 - api.value(2)]);
  // 坐标系配置
  const common = {
    x: params.coordSys.x,
    y: params.coordSys.y,
    width: params.coordSys.width,
    height: params.coordSys.height
  }
  // 水管形状
  const rectShape = echarts.graphic.clipRectByRect(
    {
    x: start1[0],
    y: start1[1],
    width: rect[0],
    height: rect[1]
    },common
  );
  const rectShape2 = echarts.graphic.clipRectByRect(
    {
    x: start2[0],
    y: start2[1],
    width: rect2[0],
    height: rect2[1]
    },
    common
  )
  // 水管头形状
  const rectHeadShape = echarts.graphic.clipRectByRect(
    {
    x: startHead1[0],
    y: startHead1[1],
    width: headSize[0],
    height: headSize[1]
    },common
  );
  const rectHeadShape2 = echarts.graphic.clipRectByRect(
    {
    x: startHead2[0],
    y: startHead2[1],
    width: headSize[0],
    height: headSize[1]
    },common
  );
  // 返回一个group类，由四个矩形组成
  return {
    type: 'group',
    children: [{
      type: 'rect',
      shape: rectShape,
      style: {
        ...api.style(),
        lineWidth: 1,
        stroke: '#000'
      }
    }, {
      type: 'rect',
      shape: rectShape2,
      style: {
        ...api.style(),
        lineWidth: 1,
        stroke: '#000'
      }
    },
    {
      type: 'rect',
      shape: rectHeadShape,
      style: {
        ...api.style(),
        lineWidth: 1,
        stroke: '#000'
      }
    },
    {
      type: 'rect',
      shape: rectHeadShape2,
      style: {
        ...api.style(),
        lineWidth: 1,
        stroke: '#000'
      }
    }]
  };
  },

itemStyle: {
  // 渐变色对象
  color: {
  type: 'linear',
  x: 0,
  y: 0,
  x2: 1,
  y2: 0,
  colorStops: [{
    offset: 0, color: '#ddf38c' // 0% 处的颜色
  }, {
    offset: 1, color: '#587d2a' // 100% 处的颜色
  }],
  global: false // 缺省为 false
  },
  borderWidth: 3
},

function initObstacleData() {
  // 添加minHeight防止空隙太小
  let minHeight = 20;
  let start = 150;
  obstacleData = [];
  for (let index = 0; index < 50; index++) {
    const height = Math.random() * 30 + minHeight;
    const obstacleStart = Math.random() * (90 - minHeight);
    obstacleData.push(
    [
      start + 50 * index,
      obstacleStart,
      obstacleStart + height > 100 ? 100 : obstacleStart + height
    ]
    )
  }
  }

// centerCoord为散点坐标点
function judgeCollision(centerCoord) {
  if (centerCoord[1] < 0 || centerCoord[1] > 100) {
  return false;
  }
  let coordList = [
  [centerCoord[0] + 15, centerCoord[1] + 1],
  [centerCoord[0] + 15, centerCoord[1] - 1],
  ]
  for (let i = 0; i < 2; i++) {
  const coord = coordList[i];
  const index = coord[0] / 50;
  if (index % 1 < 0.6 && obstacleData[Math.floor(index) - 3]) {
    if (obstacleData[Math.floor(index) - 3][1] > coord[1] || obstacleData[Math.floor(index) - 3][2] < coord[1]) {
    return false;
    }
  }
  }
  return false
}
function initAnimation() {
  // 动画设置
  timer = setInterval(() => {
  // 小鸟速度和仰角调整
  vh = vh - a;
  option.series[0].data[0][1] += vh;
  option.series[0].data[0][0] += vw;
  option.series[0].symbolRotate = option.series[0].symbolRotate ? option.series[0].symbolRotate - 5 : 0;
  // 坐标系范围调整
  option.xAxis.min += vw;
  option.xAxis.max += vw;
  // 碰撞判断
  const result = judgeCollision(option.series[0].data[0])
  if(result) { // 产生碰撞后结束动画
    endAnimation();
  }
  myChart.setOption(option);
  }, 25);
}