JSFiddle - React, Tailwind, and code Playground

by hustlerinc

HTML

<html>
    <head></head>
    <body onload="init();">
    <canvas id="canvas" width="400" height="300"></canvas>
    </body>
</html>

CSS

#canvas{border:1px solid black;margin:5px;}

JavaScript

var viewport = document.getElementById('viewport');
var ctx = viewport.getContext('2d');
var fps = 50;
var target;

function init(){
    setInterval(update, 1000 / fps);
}

function update(){
    ctx.clearRect(0, 0, 400, 300);
    draw();
    moveSoldier();
    targetSoldier();
}

function Soldier(){
    this.X = 50;
    this.Y = 50;
    this.radius = 10;
}
var soldier = new Soldier();
soldier.color = '#6B7E00';
soldier.stroke;

function moveSoldier(){
if(mouseX && mouseY){
    var newX = mouseX;
    var newY = mouseY;
}
if(target == 1){    
    if(soldier.X < newX){
        var stepsX = newX - soldier.X;
        soldier.X++;
    }
    if(soldier.Y < newY){
        var stepsY = newY - soldier.Y;
        soldier.Y++;
    }
    if(soldier.X > newX){
        var stepsX = newX - soldier.X;
        soldier.X--;
    }
    if(soldier.Y > newY){
        var stepsY = newY - soldier.Y;
        soldier.Y--;
    }
}
}

function targetSoldier(){
if(mouseX && mouseY){
    if(mouseX <= (soldier.X + soldier.radius)
    && mouseX >= (soldier.X - soldier.radius)
    && mouseY <= (soldier.Y + soldier.radius)
    && mouseY >= (soldier.Y - soldier.radius)){
        target = 1;
    }
}
}

function draw(){
    ctx.fillStyle = soldier.color;
    ctx.beginPath();
    ctx.arc(soldier.X, soldier.Y, soldier.radius, 10, 0, Math.PI*2, true);
    ctx.closePath();
    ctx.fill();
    if(target == 1){
    ctx.strokeStyle = '#01C3F9';
    ctx.lineWidth = 3;
    ctx.beginPath();
    ctx.arc(soldier.X, soldier.Y, soldier.radius, 10, 0, Math.PI*2, true);
    ctx.closePath();
    ctx.stroke();
    }
}

function findPos(obj) 
{
    var curleft = curtop = 0;
    if (obj.offsetParent) 
    {
        do 
        {
            curleft += obj.offsetLeft;
            curtop += obj.offsetTop;    
        } 
        while (obj = obj.offsetParent);
    }
    return [curleft,curtop];
}
CO = findPos(viewport); //CO stands for canvas offset

var mouse = [0, 0];
var mouseX;
function onclick(e)
{
    mouseX =...