JSFiddle - React, Tailwind, and code Playground

by frogggeee McFrogggeee

HTML

<!DOCTYPE html>
<html>
<head>
<body>
<h3>mining game</h3>
<p>by frogggeee. use arrow keys to move. collect ores. go into the shop to buy stuff. it is incomplete</p>
<p id = "loading" ></p>
<p id = "energy"></p>
<p id = "storage"></p>
<canvas id = "canvas" width = "480" height = "360"></canvas>
<script>
// change x back if battery is 0
let page = 1;
let onShop = false;
let efficiency = 1; // for every 1 upgraded energy storage upgrade efficiency by 0.1. when the battery storage is at 20 the efficiency should be at 2 so the energy is decreased the same as if the energy storage was at 10.
let energyEfficiencyCost = 100;
let pressed = 0;
let energyStorageCost = 80;
let energyStorage = 10; // should be 10 to start out the game
let energyChangeCost = 20;
let over = false;
let digSpeedCost = 60;
let infoOn = true;
let infoOpen = true;
let mouseX = 0;
let mouseY = 0;
let clicked = false;
let shopOpen = false;
let energyChange = 10;
let energy = 0;
let touchingDugDirt = false;
let touchingDirt = false;
let touchingRock1 = false;
let touchingRock2 = false;
let touchingRock3 = false;
let touchingRight = false;
let touchingLeft = false;
let touchingUp = false;
let touchingDown = false;
let rockHardness = 0;
let money = 100;
let mainDigSpeed = 4;
let digSpeed = 0;
let playerX = 200;
let playerY = 200;
let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");
let worldType = [];
let worldX = [];
let worldY = [];
let loading = true;
let mainX = -2000;
let mainY = 90;
let trump = new Image();
trump.src = "https://clipart.info/images/ccovers/1495816049surprised-face-trump-png-transparent-clip-art.png";
let shop = new Image();
shop.src = "https://d3itj9t5jzykfd.cloudfront.net/ui/152759/image_5b746e2d32b94.ico";
// world is 200x549 blocks not including lava
let rightPressed = false;
let leftPressed = false;
let upPressed = false;
let downPressed = false;
document.addEventListener('mousedown', onDown, false);
document.addEventListener('mousemove',...