开源图表库Highcharts教程:Highcharts的蛇游戏

翻译|使用教程|编辑:杨鹏连|2020-07-09 10:37:16.780|阅读 24 次

概述:Highcharts是一个高度可定制的库,允许用户创建几乎可以想象的任何基于SVG的交互式可视化,甚至包括游戏!在本教程中,我们将在较低级别上查看Highcharts库,以将您的图表转换为蛇形游戏。

# 您正在找协同办公软件吗?点击这里站长给您推荐 #

相关链接:

Highcharts是一款纯JavaScript编写的图表库,为你的Web网站、Web应用程序提供直观、交互式图表。当前支持折线、曲线、区域、区域曲线图、柱形图、条形图、饼图、散点图、角度测量图、区域排列图、区域曲线排列图、柱形排列图、极坐标图等几十种图表类型。

点击下载Highcharts最新试用版

Highcharts是一个高度可定制的库,允许用户创建几乎可以想象的任何基于SVG的交互式可视化,甚至包括游戏!

以前,我们研究过使用Highcharts Gantt 创建交互式拼图。在本教程中,我们将在较低级别上查看Highcharts库,以将您的图表转换为蛇形游戏(参见下文):

本文有两个主要部分。第一部分将介绍一些基本概念,例如SVG Renderer和SVG Element。在第二部分中,您将看到如何制作蛇,如何使其移动以及如何喂食小吃。

SVG渲染器

Highcharts SVG渲染器是一种可能有助于实现Highcharts核心中未包含的自定义元素的基本工具。它可以用来向您的图表添加可以以任何形状创建的自定义SVG元素-如果您在使用画布API之前就感到宾至如归,那么唯一的限制就是想像力。

SVG元素

可以渲染一些基本元素,可以创建一个圆形,弧形,矩形,文本元素,标签,按钮,符号或绘制路径。这次,我们将专注于渲染将用于创建蛇形主体的矩形。

制造一条蛇

在开始渲染之前,我们需要创建一个可以放置渲染元素的层。为此,您可以使用已经存在的图表,但是值得一提的是,可以创建一个独立的SVG图。
因为我想创建一个可以与图表互动的游戏,所以我从一个基本的散点图开始。

const chart = Highcharts.chart('container', {
  chart: {
    type: 'scatter'
  },
  series: [{
    data: [4, 3, 5, 6, 2, 3]
  }]
});

现在,可以直接从刚刚创建的图表访问渲染器。要使用它并创建第一个矩形,我们可以使用renderer.rect(x,y,width,height)方法。该方法有四个参数:

  1. x –距容器左侧的距离(以px为单位)
  2. y –距容器顶部的距离
  3. 矩形的宽度
  4. 矩形的高度

渲染器矩形

使用renderer方法将返回具有给定坐标和大小的SVG元素。尽管如此,将它添加到我们的图表前,我们需要应用像某些属性fill,stroke或者使我们的矩形可见。为此,可以使用attr()方法。在指定了这些属性之后,我们最终可以使用add()方法将SVG元素添加到图表中。stroke-width
const snake = chart.renderer.rect(0, 0, 20, 20)
  .attr({
    fill: 'red'
  })
  .add();

让它动起来!

在上一段中,我们学习了如何渲染一个简单的矩形,但这只是静态的。我们的蛇应该更活泼。要唤醒它,我们需要学习方法。这将使我们能够将元素移动一定的x和y值。因此,如果我们想将蛇向右移动100px,则应使用:translate()

snake.translate(100,0);
现在,我们可以利用这些知识告诉我们的蛇不断地移动到正确的大小,直到它无法进一步移动为止(我们不希望他逃跑,对吧?)。为此,我们可以创建一个简单的时间间隔,每次将蛇移动一个增加的值。然后,我们需要找到一个图表属性,使我们能够定义将蛇保留在图表内的边界。在这种情况下,我们可以使用该属性。此外,我们可以使用其他图表属性- 并更新蛇的初始位置(现在将其绘制在绘图区域之外,我们希望它位于蛇形图的内部)。chart.plotWidthchart.plotLeftchart.plotTop

const snake = chart.renderer.rect(
    chart.plotLeft,
    chart.plotTop,
    20,
    20
  )
  .attr({
    fill: 'red'
  })
  .add();
let x = 0;
setInterval(() = & gt; {
  if (x + 20 & lt; chart.plotWidth) {
    x += 20;
    snake.translate(x, 0);
喂蛇

到目前为止,我们已经学会了如何制作一条蛇,使他能够移动,但是他仍然缺乏一项非常重要的技能-吃点。为此,当某个点与我们的蛇处于同一位置时,我们需要以某种方式删除该点。为了简化操作,我将为所有点设置相同的值,并为两个轴设置最小和最大属性值。

const chart = Highcharts.chart('container', {
  chart: {
    type: 'scatter'
  },
  xAxis: {
    min: 0,
    max: 8
  },
  yAxis: {
    min: 0,
    max: 8
  },
  series: [{
    pointStart: 1,
    data: [8, 8, 8, 8, 8, 8, 8, 8]
  }]
});

现在我们准备实现此功能。我们要做的就是将蛇的像素位置与点进行比较。

为了获得实际的蛇位置,我们需要在其初始位置添加一个转换值。可以在property 下找到转换值,以获取初始位置,我们可以使用attr()方法返回某个属性的值。snake.translateX

const snakePosX = snake.attr('x') + snake.translateX;

查找点的像素坐标的方法有多种,但是最简单的方法是使用轴toPixels()方法,该方法将返回值在图表或轴上的像素位置。

const pointPosX = xAxis.toPixels(point.x)

现在,我们要做的就是创建一个简单的函数,该函数将遍历所有点并删除其距离小于蛇形大小的距离。要删除一个点,我们可以使用方法。然后,我们可以在负责移动蛇的间隔内调用该函数。我们的蛇终于学会了如何吃图表积分。coderemove()

function onCollision() {
  const xAxis = chart.xAxis[0],
    points = chart.series[0].points,
    snakePosX = snake.attr('x') + snake.translateX;

  points.forEach(point = & gt; {
    const pointPosX = xAxis.toPixels(point.x);

    if (Math.abs(snakePosX - pointPosX) & lt; 20) {
      point.remove();
    }
  })
}

我们的蛇学到了一些基本能力。当然,要创建一个功能齐全的游戏,我们还有很多地方需要改进,但是本文介绍了与蛇与Highcharts库集成有关的最重要部分。

随意使用代码检查游戏的最终版本。如果您有任何问题或意见,请告诉我,我们将很高兴收到您的来信。


想要购买Highcharts正版授权,或了解更多产品信息请点击【咨询在线客服】



标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,尊重他人劳动成果

文章转载自:Highsoft

登录 慧都网发表评论


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
相关厂商
相关产品
Highcharts

纯JavaScript编写的开源图表库,为你的Web应用程序提供直观的、交互式图表

在线
客服
咨询
电话
400-700-1020
在线
QQ
购物车 反馈 返回
顶部
在线客服系统
live chat