Javascript Multilevel Raycaster

HTML

<div id="screen">
  <div id="background"></div>
  <div id="display"></div>
  <div id="pause"></div>
  <div id="itemBar"></div>
  <div id="debug"></div>
</div>

CSS

html,
body,
* {
  margin: 0px;
  padding: 0px;
  font-family: "Courier New", Courier, monospace;
  font-size: 10pt;
  cursor: none;
}

#screen {
  width: 100%;
  height: 100%;
}

#background {
  width: 100%;
  height: 100%;
  backgrouund-color: #FFF;
  z-index: -999999999;
}

#display {
  width: 100%;
  height: 100%;
  z-index: 0;
}

#pause {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: none;
}

#invImg {}

#debug {
  position: absolute;
  top: 5px;
  left: 5px;
  color: #666;
}

#itemBar {
  position: absolute;
  left: 0px;
  bottom: 5px;
  height: 60px;
  display: block;
  color: #FFF;
  background-color: #000;
  overflow: hidden;
}

#itemBar ul {
  padding: 9px 0 0 0;
  display: block;
}

#item,
#sItem {
  margin: 6px 2px;
  padding: 0px 16px 0 0;
  width: 16px;
  height: 16px;
  background: url(http://f.cl.ly/items/0D351w0c313q36222D35/terrain.png);
  background-repeat: no-repeat;
  display: inline;
}

#invAm {
  margin: 10px 0 0 0;
  color: #666;
  font-size: 8pt;
}

#item {
  outline: 2px solid #666;
}

#sItem {
  outline: 2px solid #FFF;
}

JavaScript

var showOverlay = true;
var debugMode = false;
var pausedMode = false;

var lastGameCycleTime = 0;
var gameCycleDelay = 1000 / 30;
var CycleDelay;

var map = [
  [
    [1, 1, 1, 1, 1, 1, 1, 1],
    [1, 1, 1, 1, 1, 1, 1, 1],
    [1, 1, 1, 1, 1, 1, 1, 1],
    [1, 1, 1, 1, 1, 1, 1, 1],
    [1, 1, 1, 1, 1, 1, 1, 1],
    [1, 1, 1, 1, 1, 1, 1, 1],
    [1, 1, 1, 1, 1, 1, 1, 1],
    [1, 1, 1, 1, 1, 1, 1, 1]
  ],
  [
    [1, 1, 1, 1, 1, 1, 1, 1],
    [1, 0, 0, 0, 0, 0, 0, 1],
    [1, 0, 1, 0, 1, 1, 0, 1],
    [1, 0, 0, 1, 1, 1, 0, 1],
    [1, 0, 1, 1, 1, 0, 0, 1],
    [1, 0, 1, 1, 0, 1, 0, 1],
    [1, 0, 0, 0, 0, 0, 0, 1],
    [1, 1, 1, 1, 1, 1, 1, 1]
  ],
  [
    [1, 1, 1, 1, 1, 1, 1, 1],
    [1, 0, 0, 0, 0, 0, 0, 1],
    [1, 0, 0, 0, 0, 0, 0, 1],
    [1, 0, 0, 0, 1, 0, 0, 1],
    [1, 0, 0, 1, 0, 0, 0, 1],
    [1, 0, 0, 0, 0, 0, 0, 1],
    [1, 0, 0, 0, 0, 0, 0, 1],
    [1, 1, 1, 1, 1, 1, 1, 1]
  ]
];

var player = {
  x: 0,
  y: 0,
  z: 0,

  dir: 0,
  speed: 0.18,

  verMove: 0,
  horMove: 0,
  verLook: 0,
  horLook: 0,

  inv: [2, 4, 3, 5, 0, 0, 0, 0, 0, 0],
  invAm: [4, 5, 16, 2, 0, 0, 0, 0, 0, 0],
  invPos: 0
};

var blocks = [
  ["none", 256, 256],
  ["Grass-Top", 0, 0],
  ["Stone", 16, 0],
  ["Dirt", 32, 0],
  ["Grass-Side", 48, 0],
  ["Plank", 64, 0],
];

$ = function(tag) {
  return document.querySelector(tag)
};

function log(msg) {
  console.log(msg);
}

function gameCycle() {
  var now = new Date().getTime();
  var timeDelta = now - lastGameCycleTime;

  cycleDelay = gameCycleDelay;
  if (timeDelta > cycleDelay) {
    cycleDelay = Math.max(1, cycleDelay - (timeDelta - cycleDelay))
  }

  invBar();
  overlay();
  bindKeys();

  lastGameCycleTime = now;
  setTimeout(gameCycle, cycleDelay);
}

var invBarDisp;

function invBar() {
  invBarDisp =
    '<b>Space Bar to Show/Hide the Overlay</b><br>' +
    '<b>Press \'B\' to "place" a block</b><br>' +
    '<div class="itemBar"><ul>';
  var i = 0;
  while (i < player.invPos) {
    invBarDisp += '<li id="item"...