JSFiddle - React, Tailwind, and code Playground

by frogggeee McFrogggeee

HTML

<!DOCTYPE html>
<html>
<head>

<body>
<h1>world explorer</h1>
<p>by frogggeee</p>
<p>-</p>
<p>instructions: use the arrow keys to move. explore underground.</p>
<h3>==========</h3>
<style>
* { padding: 0; margin: 0; } 
canvas { background: #eee; display: block; margin: 0 auto; }
</style>
<canvas id="myCanvas" width="480" height="360"></canvas>
<p id = "thecode"></p>
<script>
var orex = [16, 3, 14, 8, 2];
var orey = [9, 5, 2, 13, 12];
var world = [];
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var element = 0;
var l1 = 0;
var l2 = 0;
var x = 600;
var y = 300;
var rightpressed = false;
var leftpressed = false;
var uppressed = false;
var downpressed = false;
var thx = 0;
var thy = 0;
var bedxx = [];
var bedyy = [];
var bedcolor = [];
function setbedxy() {
var iii = 0;
for (iii = 0;iii < 100;iii++) {
	thx = Math.floor((Math.random()) * 18) + 1;
  thy = Math.floor((Math.random()) * 18) + 1;
  thy = Math.floor((Math.random()) * 2) + 1;
  bedxx.push(thx);
  bedyy.push(thy);
  bedcolor.push(col);
}
}
// 38 = up
// 40 = down
// 39 = right
// 37 = left
  document.addEventListener("keydown", keyDownHandler, false);
  document.addEventListener("keyup", keyUpHandler, false);  
  function keyDownHandler(e) {
    if(e.keyCode == 39) {
        rightPressed = true;
    }
    else if(e.keyCode == 37) {
        leftPressed = true;
    }
    if (e.keyCode == 40) {
    	uppressed = true;
    } else if (e.keyCode == 38) {
    	downpressed = true;
    }
}

function keyUpHandler(e) {
    if(e.keyCode == 39) {
        rightPressed = false;
    }
    else if(e.keyCode == 37) {
        leftPressed = false;
    } 
    if (e.keyCode == 40) {
    	uppressed = false;
    } else if (e.keyCode == 38) {
    	downpressed = false;
    }
}
// 8 = bedrock
// 1 = stone
// 2 = dirt
// 3 = dirt with grass
// 4 = coal
// 5 = gold
// 6 = diamond 
// 7 = emerald
// 9 = iron
generate1(); // this generates the code for the world
function generate1() {
x = 0;
y =...