JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>

	<title> GD 5 </title>


</head>




<body
id     = "bTag"
>

  <table 
  id = "scoreBoard"
  > 


    <tr>
      <td
      rowspan = "2"
      >
        <img id="gameBG" src="https://vuongducnguyen.com/images/gamebackground.jpg" alt="gameBG" width="600" height="500">

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


        </canvas>
      </td>

 

    </tr>
 

    <tr>
      <td>
        <p id = "score"> </p>
      </td>

      <td>
        <p id = "zLCount"> </p>
      </td>
    </tr>
  </table>

	


 	

    
</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  : 170px;
      color  : #606060;
      border-bottom: 2px solid #606060;
      

    }

    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       = [],
      getPointImgArr    = [];

      // -- player
      var
      pImg,
      pImgClipX = 100,      // -- offset of the cropped image to the real image
      pImgClipY = 0,
      pImgClipW = 50,
      pImgClipH = 50,
      pImgX     = 0,      // -- position the entire block
      pImgY     = 200,
      pImgW     = 50,
      pImgH     = 50,      
      costumeArr,
      costumeNum,
      costumeOffset,
      hangTimeCount,    // -- total time in air, out loop
      intervalCount;    // -- wait this amount before subtracting hangTimeCount
 

      // -- background image
      var 
      img,
      clipX = 300,      // -- offset of the cropped image to the real image
      clipY = 760,
      clipW = 600,
      clipH = 300,
      imgX  = 00,      // -- position the entire block
      imgY  = 0,
      imgW  = 600,
      imgH  = 300,
      clipXLimit  = 300,
      clipYLimit  = 0,
      panDirCS    = 1,         // 0 - scroll right, l - scroll left 
      panDirNS    = 0,
      panROffset  = .5,
      panRLim     = 5,     
      panLOffset  = .5,
      panLLim     = 5,
      panOffsetCS = 0,
      panLimCS    = 0; 

      // -- mouse
      var
      mouseX = 0,
      mouseY = 0;

      // -- laser
      var 
      lX, 
      lY,
      lW,
      lH,
      p1LF,          // -- laser flag
      p1JF,          // -- jump flag
      lImg,
      p1LArr,
      laserImgArr;



      // -- circle
      var
      cXPos   = 50,
      cYPos   = 10,
      cRad    = 50,               // -- 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   ...