JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="field">
  <div class="puck"></div>
</div>

CSS

html{
  height:100%;
}
body{
  height:100%;
  margin:0px;
}
.field{
  position:fixed;
  left:0px;
  top:0px;
  right:0px;
  bottom:0px;
  background-color:#000;
}
.puck{
  position:absolute;
  left:50%;
  top:50%;
  width:60px;
  height:60px;
  margin-left:-30px;
  margin-top:-30px;
  background-color:#ff0000;
  border-radius:50%;
}

JavaScript

var slingshot = {

	slinging: false,

	puck: $('.puck'),
  
  puck_properties: { x: 0, y: 0, z: 0 },
  drag_properties: { x: 0, y: 0, z: 0 },
  
  mouse_start: { x: 0, y: 0 },
  mouse_current: { x: 0, y: 0 },
  
  field: $('.field'),
  
  distance: function(p1,p2){
  
    var a = p1.x - p2.x
    var b = p1.y - p2.y

    var c = parseInt(Math.sqrt( a*a + b*b ));
    
    return c;
  
  },
  
  init: function(){
  
  	cached_this = this;
  
  	cached_this.puck.mousedown(function(e){
    	
      cached_this.mouse_start = { x: e.clientX, y: e.clientY };
    	
      cached_this.slinging = true;
    
    });
    
    cached_this.puck.mouseup(function(e){
    	
      cached_this.mouse_current = { x: e.clientX, y: e.clientY };
    	
      cached_this.slinging = false;
    
    });
    
    cached_this.field.mousemove(function(e){
    
    	if(!cached_this.slinging){ return false; }
      
      cached_this.mouse_current = { x: e.clientX, y: e.clientY };
      
  		cached_this.puck.text(cached_this.distance(cached_this.mouse_start,cached_this.mouse_current));
    
    });
  
  }

}

slingshot.init();