JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>

	<title> Penalty Kick </title>







</head>



<body
id     = "bTag"

>

    <img id="gameBG" src="https://vuongducnguyen.com/images/pk_bg.png" alt="gameBG" width="1000" height="500">
 
    <canvas id = "gameEnv" width = "1000" height = "500">


    </canvas>
       


 	

    
</body>



</html>

CSS

canvas
    {
    	border: 2px solid #606060;
        
    }

    img#ship
    {
      display: none;  

    }

    table#scoreBoard
    {
      padding: 0px 0px 0px 0px;
      margin : 0px 0px 0px 0px;


    }

    table#scoreBoard tr
    {
      padding: 0px 0px 0px 0px;
      margin : 0px 0px 0px 0px;
      

    }

    table#scoreBoard tr th
    {
      padding: 0px 0px 0px 0px;
      margin : 0px 0px 0px 0px;

      height : 60px;
      width  : 170px;
      color  : #606060;
      border-bottom: 2px solid #606060;
      

    }

    table#scoreBoard tr td
    {
      padding    : 0px 0px 0px 0px;
      margin     : 0px 0px 0px 0px;

      /*border : 2px solid #c0c0c0;*/
      vertical-align: top;
      color      : #6405fa;
      font-size  : 40px;
      font-weight: bold;
      text-align : center;
      

    }

    img#gameBG
    {
      padding    : 0px 0px 0px 0px;
      margin     : 0px 0px 0px 0px;

      display    : none;
    }

JavaScript

var
    cObj,
    cContext,
    imgObj,
    rectPO,
    svgPO,
    sampleCount;

    var 
    successBin = [],
    goArr      = [],
    dotArr     = [],
    zipLineArr = [],
    a          = 0;

    var
    xStart0,
    yStart0,
    x0Dir, 
    y0Dir,
    xStart1,
    yStart1,
    x1Dir,
    y1Dir,
    x0Offset,
    y0Offset,
    uShipXPos,
    uShipYPos;

    var
    redrawCon;
    
    var
    mouseXStart, 
    mouseYStart,
    mouseXEnd,
    mouseYEnd,
    mouseYR,
    mouseXR,
    mouseTR,
    opcode;

      var
      clipX = 000,      // -- offset of the cropped image to the real image
      clipY = 00,
      clipW = 1000,
      clipH = 500,
      imgX  = 0,      // -- position the entire block
      imgY  = 0,
      imgW  = 1000,
      imgH  = 500,
      clipXLimit = 220,
      clipYLimit = 0; 


    // -- color code arr
    var
    colorVArr = [ "#006400", "#fa99ff", "#d69D70", "#3d6f87", "#06a578", "#f8a894", "#bcbcbcb", "#1f3a56", "#c2a6ba" ];


	// -- gui
    var 
    scoreDOM,
    pScore,
    zLDOM,
    zLNum;

    // -- status flags
    var 
    canonMF,
    newLF;

    // -- image
    var
    img;

    // -- soccer ball image
    var
    sbImg;

    // -- hit box of end point of kick zip line
    var 
    endXPos,
    endYPos;

    // -- 
    var 
    spotMarkerArr,
    userSMIndex,
    computerSMIndex,
    comZipLineObj,
    newRoundFlag;

    // --
    var
    gameMsg,
    playerScore;

      // -- circle class definition
      class Circle
      {
        constructor( xPos, yPos, rad )
        {

          this.cXPos   = xPos;
          this.cYPos   = yPos;
          this.cRad    = rad;               // -- radius
          this.cSAngle = 0;                // -- circle start angle
          this.cEAngle = Math.PI * 2;      // -- circle end angle
          this.ccw     = true;             // -- counter clock wise = true
          this.cXDir   = 1;
          this.cYDir   = -1;
          this.cXStep  = .5;
          this.cYStep  = .5;
 
 
         ...