JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<canvas id='world'></canvas>
<canvas id='background-canvas' class="background"></canvas>
<div id="status" class="ui"></div>
<div id="message" class="ui">
  <h2 id="title"></h2>
  <ul>
    <li>1. Protect the core.</li>
    <li>2. Gather energy (green dots).</li>
    <li>2. Hold SPACE for shield (depletes energy).</li>
  </ul>
  <a href="#" id="startButton">Start</a>
</div>

CSS

html{color:#000;background:#222222;}
a{cursor:pointer;}
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
li{list-style:none;}
caption,th{text-align:left;}
/* h1,h2,h3,h4,h5,h6{font-size:100%;} */
q:before,q:after{content:'';}
abbr,acronym {border:0;font-variant:normal;}
sup {vertical-align:text-top;}
sub {vertical-align:text-bottom;}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;outline-style:none;outline-width:0pt;}
legend{color:#000;}
a:focus,object,h1,h2,h3,h4,h5,h6{-moz-outline-style: none; border:0px;}
/*input[type="Submit"]{cursor:pointer;}*/
strong {font-weight: bold;}

body {
  overflow: hidden;
  font-family: Helvetica, Arial, sans-serif;
  color: #333333;
  font-size: 11px;
  background-color: #222222;
}

canvas {
  cursor: crosshair;
  z-index: 1;
}

canvas.background {
  z-index: 0;
}

.ui {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  color: #999999;
  text-align: left;
  padding: 8px;
  background-color: rgba(0,0,0,0.5);
  position: absolute;
  z-index: 2;
  margin: 0;
}

#message {
  padding: 16px;
  margin: 130px 0 0 0;
}

#status {
  width: 100%;
  height: 15px;
  padding: 8px;
  display: none;
}

#status .fps {
  position: absolute;
  right: 20px;
  display: inline;
}

#status span {
  color: #bbbbbb;
  font-weight: bold;
  margin-right: 5px;
}

#title {
  margin-bottom: 20px;
  color: #eeeeee;
}

.ui ul {
  margin: 10px 0 10px 0;
}

.ui a {
  outline: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 38px;
  text-decoration: none;
  color: #bbbbbb;
  padding: 2px;
  display: block
}

.ui a:hover {
  color: #ffffff;
  background-color: #000000;
}

JavaScript

CoreWorld = new function(){
  
  // The world dimensions
  var SCREEN_WIDTH = window.innerWidth;
  var SCREEN_HEIGHT = window.innerHeight;
  
  // Types of organisms
  var ORGANISM_ENEMY = 'enemy';
  var ORGANISM_ENERGY = 'energy';
  
  // Target framerate
  var FRAMERATE = 60;
  
  var canvas;
  var context;
  
  var canvasBackground;
  var contextBackground;
  
  // UI DOM elements
  var status;
  var message;
  var title;
  var startButton;
  
  // Game elements
  var organisms = [];
  var particles = [];
  var player;
  
  // Mouse properties
  var mouseX = (window.innerWidth - SCREEN_WIDTH);
  var mouseY = (window.innerHeight - SCREEN_HEIGHT);
  var mouseIsDown = false;
  var spaceIsDown = false;
  
  // Game properties and scoring
  var playing = false;
  var score = 0;
  var time = 0;
  var duration = 0;
  var difficulty = 1;
  var lastspawn = 0;
  
  // The world's velocity
  var velocity = { x: -1.3, y: 1 };
  
  // Performance (FPS) tracking
  var fps = 0;
  var fpsMin = 1000;
  var fpsMax = 0;
  var timeLastSecond = new Date().getTime();
  var frames = 0;
  
  /**
   * The SinuousWorld "constructor".
   */
  this.init = function(){
  
    canvas = document.getElementById('world');
    canvasBackground = document.getElementById('background-canvas');
    status = document.getElementById('status');
    message = document.getElementById('message');
    title = document.getElementById('title');
    startButton = document.getElementById('startButton');
    
    if (canvas && canvas.getContext) {
      context = canvas.getContext('2d');
      
      contextBackground = canvasBackground.getContext('2d');
      
      // Register event listeners
      document.addEventListener('mousemove', documentMouseMoveHandler, false);
      document.addEventListener('mousedown', documentMouseDownHandler, false);
      document.addEventListener('mouseup', documentMouseUpHandler, false);
      canvas.addEventListener('touchstart', documentTouchStartHandler, false);
     ...