Highcharts Demo

author(s): Torstein Hønsi

by Black Label

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>

  <main class="main">
    <div id="game-container" class="game-container"></div>
    <section id="mobile-controllers" class="mobile-controllers mobile-controllers--hidden">
      <button id="mobile-controllers__left" class="mobile-controllers__left"></button>
      <button id="mobile-controllers__right" class="mobile-controllers__right"></button>
      <button id="mobile-controllers__up" class="mobile-controllers__up"></button>
      <button id="mobile-controllers__down" class="mobile-controllers__down"></button>
    </section>

CSS

.main {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.game-container {
  max-width: 700px;
  width: 100%;
  max-height: 700px;
  height: 100%;
}

.mobile-controllers {
  height: 12.5rem;
  width: 12.5rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-areas:
    ". up ."
    "left empty right"
    ". down .";
}

.mobile-controllers--hidden {
  display: none;
}

.mobile-controllers__left {
  grid-area: left;
}

.mobile-controllers__up {
  grid-area: up;
}

.mobile-controllers__down {
  grid-area: down;
}

.mobile-controllers__right {
  grid-area: right;
}

JavaScript

function getRandomNumber(max) {
  return Math.round(1 + (Math.random() * (max - 1)));
}

function getRandomData(amount) {
  const randomData = [];
  for (let i = 0; i < amount; i += 1) {
    randomData.push([getRandomNumber(10), getRandomNumber(10)]);
  }
  return randomData;
}

function getRandomColor() {
  return `rgb(
        ${getRandomNumber(255)},
        ${getRandomNumber(255)},
        ${getRandomNumber(255)})
    `;
}

class Snake {
  constructor(chart) {
    this.initialX = chart.plotLeft;
    this.initialY = chart.plotTop;
    this.translateX = 0;
    this.translateY = 0;
    this.size = 20;
    this.chart = chart;
    this.interval = null;
    this.svgGroup = null;
    this.segments = [];
    this.direction = 'DOWN';
    this.refreshRate = 100;
    this.score = 0;
  }

  addKeyDownListener() {
    const isIE = Boolean(window.document.documentMode);
    const eventDirections = isIE ?
      ['Right', 'Left', 'Up', 'Down'] :
      ['ArrowRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown'];
    document.addEventListener('keydown', (event) => {
      switch (event.key) {
        case eventDirections[0]:
          if (this.direction !== 'LEFT') {
            this.setDirection('RIGHT');
          }
          break;
        case eventDirections[1]:
          if (this.direction !== 'RIGHT') {
            this.setDirection('LEFT');
          }
          break;
        case eventDirections[2]:
          if (this.direction !== 'DOWN') {
            this.setDirection('UP');
          }
          break;
        case eventDirections[3]:
          if (this.direction !== 'UP') {
            this.setDirection('DOWN');
          }
          break;
      }
    });
  }

  renderHead() {
    this.svgGroup = this.chart.renderer.g().add().toFront();

    this.chart.snakeHead = this.chart.renderer
      .rect(this.initialX, this.initialY, this.size, this.size)
      .attr({
        fill: 'rgb(51,85,139)',
        'stroke-width': 1,
        stroke: 'white'
      })
     ...