JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>

  <title> GD 15 </title>
 
 


</head>



<body
id     = "bTag"
 
>

  <table 
  id = "scoreBoard"
  > 


    <tr>
      <td
      rowspan = "2"
      >
        <img id="gameBG" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/afecc0d4-019a-4e0b-9059-39b85f722a84/d4wgma4-2122b0fd-cb73-43bf-a56d-a9e21996cfba.jpg/v1/fill/w_1024,h_768,q_75,strp/underwater_scene_by_akchilug_d4wgma4-fullview.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3siaGVpZ2h0IjoiPD03NjgiLCJwYXRoIjoiXC9mXC9hZmVjYzBkNC0wMTlhLTRlMGItOTA1OS0zOWI4NWY3MjJhODRcL2Q0d2dtYTQtMjEyMmIwZmQtY2I3My00M2JmLWE1NmQtYTllMjE5OTZjZmJhLmpwZyIsIndpZHRoIjoiPD0xMDI0In1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmltYWdlLm9wZXJhdGlvbnMiXX0.eVlplXjBubk5XMv0ZO2egUXRSSFc3U6UIaX-M9c9J7c" alt="gameBG" width="600" height="500">

        <canvas id = "gameEnv" width = "600" height = "500">


        </canvas>
      </td>

    </tr>
 

    <tr>
      <th>

        <h2>  Feed The Fish </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...

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

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

      var
      clipX = 00,      // -- 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; 


    var 
    successBin = [],
    goArr      = [],
    dotArr     = [],
    dotCount   = 0,
    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;

    /* ====================================== 
    * color code arr
    * ======================================= */
 



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

    // -- status flags
    var 
    canonMF,
    newLF;

    // -- image
    var
    cursorImg;

    // -- user con
    var
    clearLaserFlag = 0;

    // -- bin
    var 
    binArr;

    // -- fish costume
    var
    fishCostArr = [];

    // -- bin class
    class Bin 
    {
      constructor( xCoord, yCoord, color, id )
      {
        this.xPos     = xCoord;
        this.yPos     = yCoord;
        this.bWidth   = 85;
        this.bHeight  = 85;

        this.bColor   = color;
        this.bId      = id;

      }

      check_if_correct_color( dotObj )
      {
        if( this.bColor == dotObj.fillC )
        {
          return 1;
        }
        else
        {
          return 0;
        }
      }

      check_if_correct_id( qaObj )
      {
        if( this.bId == qaObj.an )
        {
          return 1;
        }
        else
        {
          return 0;
        }
      }

    }

    // -- zip line class
    class ZipLine
    {
      constructor(...