JSFiddle - React, Tailwind, and code Playground

by Nathan Piper

HTML

<canvas id="game" width="500" height="500"></canvas>

JavaScript

var Key = {
  up: false,
  down: false,
  right: false,
  left: false,
  space: false
}

addEventListener(
  "keydown",
  function(e) {
    var keyCode = e.keyCode ? e.keyCode : e.which

    switch (keyCode) {
      case 38:
        Key.up = true
        break
      case 40:
        Key.down = true
        break
      case 39:
        Key.right = true
        break
      case 37:
        Key.left = true
        break
      case 32:
        Key.space = true
        break
    }
  },
  false
)

addEventListener(
  "keyup",
  function(e) {
    var keyCode = e.keyCode ? e.keyCode : e.which

    switch (keyCode) {
      case 38:
        Key.up = false
        break
      case 40:
        Key.down = false
        break
      case 39:
        Key.right = false
        break
      case 37:
        Key.left = false
        break
      case 32:
        Key.space = false
        break
    }
  },
  false
)
//////////////////////////////////////////////

var gameC = document.getElementById("game")
var gc = gameC.getContext("2d")
var fps = 60
var width = 500
var height = 500
var gameStart = false
var lSquareArmy = []
var bSquareArmy = []


function bSquare(x, y) {
  this.x = x
  this.y = y
  this.draw = function() {
  	gc.fillRect(this.x,this.y,20,20)
  }
  this.init = function() {}
}
function lSquare(x, y) {
  this.x = x
  this.y = y
  this.draw = function() {
  	gc.fillRect(this.x,this.y,10,10)
  }
  this.init = function() {}
}

var playerSquare = {
  x: width / 2,
  y: height / 2,
  speed: 5,
  scl: 10,
  mineTimer: 0,
  draw: function() {
    gc.fillRect(this.x, this.y, this.scl, this.scl)
  },
  init: function() {
    if(Key.space && this.mineTimer <= 0 && lSquareArmy.length < 20){
    	this.placeSquare()
      this.mineTimer += 1
    }
    console.log(this.mineTimer)
    console.log(lSquareArmy.length)
    if (Key.right) {
      this.x += this.speed
    }
    if (Key.left) {
      this.x -= this.speed
    }
    if (Key.up) {
      this.y -= this.speed
    }
    if...