JSFiddle - React, Tailwind, and code Playground

by pz_godlin

HTML

<html>
  <head>
     <script>

        var canv, ctx;

        var mouse_is_down = false;

        var mouse_xy = ({x : 0, y : 0});


        var pic = new Image();

        pic.src = "pic.png";

        function get_canv_XY(e)
        {
            var x = e.pageX - canv.parentElement.offsetLeft;
            var y = e.pageY - canv.parentElement.offsetTop;

            return ({x : x, y : y});
        }


        Planet = function ()
        {

             this.start_time = new Date();
             this.speed      = 300;

             this.r = 150;


             this.parent = null;

             this.get_x = function ()
             {
                return this.r*Math.cos((new Date() - this.start_time)/this.speed);
             }

             this.get_y = function ()
             {
                return this.r*Math.sin((new Date() - this.start_time)/this.speed);
             }

             this.show = function(x, y)
             {
                if(this.parent != null)
                {
                    x += this.parent.get_x();
                    y += this.parent.get_y();
                }
                var  x1 =  this.get_x()+ x;
                var  y1 =  this.get_y()+ y;
                
                ctx.drawImage(pic, x1, y1, 55, 55);

             }

        }
        pla = new Planet();

        pla1 = new Planet();
        pla1.speed = 100;
        pla1.r = 80;
        pla1.parent = pla;



        function game_loop()
        {

             ctx.clearRect(0, 0, 600, 600);

             pla.show(mouse_xy.x, mouse_xy.y);

             pla1.show();
        }


        function init_canv()
        {
            ctx  = canv.getContext("2d");

            /*
            ctx.fillStyle   = '#F00';
            ctx.strokeStyle = '#0F0';
            ctx.lineWidth   = 2;


            ctx.fillRect(100, 100, 200, 200);
            //ctx.strokeRect(100, 100, 200, 200);
            //ctx.strokeRect(150, 150, 200, 200);

            ctx.clearRect(150,...