JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>

	<title> Build The Roller Coaster </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="https://vuongducnguyen.com/images/rc_bg.png" alt="gameBG" width="950" height="500">

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


        </canvas>
      </td>
 

    </tr>
 
  </table>

	<!--  sound effect -->
  <audio  id = "laserEffect" src="https://vuongducnguyen.com/remote_learning/audio_effects/heat-vision.mp3"></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,
      spiderImg,         
      imgArr            = [],
      paddleImgSrcArr   = [],
      asteroidImgSrcArr = [],
      monImgSrcArr      = [],
      laserImgArr       = [];

      // -- audio context
      var
      audioCtxWin,
      audioCtxObj, 
      audioDOM,
      track;

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

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


      // -- circle
      var
      cXPos   = 275,
      cYPos   = 230,
      cRad    = 100,               // -- 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  = 3,
      cArr    = [],
      cQALim  = 4;               // -- circle, qa limit loop controll var

      var 
      p1Score  = 0,
      levelUp  = 1,
      p1LF     = 0,
      p1LArr   = [],
      laserLim = 10;


      /* -- 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,
      imgH  = 500,
      clipXLimit = 220,
      clipYLimit = 0;   


      // -- QA array
      var
      allQAArr,
     ...