JSFiddle - React, Tailwind, and code Playground

by electronoob

HTML

<canvas id="s" width="360" height="200"></canvas>
<canvas id="c" width="200" height="200"></canvas>
<canvas id="d" width="200" height="200"></canvas>

CSS

canvas {
  border: 2px solid #000;
  position:absolute;
  top: 10px;
  left: 10px;
}
canvas#d {
  opacity: 1;
  top: 250px;
}
canvas#c {
  opacity:1;
  top: 250px;
}

JavaScript

/* new ver ray casting */

var ctx = c.getContext("2d");
var dtx = d.getContext("2d");
var stx = s.getContext("2d");
var cos = Math.cos;
var sin = Math.sin;
var r = 100; // radius of ray
//var a = (Math.PI / 180) * 0;
var x;
var y;
var rs = -((Math.PI / 180) * 30); // ray start
var re = (Math.PI / 180) * 30;  // ray end
var degree = (Math.PI / 180);
var i;
var direction = 0; // angle of ray 
var playerx = 0;
var playery = 0;
var  kb = {
    l: 0,
    r: 0,
    u: 0,
    d: 0
  };
var  ai = {
    x: 400,
    y: 200
  };
  
  
window.onkeydown = function (e) {
  switch(e.keyCode) {
    case 38:
      kb.u = 1;
      e.preventDefault();
      break;
    case 40:
      kb.d = 1;
      e.preventDefault();
      break;
    case 37:
      kb.l = 1;
      e.preventDefault();
      break;
    case 39:
      kb.r = 1;
      e.preventDefault();
      break;
  }
};
window.onkeyup = function (e) {
  switch(e.keyCode) {
    case 38:
      kb.u = 0;
      e.preventDefault();
      break;
    case 40:
      kb.d = 0;
      e.preventDefault();
      break;
    case 37:
      kb.l = 0;
      e.preventDefault();
      break;
    case 39:
      kb.r = 0;
      e.preventDefault();
      break;
  }
};

window.setInterval(function (){
  if (kb.u) ai.y = ai.y-3;
  if (kb.d) ai.y = ai.y+3;
  if (kb.l) ai.x = ai.x-3;
  if (kb.r) ai.x = ai.x+3;

  if(ai.x<0) ai.x=0;
  if(ai.x>790) ai.x=790;
  if(ai.y<0) ai.y=0;
  if(ai.y>360) ai.y=360;
},4);
  
setInterval(function(){
	//playery+=0.2;
  //playerx+=0.2;
 direction+=0.01;
},30);

// generate a map
for(i=0;i<15;i++) {
  dtx.fillStyle = 'rgba('+gri(0,255)+','+gri(0,255)+','+gri(0,255)+',255)';
  dtx.fillRect(gri(0,200),gri(0,200), gri(2,50),gri(2,50));
}
var map = dtx.getImageData(0,0,200,200);

draw();

function getMapXY (x,y) {
if ( (x>200)||(y>200)||(x < 0)||(y<0) ) return {hit:0};
	var d = map;
  ctx.fillStyle = 'white';
  ctx.fillRect(x,y,3,3);
	xx = 4 * (x + (y * 200));
  val = d.data[xx+3];
  return {'r':d.data[xx], 'g':d.data[xx+1],...