JSFiddle - React, Tailwind, and code Playground

by sodacrunch

HTML

<title>Star Boss</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
 <body>
   <canvas id="canvas"></canvas>      
 </body>

CSS

body {padding: 0;margin: 0;overflow: none;}

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
win_width = window.innerWidth;
win_height = window.innerHeight;
ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight;
ctx.fillStyle = "#000000";
ctx.fillRect(0,0,win_width, win_height);

rightDown = false;
leftDown = false;
upDown = false;
downDown = false;
spaceDown = false;

function onKeyDown(evt) {
  if (evt.keyCode == 39) rightDown = true;
  else if (evt.keyCode == 37) leftDown = true;
  else if (evt.keyCode == 38) upDown = true;
  else if (evt.keyCode == 40) downDown = true;  
  else if (evt.keyCode == 32) spaceDown = true;
}
function onKeyUp(evt) {
  if (evt.keyCode == 39) rightDown = false;
  else if (evt.keyCode == 37) leftDown = false;
  else if (evt.keyCode == 38) upDown = false;
  else if (evt.keyCode == 40) downDown = false;  
  else if (evt.keyCode == 32) spaceDown = false;  
}

$(document).keydown(onKeyDown);
$(document).keyup(onKeyUp);

function Boss(){
  this.x = win_width/2;
  this.y = 100;
  this.width = "50"
  this.draw = function() {
    ctx.fillStyle = "#CC0099";
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.width, 0, Math.PI*2, true); 
    ctx.closePath();
    ctx.fill();
  }
  this.direction = "right";
  this.move = function() {
    if (this.x > (win_width - this.width)) this.direction = "left";
    if (this.x < (0 + this.width)) this.direction = "right";
    if (this.direction == "right") this.x += 5;
    if (this.direction == "left") this.x -= 2;
  }
}

function Player(){
  this.x = win_width/2;
  this.y = win_height-100;
  this.width = "10";
  this.shots = [];  
  this.get_input = function() {
    if (rightDown) this.x += 5;
    if (leftDown) this.x -= 5;
    if (upDown) this.y -= 5;
    if (downDown) this.y += 5;
    if (spaceDown) this.shoot();
    if (this.x > (win_width - this.width)) this.x = (win_width - this.width);
    else if (this.x < (0 + this.width)) this.x = (0 + this.width);
  }
  this.shoot = function () {
  ...