JSFiddle - React, Tailwind, and code Playground

by salalaslam

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/kineticjs/5.2.0/kinetic.min.js"></script>
<div id="container"></div>

CSS

body {
margin: 0px;
padding: 0px;
}

JavaScript

function loadImages(sources, callback) {
  var assetDir = 'http://www.html5canvastutorials.com/demos/assets/';
  var images = {};
  var loadedImages = 0;
  var numImages = 0;
  for(var src in sources) {
    numImages++;
  }
  for(var src in sources) {
    images[src] = new Image();
    images[src].onload = function() {
      if(++loadedImages >= numImages) {
        callback(images);
      }
    };
    images[src].src = assetDir + sources[src];
  }
}
function isNearOutline(animal, outline) {
  var a = animal;
  var o = outline;
  var ax = a.getX();
  var ay = a.getY();
  
  if(ax > o.x - 20 && ax < o.x + 20 && ay > o.y - 20 && ay < o.y + 20) {
    return true;
  }
  else {
    return false;
  }
}
function drawBackground(background, beachImg, text) {
  var context = background.getContext();

  context.drawImage(beachImg, 0, 0);
  context.setAttr('font', '20pt Calibri');
  context.setAttr('textAlign', 'center');
  context.setAttr('fillStyle', 'white');
  context.fillText(text, background.getStage().getWidth() / 2, 40);
}
function initStage(images) {
  var stage = new Kinetic.Stage({
    container: 'container',
    width: 578,
    height: 530
  });
  var background = new Kinetic.Layer();
  var animalLayer = new Kinetic.Layer();
  var animalShapes = [];
  var score = 0;

  // image positions
  var animals = {
    snake: {
      x: 10,
      y: 70
    },
    giraffe: {
      x: 90,
      y: 70
    },
    monkey: {
      x: 275,
      y: 70
    },
    lion: {
      x: 400,
      y: 70
    },
  };

  var outlines = {
    snake_black: {
      x: 275,
      y: 350
    },
    giraffe_black: {
      x: 390,
      y: 250
    },
    monkey_black: {
      x: 300,
      y: 420
    },
    lion_black: {
      x: 100,
      y: 390
    },
  };

  // create draggable animals
  for(var key in animals) {
    // anonymous function to induce scope
    (function() {
      var privKey = key;
      var anim = animals[key];

      var animal = new Kinetic.Image({
        image:...