JSFiddle - React, Tailwind, and code Playground
HTML
<canvas id="canvas"></canvas>
CSS
#canvas
{
display: block;
}
JavaScript
window.onload = Construct();
var c;
var ctx;
var mouse ={x: 0,y: 0};
function Construct()
{
setTimeout(function(){
setInterval(drawLoop,30);
c=document.getElementById("canvas");
ctx=c.getContext("2d");
c.addEventListener('mousemove', function(e)
{
var m = getMousePos(c, e);
mouse.x = m.x;
mouse.y = m.y;
}, false);
}, 1);
}
function getMousePos(canvas, evt)
{
var rect = canvas.getBoundingClientRect();
var mouseX = evt.clientX - rect.top;
var mouseY = evt.clientY - rect.left;
return {
x: mouseX,
y: mouseY
};
}
function drawLoop()
{
setCanvasSize();
canvas.width = canvas.width;
drawEntities();
}
function setCanvasSize()
{
ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight;
}
function drawEntities()
{
drawProjectile();
}
function Projectile(x, y, mouseX, mouseY)
{
this.x = x;
this.y = y;
this.mouseX = mouseX;
this.mouseY = mouseY;
}
function drawProjectile()
{
projectileTrue = true;
var playerlocationX = 200;
var playerlocationY = 200;
var projectile = new Projectile(playerlocationX, playerlocationY, mouse.x, mouse.y)
while(projectile.mouseX > projectile.x && projectile.mouseY < projectile.y)
{
ctx.save();
ctx.beginPath();
ctx.translate(projectile.x, projectile.y);
ctx.arc(0,0,5,0,2*Math.PI);
ctx.fillStyle = "blue";
ctx.fill();
ctx.stroke();
ctx.restore();
if(projectile.mouseX > projectile.x && projectile.mouseY < projectile.y)
{
var stepsize = (projectile.mouseX - projectile.x) / (projectile.y - projectile.mouseY);
projectile.x += (stepsize + 1);
}
if(projectile.mouseY < projectile.y)
{
var stepsize = (projectile.y - projectile.mouseY) / (projectile.mouseX - projectile.x);
projectile.y -= (stepsize + 1);
}
}
while(projectile.mouseX < projectile.x && projectile.mouseY > projectile.y)
{
...