JSFiddle - React, Tailwind, and code Playground

by lasquish

HTML

</head>
    <body>
            	<canvas id="canvas" width="100%" height="100%"></canvas>

    </body>
</html>

CSS

body {
	margin: 0;
}
#canvas {
	background-color: #000;
}

@font-face 
{
  font-family: neuropolitical rg;
  src: url("../www/font/neuropolitical rg.ttf");
}

JavaScript

(function() {

    var millimillimilli = 0;
    var millimilli = 0;
    var millisec = 0;
    var seconds = 0;
    var timer;

    function display() {

        if (millimillimilli >= 9) {
            millimillimilli = 0
            millimilli += 5
        }

        if (millimilli >= 9) {
            millimilli = 0
            millisec += 1
        }
        if (millisec >= 9) {
            millisec = 0
            seconds += 1
        } else
            millimillimilli += 1
        timerMessage.text = seconds + "." + millisec + millimilli + millimillimilli;
        timer = setTimeout("display()", 1);
    }

    function starttimer() {

        if (timer > 0) {
            return;
        }
        display();
    }

    function stoptimer() {
        clearTimeout(timer);
        timer = 0;
    }

    function startstoptimer() {
        if (timer > 0) {
            clearTimeout(timer);
            timer = 0;
        } else {
            display();
        }
    }

    /*
This JavaScript file contains five collision functions

- hitTestPoint
- hitTestCircle
- blockCircle
- hitTestRectangle
- blockRectangle

To use them you'll need a sprite object with these minimum properties:

var spriteObject =
{
  sourceX: 0,
  sourceY: 0,
  sourceWidth: 64,
  sourceHeight: 64,
  width: 64,
  height: 64,
  x: 0,
  y: 0,
  vx: 0,
  vy: 0,
  
  //Getters
  centerX: function()
  {
    return this.x + (this.width / 2);
  },
  centerY: function()
  {
    return this.y + (this.height / 2);
  },
  halfWidth: function()
  {
    return this.width / 2;
  },
  halfHeight: function()
  {
    return this.height / 2;
  },
  left: function()
  {
    return this.x;
  },
  right: function()
  {
    return this.x + this.width;
  },
  top: function()
  {
    return this.y;
  },
  bottom: function()
  {
    return this.y + this.height;
  }
};


*/


    //hitTestPoint

    function hitTestPoint(pointX, pointY, sprite) {
        var hit = pointX > sprite.left() && pointX < sprite.right() && pointY...