creeps

Creeps

Inspired by Dota

Credit

https://bl.ocks.org/mbostock/8027637
https://bl.ocks.org/mbostock/1705868
/boeric/6c00e5e6106d2db5b08a
https://github.com/d3/d3-polygon

The lanes.js was created by taking a svg exported from Sketch and converted to D3 using this tool svg2d3js

Audio

Blockbuilder

Built with blockbuilder.org

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <script src="https://d3js.org/d3-selection-multi.v1.min.js"></script>
  <style>
    
    :root {
  		--main-bg-color: rgb(183, 221, 223);;
		}
    
    body { 
      font-family: "Helvetica Neue";
      color: #61e4b4;
      margin:0;
      top:0;
      right:0;
      bottom:0;
      left:0; }
    
    .HUD {
      display: flex;
      flex-direction: row;
      position: absolute;
      bottom: 0;
      z-index: 2;
      padding: 10px;
    }
    
    .Time {
      font-size: 16px;
      color: var(--main-bg-color);
      margin-top: 3px;
    }
    
    .Loading {
      position: absolute;
      top: 0px;
      left: 0px;
    }
    
    .Loading > .Loading__Text {
      margin: 20px;
      color: var(--main-bg-color);
      font-size: 24px;
    }
    
    button {
        font-size: 14px;
        background: white;
        color: var(--main-bg-color);
        border: none;
        outline:none;
        padding: 4px 8px;
        letter-spacing: 1px;
      }
    
    button:hover {
      background: white;
      color: var(--main-bg-color);
    }
    
  </style>
  
</head>

<body>

<div class="Loading"><p class="Loading__Text">Loading...</p></div>
  <div id="svg"></div>
  
  <div class="HUD">
  	<div id="time" class="Time"></div>
     <audio id="audioElement" src="https://iondrimbafilho.me/autotron.mp3" crossorigin="anonymous"></audio>
        <div><button onclick="handleAudioPlay()">&#9658;</button></div>
        <div><button onclick="handleAudioPause()"> ||</button></div>
        <div><button onclick="document.getElementById('audioElement').volume+=0.1"> +</button></div>
        <div><button onclick="document.getElementById('audioElement').volume-=0.1"> -</button></div>
    </div>
  <script src="setup.js"></script>
  <script src="step.js"></script>
  <script src="homes.js"></script>
  <script src="lanes.js"></script>
  <script src="audio.js"></script>
</body>

https://d3js.org/d3.v5.min.js

https://d3js.org/d3-selection-multi.v1.min.js