2D Collision Detector v4

* Uses 2D bounding box. * Player rotates. * Accepts multiple concurrent keys.

HTML

<script src="http://threejs.org/build/three.min.js"></script>
<script src="http://threejs.org/examples/js/libs/stats.min.js"></script>
<script src="http://threejs.org/examples/js/controls/PointerLockControls.js"></script>

<!-- h1 id="title_A">2D Collision Detection</h1 -->
<!--- After Lee Stemkoski &  /u/AndreasElia 2016 -->
<!--- Use keys W,A,S,D and arrow keys to move player, use Numpad 4,6 to rotate player -->
<!--- Use Numpad keys 2,5,8 to rotate camera up-centre-down -->

<input type="text" id="myTextField" value="QQQ" size = "48" />
<input type="submit" id="byBtn" value="Reset" onclick="F_UserClickButton()" />
<!-- NB In jsfiddle Frameworks & Extensions select No wrap - in <body> -->

CSS

body {
    background-color: #fff;
    color: #444;
    margin: 0px;
    overflow: hidden;
    font-family: Tahoma;
    font-size: 13px;
}
#stats {
    position: absolute;
    left: 0px;
    right: 0px;
}

JavaScript

var element = document.body;

var WIDTH  = window.innerWidth,
    HEIGHT = window.innerHeight;

var ASPECT = WIDTH / HEIGHT;

var UNITSIZE = 10;     //...# of units along each side of the square grid
var scale = 1;         //... cube edge length/width/height  
//var cubeR = 1.414/2;   //... radius of bounding sphere.
//var moverR = 0.25;     //... mover radius for collision detection.http://jsfiddle.net/29kLct0y/13/#
var WALLSIZE = 16;     //unused???

var t = THREE, stats, loader;
var scene, camera, renderer, clock, controls, key;
var eddie;
var rotate_left = false;
var rotate_right = false;
var cRotate_up = false;
var cRotate_down = false;
var cRotate_centre = false;

//... 0 = floor, 1 = wall, 2 = spawn point
//... NB map[u][v] implies
//...  u = rows: up to down (--> increasing z)  
//...  v = columns: left across to right (--> increasing x)
//... where --> are our chosen mappings
//... so that the pattern below mimics the pattern in the simulation

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

var objects = [];

var mouse = new t.Vector2();

var player;
var spawnSet;

var Message = " <message>";
var reset_player = false ;

var pointerlockchange = function(event) 
{
    if (document.pointerLockElement === element || document.mozPointerLockElement === element || document.webkitPointerLockElement === element) {
        controls.enabled = true;
    } else
    {
        controls.enabled = false;
    }
};

//============================================================================================
function init() 
{
    //stats = new Stats();
   // stats.setMode(0);
    //document.body.appendChild(stats.domElement);

    renderer = new...