Skip to content

Commit

Permalink
Updated readme and refactored code
Browse files Browse the repository at this point in the history
  • Loading branch information
Mathias committed Nov 23, 2013
1 parent ab2e9bf commit 3594d6f
Show file tree
Hide file tree
Showing 5 changed files with 80 additions and 42 deletions.
29 changes: 20 additions & 9 deletions CollisionDetection.js
Original file line number Diff line number Diff line change
Expand Up @@ -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)) {
Expand All @@ -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);

Expand All @@ -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
Expand All @@ -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) {
Expand Down Expand Up @@ -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];
Expand All @@ -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;
}
};
})();
4 changes: 2 additions & 2 deletions MapRender.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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] +
Expand Down
27 changes: 17 additions & 10 deletions Player.js
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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];
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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?
Expand Down
21 changes: 20 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -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>
41 changes: 21 additions & 20 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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);
Expand All @@ -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";
Expand Down Expand Up @@ -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();
Expand All @@ -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>
Expand Down

0 comments on commit 3594d6f

Please sign in to comment.