JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>

	<title> Basic Shapes </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/underwater.png" alt="gameBG" width="600" height="500">

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


        </canvas>
      </td>
 

      <th>

        <h2>  Math Clean Up </h2>
        <ol>
          <li> We share Earth with animals. <span class = "water_blue">Unfortunetely, we do not do a good job of cleaning up after ourselves.</span> Because of that, there is alot of debris in the ocean and it hurts the animals.
          </li>
          <li> <span class = "water_blue">Your goal</span> is to clean up the debris to help save our beaches and ocean. <br/><br/>Don't let the debris near the boat or it will jam the engine and the game is over. </li> 
           

        </ol>
 
        <h2>  Rules</h2>
        <ol>
 
        	<li>The math question is at the top, left while the possible answers can be found to the middle, far right </li>
        	<li>Match the answer to the question - pick the best possible answer. </li>
          <li><span class = "water_blue">Game is over when: a.</span> 60 seconds are up <span class = "water_blue">b.</span> laser count is 0 <span class = "water_blue">c.</span> the large debris jams the engine</li>
        	<li>The large debris will move one step on <span class = "water_blue">every miss OR every 3 seconds.</span> </li>
          <li>Answer the question correctly and the <span class = "water_blue">boat speeds up to avoid the debris</span> </li>
        </ol>


        <!-- <h2>  Controls</h2>
        <ol>
          <li> Control the laser by <span...

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      : #3077B2;
      /*text-shadow   : 0px 1px 1px #c0c0c0;*/
    }

JavaScript

// -- HTML 5 canvas
      var 
      canvas,
      ctx,
      redrawCon,
      sampleCount,
      img,
      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        = 200,
  	  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 = 7;


      /* -- 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,
      onscreenList,
      answerList,
    ...