Updated readme and refactored code

CollisionDetection.js

@@ -13,7 +13,7 @@ cs.CollisionDetection = (function() {
 			vStart[2] === vEnd[2];
 	}
 
-	var trace = function(vStart, vEnd) {
+	var trace = function(vStart, vEnd, shouldSlide) {
 		var mapData = cs.map.mapData;
 		//No need to do anything if no movement is required
 		if(samePosition(vStart, vEnd)) {
@@ -25,6 +25,7 @@ cs.CollisionDetection = (function() {
 			allSolid: true,
 			ratio: 1.0 //How far we got before colliding with anything
 		};
+		//models[0] is the geometry of the entire map
 		recursiveHullCheck(mapData.models[0].iHeadNodes[0], 0, 1,
 			vStart, vEnd, traceObj);
 
@@ -45,6 +46,10 @@ cs.CollisionDetection = (function() {
 		var vMove = [];
 		vec3.sub(vMove, vEnd, vNewPosition);
 
+		if(!shouldSlide) {
+			return vNewPosition;
+		}
+
 		//We now calculate how much the player should "slide"
 		//i.e when hitting a wall we don't completely stop, but rather slide
 		//along the wall
@@ -56,7 +61,7 @@ cs.CollisionDetection = (function() {
 		];
 
 		//Make sure we don't collide with anything else from the new positions
-		return trace(vNewPosition, vEndPosition);
+		return trace(vNewPosition, vEndPosition, true);
 	};
 
 	var recursiveHullCheck = function(iNode, p1f, p2f, p1, p2, traceObj) {
@@ -179,18 +184,17 @@ cs.CollisionDetection = (function() {
 	//Check whether the point p is a solid or not
 	var hullPointContentIsSolid = function(iNode, p) {
 		var mapData = cs.map.mapData;
-		var d, node, plane, vNormal;
 
 		while(iNode >= 0) {
-			node = mapData.clipNodes[iNode];
-			plane = mapData.planes.planes[node.iPlane];
-			vNormal = [
+			var node = mapData.clipNodes[iNode];
+			var plane = mapData.planes.planes[node.iPlane];
+			var vNormal = [
 				mapData.planes.normals[3*node.iPlane],
 				mapData.planes.normals[3*node.iPlane + 1],
 				mapData.planes.normals[3*node.iPlane + 2]
 			]; 
 
-			d = vec3.dot(vNormal, p) - plane.distance;
+			var d = vec3.dot(vNormal, p) - plane.distance;
 
 			if(d < 0) {
 				iNode = node.iChildren[1];
@@ -204,8 +208,15 @@ cs.CollisionDetection = (function() {
 	};
 
 	return {
-		findPosition: function(vStart, vEnd) {	
-			return trace(vStart, vEnd);
+		move: function(vStart, vEnd) {	
+			return trace(vStart, vEnd, true);
+		},
+
+		isOnGround: function(pos) {
+			var x = pos[0];
+			var y = pos[1];
+			var z = pos[2];
+			return trace(pos, [x, y, z-1], false)[2] >= z;
 		}
 	};
 })();

MapRender.js

@@ -106,7 +106,7 @@ cs.MapRender = function(shaderProgram, gl, map) {
 		//No need to render it if it has no light
 		if(face.nStyles[0] == 0xFF) return;
 
-		//Render face needs to convert from triangle fans to triangles to allow
+		//We need to convert from triangle fans to triangles to allow
 		//for a single draw call
 		//Thus a sequence of indices describing a triangle fan:
 		//0 1 2 3 4 5 6
@@ -171,7 +171,7 @@ cs.MapRender = function(shaderProgram, gl, map) {
 		case 2:
 			location = pos[2] - plane.distance;
 		default:
-			//Not perpendicular :( Calculate the location the hard way using:
+			//Not perpendicular. Calculate the location the hard way using:
 			//location = dot(normal, pos) - distance
 			//(from http://en.wikipedia.org/wiki/Hesse_normal_form)
 			location = (map.planes.normals[3*plane_index] * pos[0] +

Player.js

@@ -1,12 +1,11 @@
-window.cs = window.cs || { };
 /**
 	This file defines the representation of a Player
 	A player is responsible for its own movement by
 	providing keyboard listeners
 	
 	TODO: Place a render function here for rendering a player
 **/
-
+window.cs = window.cs || { };
 
 cs.Player = function(x, y, z, speed) {
 	this.x = x;
@@ -22,19 +21,28 @@ cs.Player = function(x, y, z, speed) {
 		return [this.x, this.y, this.z];
 	}
 
-	this.move = function() {		
+	this.move = function() {
+		var onGround = cs.CollisionDetection.isOnGround(this.position());
+
+		//TODO: If not on the ground the formulas for newX and newY should be changed
 		var normalDir = [0, 0];
 		vec2.normalize(normalDir, dir);
 		//Move forward
 		var newX = this.x + speed*normalDir[0]*Math.cos(this.yAngle);
 		var newY = this.y - speed*normalDir[0]*Math.sin(this.yAngle);
-		var newZ = this.z; //TODO: Gravity
-			
+		var newZ = this.z;
+
 		//Strafe
 		newY -= speed*normalDir[1]*Math.cos(Math.PI - this.yAngle);
 		newX += speed*normalDir[1]*Math.sin(Math.PI - this.yAngle);
-
-		var newPosition = cs.CollisionDetection.findPosition([this.x, this.y, this.z], [newX, newY, newZ]);
+
+		//Apply gravity if we're not on the ground. TODO: Accelerate instead of subtracting a constant
+		if(!onGround) {
+			newZ -= cs.config.GRAVITY;
+		}
+
+		newPosition = cs.CollisionDetection.move([this.x, this.y, this.z + cs.config.MAX_Z_CHANGE], [newX, newY, newZ], true);
+
 		this.x = newPosition[0];
 		this.y = newPosition[1];
 		this.z = newPosition[2];
@@ -45,7 +53,7 @@ cs.Player = function(x, y, z, speed) {
 		var PI_TWO = Math.PI*2.0;
 
 		//Hardcoded sensitivity. TODO: Read off some future "Settings" class
-		this.yAngle += xDelta*0.0025;
+		this.yAngle += xDelta * cs.config.MOUSE_SENSITIVITY;
 		//Make sure we're in the interval [0, 2*pi]
 		while (this.yAngle < 0) {
 			this.yAngle += PI_TWO;
@@ -54,7 +62,7 @@ cs.Player = function(x, y, z, speed) {
 			this.yAngle -= PI_TWO;
 		}
 
-		this.xAngle += yDelta*0.0025;
+		this.xAngle += yDelta * cs.config.MOUSE_SENSITIVITY;
 		//Make sure we're in the interval [-pi/2, pi/2]
 		if(this.xAngle < -PI_HALF) {
 			this.xAngle = -PI_HALF;
@@ -64,7 +72,6 @@ cs.Player = function(x, y, z, speed) {
 		}
 	}
 
-	//VERY UGLY! But it works!
 	//Handle w and s keys
 	KeyboardJS.on("w,s", function(event, keys, combo){
 		//Is w down?

README.md

@@ -1,4 +1,23 @@
 CS
 ==
 
-Counter-Strike implementation in JavaScript
+Counter-Strike 1.6 implementation in JavaScript utilizing state of the art browser APIs.
+
+<b>Current state</b>
+<ul>
+<li>Parses and renders .bsp files (version 30) containing map data</li>
+<li>Camera movement, yaw and pitch fully implemented</li>
+<li>Collision detection mostly completed</li>
+<li>Naive gravity implemented</li>
+</ul>
+
+<b>Hacking on the codebase</b><br />
+<ul>
+<li>A fully updated version of Chrome is recommended when hacking around in the code. (Firefox not yet supported)</li>
+<li>When debugging locally use the Chrome flag: "--disable-web-security" so that Chrome can load data files from the local file system.</li>
+</ul>
+
+<b>Commiting changes</b><br />
+<ul>
+<li>Please note: No actual data (maps, models, textures, etc.) is included in the project, due to copyright reasons!</li>
+</ul>

index.html

@@ -2,6 +2,8 @@
 	<head>
 	<link rel="stylesheet" type="text/css" href="styles.css">
 
+	<script type="text/javascript" src="config.js"></script>
+	<script type="text/javascript" src="util/PointerLock.js"></script>
 	<script type="text/javascript" src="lib/gl-matrix.js"></script>
 	<script type="text/javascript" src="lib/webgl-utils.js"></script>
 	<script type="text/javascript" src="MapParser.js"></script>
@@ -53,9 +55,8 @@
 		//Normal matrix not yet needed
 		//var uNMatrix = mat3.create();
 		//Hardcoded cs_assault position. TODO: Read this from the entity set
-		cs.player = new cs.Player(351, 160, 48, 5);
+		cs.player = new cs.Player(-320, 352, 48, 5);
 		//http://forums.steampowered.com/forums/showthread.php?t=1613876
-		cs.FIELD_OF_VIEW = 59;
 
 		//Boilerplate code begin
 		function initGL(canvas) {
@@ -147,16 +148,16 @@
 			gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
 			gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
 
-			mat4.perspective(pMatrix, cs.FIELD_OF_VIEW*Math.PI/180,
-				gl.viewportWidth / gl.viewportHeight, 0.1, 10000.0);
+			mat4.perspective(pMatrix, cs.config.FIELD_OF_VIEW*Math.PI/180,
+				gl.viewportWidth / gl.viewportHeight, cs.config.NEAR_CLIPPING, cs.config.FAR_CLIPPING);
 
 			//Rotate the player
 			mat4.identity(mvMatrix);
 			mat4.rotateX(mvMatrix, mvMatrix, player.xAngle);
 			mat4.rotateY(mvMatrix, mvMatrix, player.yAngle);
 
 			//Move the player by moving the map in the reverse direction
-			mat4.translate(mvMatrix, mvMatrix, [player.y, -player.z - 10, player.x]);
+			mat4.translate(mvMatrix, mvMatrix, [player.y, -player.z - cs.config.PLAYER_HEIGHT, player.x]);
 
 			//Rotate the map so it matches the first person shooter style
 			mat4.rotateX(mvMatrix, mvMatrix, -Math.PI/2);
@@ -178,7 +179,7 @@
 
 		//Download the bsp file and call callback on the result
 		function getMapData(callback) {
-			var path = "data/maps/cs_assault.bsp";
+			var path = cs.config.MAP_PATH;
 			var req = new XMLHttpRequest();
 			req.open("GET", path, true);
 			req.responseType = "arraybuffer";
@@ -216,19 +217,19 @@
 
 				//Listen for clicks on the canvas
 				canvas.addEventListener("click", function() {
-					canvas.webkitRequestPointerLock();
-					
-					//Listen for pointer locking
-					document.addEventListener("webkitpointerlockchange", function(e) {
-						//Did the pointer just go from unlocked to locked?
-						if(!!document.webkitPointerLockElement) {
-							//Yep! Add mousemove listener
-							document.addEventListener("mousemove", rotatePlayer, false);
-						}
-						else { //Nope. Remove mouse move listener
-							document.removeEventListener("mousemove", rotatePlayer);
-						}
-					}, false);
+					PointerLock.requestPointerLock(canvas);
+				}, false);
+
+				//Listen for pointer locking
+				PointerLock.addPointerLockExchangeEventListener(document, function(e) {
+					//Did the pointer just go from unlocked to locked?
+					if(!!PointerLock.pointerLockElement()) {
+						//Yep! Add mousemove listener
+						PointerLock.addMouseMoveEventListener(document, rotatePlayer, false);
+					}
+					else { //Nope. Remove mouse move listener
+						PointerLock.removeMouseMoveEventListener(document, rotatePlayer);
+					}
 				}, false);
 
 				mainLoop();
@@ -237,7 +238,7 @@
 
 		//Rotate the player when the mouse is moved
 		function rotatePlayer(e) {
-			cs.player.rotate(e.webkitMovementX, e.webkitMovementY);
+			cs.player.rotate(e.movementX, e.movementY);
 		}
 	</script>
 	</head>