JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>

	<title> Basic Shapes </title>
<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">

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


        </canvas>
      </td>
 

      <th>
        <h2>  Controls</h2>
        <ol>
        	<li> Press Green "Run" button and then click on space background</li> 
        	<li> Press "o" on your keyboard to move left paddle up</li>
        	<li> Press "l" on your keyboard to move left paddle down</li>
        	<li> Fire laser using space bar </li>

        </ol>

        <h2>  Rules</h2>
        <ol>
 
        	<li>Touch paddle to get a single point </li>
        	<li>Laser touching "Pong Object" gets 3x points </li>
          <li>Spike is a hazard, lose 1x point </li>
        	<li>Game ends after 3000 samples. </li>
        </ol>
      </th>

    </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;
      color  : #606060;
      border-bottom: 2px solid #606060;
      vertical-align: top;
      text-align: left;
      

    }

    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

// -- HTML 5 canvas
      var 
      canvas,
      ctx,
      redrawCon,
      sampleCount,
      img,
      imgArr            = [],
      paddleImgSrcArr   = [],
      asteroidImgSrcArr = [],
      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 = 5;


      /* -- 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 = 200,      // -- offset of the cropped image to the real image
      clipY = 600,
      clipW = 600,
      clipH = 500,
      imgX  = 0,      // -- position the entire block
      imgY  = 0,
      imgW  = 600,
      imgH  = 500,
      clipXLimit = 0,
      clipYLimit = 0;   


      // -- QA array
      var
      allQAArr,
      onscreenList,
      answerList,
      chosenQAObj;

      // --...