JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>

	<title> Capital of the Universe </title>
</head>



<body
id     = "bTag"
 
>

  <table 
  id = "scoreBoard"
  > 


    <tr>
      <td
      rowspan = "2"
      >
        <!-- <p>Image to use:</p> -->
        <!-- <img id="gameBG" src="https://vuongducnguyen.com/images/2560755-1920x1080-1920_Earth.jpg" alt="gameBG" width="600" height="500"> -->
        <img id="gameBG" src="../images/big_atomic_orig.png" alt="gameBG" width="1000" height="500">

        <!-- <p>Canvas:</p>       -->
        <canvas id = "gameEnv" width = "1000" height = "500">


        </canvas>
      </td>
  

    </tr>
 
  </table>

	<!--  sound effect -->
  <audio  id = "laserEffect" src="../audio_effects/07074221.wav"></audio>

 	



 


    
</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  : 300px;


      

    }

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

      /*color         : #25854E;*/
      color         : #3077B2;
      font-weight   : bold;
      text-shadow   : 0px 1px 1px #e0e0e0;
      text-transform: uppercase;

    }

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

    }

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

      color         : #505050;      
      border-bottom : 2px solid #606060;
      vertical-align: top;
      text-align    : left;
      font-weight   : bold;
      text-shadow   : 0px 1px 1px #e0e0e0;
      font-size     : 14px;
      font-family   : Arial, Tahoma;

    }
    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;
    }

    .water_blue
    {
      color      : #44A8FF;
      /*color      : #FFE566;*/
      /*text-shadow   : 0px 1px 1px #c0c0c0;*/
    }

JavaScript

// -- HTML 5 canvas
      var 
      canvas,
      ctx,
      redrawCon,
      sampleCount,
      img,
      img2,
      imgArr            = [],
      paddleImgSrcArr   = [],
      asteroidImgSrcArr = [],
      monImgSrcArr      = [],
      laserImgArr       = [];

      // -- audio context
      var
      audioCtxWin,
      audioCtxObj, 
      audioDOM,
      track,
      audioEffArr = [];

      // -- rectangle
      var 
      xPos    = 300,
      yPos    = 500,
      rWidth  = 50,
      rHeight = 50,
      paddle1Index = 0;

      // -- vars for rectangle 2
  	  var
  	  xPos2        = 245,
  	  yPos2        = 480,
  	  rWidth2      = 75,
  	  rHeight2     = 50,
  	  paddle2Index = 1,
      p2YOffset    = 10;


      // -- circle
      var
      cXPos   = 250,
      cYPos   = 230,
      cRad    = 9,               // -- radius
      cSAngle = 0,                // -- circle start angle
      cEAngle = Math.PI * 2,      // -- circle end angle
      ccw     = true,             // -- counter clock wise = true
      cXDir   = 1,
      cYDir   = 1,
      cXStep  = 3,
      cYStep  = 1,
      cArr    = [],
      cQALim  = 4,               // -- circle, qa limit loop controll var
      bounceLimit     = 10,
      currBounceCount = 0,
      bounceFlag      = 0;

      var 
      p1Score     = 5,
      scrollSpeed = 0,
      levelUp     = 1,
      p1LF        = 0,
      p1LArr      = [],
      laserLim    = 50;


      /* -- text using Canvas
      https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text
      https://developer.mozilla.org/en-US/docs/Web/API/AudioContext
      https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API

      */
      var 
      p1ScoreText = "P1 Score: ";


      var
      clipX = 600,      // -- offset of the cropped image to the real image
      clipY = 00,
      clipW = 600,
      clipH = 500,
      imgX  = 0,      // -- position the entire block
      imgY  = 0,
      imgW  = 600,
   ...