2D Collision Detector

uses Rays and proximity checks after Lee Stemkoski

by steveow

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 -->

<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;     //50, //...# of units
var scale = 1;         //UNITSIZE/10;//5;
var WALLSIZE = 16;     //unused???

var t = THREE, stats, loader;
var scene, camera, renderer, clock, controls, key;

// 0 = floor, 1 = wall, 2 = spawn point
var map = [
    [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
    [1, 0, 0, 0, 0, 0, 0, 0, 0, 1],
    [1, 0, 0, 0, 0, 0, 0, 0, 0, 1],
    [1, 0, 0, 1, 1, 0, 1, 1, 0, 1],
    [1, 0, 0, 1, 1, 0, 1, 1, 0, 1],
    [1, 0, 0, 1, 1, 0, 1, 1, 0, 1],
    [1, 0, 0, 1, 0, 0, 0, 0, 0, 1],
    [1, 1, 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 stop_forward = false;
var stop_back = false;
var stop_left = false;
var stop_right = false;

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 t.WebGLRenderer();
    renderer.setSize(WIDTH, HEIGHT);
    document.body.appendChild(renderer.domElement);

    key = new Keyboard();
    player = new fPlayer();
    clock = new t.Clock();
    scene = new t.Scene();

    camera = new t.PerspectiveCamera(75, ASPECT, .1, 1000);
    camera.zoom = 4;
    
    controls = new t.PointerLockControls(camera);

    scene.add( controls.getObject() );
    scene.add( player.cube ); //.........???????????
    
    //camera2 = new t.PerspectiveCamera(75, ASPECT, 2, 1000);
    //scene.add( camera2 ); 
    //camera2.position.set(0,50,0);

    spawnSet = false;
...