JSFiddle - React, Tailwind, and code Playground

by andersand

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/victor/1.1.0/victor.min.js"></script>
<canvas width="400" height="300" id="can"></canvas>
<div>
  <label>dx: </label><label id="dx"></label><br/>
  <label>dy: </label><label id="dy"></label><br/>
</div>

CSS

body {
  background-color: #242623;
  margin: 0;
  padding: 0;
}
canvas {
  background-color: #333;
  cursor: crosshair;
}
div {
  position: absolute;
  top: 0; left: 0;

}

JavaScript

const can = document.getElementById("can")
const ctx = can.getContext("2d")
const pi2 = Math.PI * 2

const speed = 20

let r = 5

let cpoint = new Victor(200,200)
let ppoint = new Victor(200,200)
let mpoint = new Victor(0, 0)

plot()


function plot() {
	let dx = mpoint.distanceX(ppoint) >> 100 / 100
  let dy = mpoint.distanceY(ppoint) >> 100 / 100
  
  
  
  let vel = new Victor(dx / 10 , dy / 10)
	
  ctx.clearRect(0, 0, 400, 300) // clr canvas
  
  showInfo(dx, dy)
  
  // recalc pink 
  ppoint.add(vel)
  
  drawBullet(cpoint, "red")
  drawBullet(ppoint, "pink")
  drawBullet(mpoint, "yellow")
	
  setTimeout(plot, speed)
  
}

function showInfo(dx, dy) {
	document.querySelector("#dx").innerHTML = dx
	document.querySelector("#dy").innerHTML = dy
}


can.addEventListener("mousemove", function(ev) {
  mpoint.x = ev.clientX
  mpoint.y = ev.clientY
})

function drawBullet(point, color) {
  ctx.fillStyle = color
  ctx.beginPath()
  ctx.ellipse(point.x, point.y, r, r, 0, 0, pi2)
  ctx.fill()
}