$firstGameDemo

by mtambulut

HTML

<div id="app">
  <div id="score"></div>
  <svg id="svg"></svg>
  
  <div id="launch-screen" class="is-visible">
    
    <div id="launch-screen-content">
      <h1 id="launch-screen__title"></h1>
      <p id="launch-screen__description"></p>
      <button class="btn" id="start-btn">PLAY</button>
    </div>
  </div>
  
</div>

CSS

@keyframes jumping {
  0%    {transform:scale(2);}
  100%  {transform:scale(1);}
}

@keyframes dotReveal {
  to  {opacity:1;}
}

@keyframes line {
  0%    {stroke-dashoffset:0}
  100%    {stroke-dashoffset:100%}
}

body {
  cursor:crosshair;
  background-color: black;
  background-image: linear-gradient(to top, rgba(46, 204, 113,0.2) 1%, rgba(255,255,255,0) 0),
                    linear-gradient(to right, rgba(46, 204, 113,0.2) 1%, rgba(255,255,255,0) 0);
  background-size: 50px 50px;
}

svg, html, body, #app  {
  box-sizing: border-box;
  height:100%;
  width:100%;
  padding:0;
  margin:0;
  overflow:hidden;
}

svg {position: relative;z-index:1;}

.dot {
  z-index:10;
  stroke-width:4;
  stroke:black;
  width: 10px;
  height: 10px;
  fill: rgba(241, 196, 15,1.0);
  -moz-transform-origin: center;
  -webkit-transform-origin: center;
  transform-origin: center;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.320, 1.275);
}

.dot--starting.dot--starting {
  fill:black;
  stroke: rgba(46, 204, 113,1.0);
  stroke-width:3;
  stroke-miterlimit: outside;
}

.dot:not(.dot--starting) {
  opacity:0;
  animation: dotReveal 1s linear;
  animation-fill-mode: forwards;
}

#svg  .dot:hover {
  transform: scale(2);
}

#svg .dot[data-selected=true] {
  opacity:1;
  fill: rgba(46, 204, 113,1.0);
  animation: jumping 0.5s ease-in-out alternate infinite;
  animation-delay:0;
}

#svg  .dot[data-visited=true] {
  fill:rgba(46, 204, 113,1.0);
  animation: jumping 0.5s ease-in-out alternate infinite;
  animation-delay:0;
  opacity:1;
}

.line {
  z-index:10;
  stroke: rgba(46, 204, 113,1.0);
  stroke-width:2;
  stroke-dasharray: 2 16;
  animation: line 10s linear infinite;
}

@media (max-width:480px) { 
  #preline {
    display: none;
  }
}

#score {
  position: fixed;
  z-index:0;
  top: 50%;
  left:50%;
  width: 100%;
  text-align:center;
  transform: translate(-50%, -50%);
  font-size:20em;
  color: rgba(46, 204, 113,0.2);
  font-family: 'Bungee Outline', cursive;
}

.btn {
 ...

JavaScript

////////////////
// helpers
////////////////

function getDistance(obj1, obj2) {
  return Math.floor(
    Math.sqrt(Math.pow(obj1.cx - obj2.cx, 2) + Math.pow(obj1.cy - obj2.cy, 2))
  );
}

function getRandomArbitrary(min, max) {
  return Math.floor(Math.random() * (max - min) + min);
}

function comparator(a, b) {
  if (a[1] < b[1]) return -1;
  if (a[1] > b[1]) return 1;
  return 0;
}

function difference(source, toRemove) {
  return source.filter(function(value) {
    return toRemove.indexOf(value) == -1;
  });
}

////////////////
// global vars
////////////////

var svg = document.getElementById("svg");
var dotMatrix = document.createElementNS(
  "http://www.w3.org/2000/svg",
  "circle"
);
var lineMatrix = document.createElementNS("http://www.w3.org/2000/svg", "line");
var screenW = window.innerWidth;
var screenH = window.innerHeight;
var totalDist = document.getElementById("distance");

////////////////
// line constructor
////////////////

function Line(x1, y1, x2, y2) {
  this.x1 = x1;
  this.y1 = y1;
  this.x2 = x2;
  this.y2 = y2;
  this.el = document.createElementNS("http://www.w3.org/2000/svg", "line");
  this.class = "line";
  this.update = function(x1, y1, x2, y2) {
    this.el.setAttribute("x1", x1 || this.x1);
    this.el.setAttribute("y1", y1 || this.y1);
    this.el.setAttribute("x2", x2 || this.x2);
    this.el.setAttribute("y2", y2 || this.y2);
    this.setAttr("class", this.class);
  };
  this.setAttr = function(attr, value) {
    this.el.setAttribute(attr, value);
  };
  this.append = function() {
    svg.insertBefore(this.el, svg.firstChild);
  };
}

////////////////
// dot constructor
////////////////

function Dot(r, cx, cy) {
  this.r = r;
  this.cx = cx;
  this.cy = cy;
  this.el = document.createElementNS("http://www.w3.org/2000/svg", "circle");
  this.class = "dot";
  this.update = function() {
    this.el.setAttribute("r", this.r);
    this.el.setAttribute("cx", this.cx);
    this.el.setAttribute("cy", this.cy);
   ...