Uploaded entry for 7DFPS game jam.

va3c · Aug 16, 2013 · c557ec0 · c557ec0
1 parent d0e7fc0
commit c557ec0
Show file tree

Hide file tree

Showing 33 changed files with 39,707 additions and 0 deletions.
diff --git a/7DFPS/3JSFPS.html b/7DFPS/3JSFPS.html
diff --git a/7DFPS/audio/deep-solar-wind.mp3 b/7DFPS/audio/deep-solar-wind.mp3
diff --git a/7DFPS/audio/deep-solar-wind.ogg b/7DFPS/audio/deep-solar-wind.ogg
diff --git a/7DFPS/css/base.css b/7DFPS/css/base.css
@@ -0,0 +1,8 @@
+body 
+{
+	font-family: Monospace;
+	font-weight: bold;
+	background-color: #ccccff;
+	margin: 0px;
+	overflow: hidden;
+}
diff --git a/7DFPS/css/index.css b/7DFPS/css/index.css
@@ -0,0 +1,128 @@
+body 
+{
+	background-color: #eeeeee;
+	background-image: url("../html-images/white-pixels.png");
+	background-repeat: repeat;      /* repeat, no-repeat */
+	background-attachment: fixed;   /* scroll, fixed */
+	background-position: top left;  /* for no-repeat setting: top/bottom, left/right */
+	margin: 2% 5% 0% 5%;            /* top, left, bottom, right or TRBL */
+
+	font-family: Georgia, Serif;	/* list font names in order of preference */
+	font-weight: normal;            /* normal, bold */
+	font-style: normal;             /* normal, italic */
+	font-variant: normal;           /* normal, small-caps */
+	font-size: 16px;                /* font size */
+	color: #000000;                 /* hexadecimal RGB color code */
+	text-decoration: none;          /* none, underline, overline, line-through */
+	text-align: left;               /* left, right, center, justify */
+}
+
+.fancy
+{
+	min-height: 150px;
+	/* next two lines for elder IE compatibility */
+	height: auto !important; 
+	height: 150px; 
+
+	/* Background color and gradients */
+	background: #eeeeee;
+	background: -moz-linear-gradient(top, #ffffff, #cccccc);
+	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff), to(#cccccc));
+	/* really nifty translucence */
+	background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.8), rgba(200, 200, 200, 0.8) );
+	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from( rgba(255, 255, 255, 0.8) ), to( rgba(200, 200, 200, 0.8) ));
+
+	/* Rounded corners */
+	-moz-border-radius: 15px 15px 15px 15px;
+	-webkit-border-radius: 15px 15px 15px 15px;
+	border-radius: 15px 15px 15px 15px;
+}
+
+/* Page text links */
+a 
+{
+	font-size: 20px;
+	font-weight: bold;
+	font-variantx: small-caps;
+	color:#00c;
+	text-shadow: 1px 1px 0px #aaa;
+	margin: 13px 0px 0px 0px;
+	text-decoration: none;
+
+	-webkit-transition: all 300ms ease-in-out;
+	-moz-transition: all 300ms ease-in-out;
+	-o-transition: all 300ms ease-in-out;
+	-ms-transition: all 300ms ease-in-out;
+	transition: all 300ms ease-in-out; 
+}
+.toc
+{
+	font-size: 16px;
+}
+a:hover 
+{
+	color:#c00;
+	/*text-shadow: 1px 1px 0px #f00;
+	/* gradual change */
+	-webkit-transition: all 300ms ease-in-out;
+	-moz-transition: all 300ms ease-in-out;
+	-o-transition: all 300ms ease-in-out;
+	-ms-transition: all 300ms ease-in-out;
+	transition: all 300ms ease-in-out; 
+}
+
+.superText
+{
+	color: #000;
+	text-shadow: 1px 1px 0px #aaa;
+}
+
+a .superImage
+{  
+	height: 148px;
+	border: 1px solid #000000;
+	margin: 0px 20px 0px 0px;
+	float:left;
+
+	/* Rounded corners */
+	-moz-border-radius: 15px 15px 15px 15px;
+	-webkit-border-radius: 15px 15px 15px 15px;
+	border-radius: 15px 15px 15px 15px;
+
+	position: relative; 
+
+	-webkit-transition: all 300ms ease-in-out;
+	-moz-transition: all 300ms ease-in-out;
+	-o-transition: all 300ms ease-in-out;
+	-ms-transition: all 300ms ease-in-out;
+	transition: all 300ms ease-in-out; 
+}  
+a:hover .superImage
+{  
+	top: -10px;  
+
+	/* fallback on standard opaque colors */
+	-moz-box-shadow: 10px 10px 5px #888;
+	-webkit-box-shadow: 10px 10px 5px #888;
+	box-shadow: 10px 10px 5px #888;
+	/* translucent: the way shadows should be */
+	-moz-box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
+	-webkit-box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
+	box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
+
+	-webkit-transition: all 300ms ease-in-out;
+	-moz-transition: all 300ms ease-in-out;
+	-o-transition: all 300ms ease-in-out;
+	-ms-transition: all 300ms ease-in-out;
+	transition: all 300ms ease-in-out;
+}  
+
+.bigTitle
+{
+	font-size: 32px;
+	font-weight: bold;
+	font-variantx: small-caps;
+	color:#004;
+	text-align: center;
+	text-shadow: -1px -1px 2px #fff, 1px 1px 3px #000;	
+}
diff --git a/7DFPS/html-images/3JSFPS.png b/7DFPS/html-images/3JSFPS.png
diff --git a/7DFPS/html-images/white-pixels.png b/7DFPS/html-images/white-pixels.png
diff --git a/7DFPS/images/alien-alloy.png b/7DFPS/images/alien-alloy.png
diff --git a/7DFPS/images/alien-carving-gray.png b/7DFPS/images/alien-carving-gray.png
diff --git a/7DFPS/images/alien-carving.png b/7DFPS/images/alien-carving.png
diff --git a/7DFPS/images/autumn-xneg.png b/7DFPS/images/autumn-xneg.png
diff --git a/7DFPS/images/autumn-xpos.png b/7DFPS/images/autumn-xpos.png
diff --git a/7DFPS/images/autumn-yneg.png b/7DFPS/images/autumn-yneg.png
diff --git a/7DFPS/images/autumn-ypos.png b/7DFPS/images/autumn-ypos.png
diff --git a/7DFPS/images/autumn-zneg.png b/7DFPS/images/autumn-zneg.png
diff --git a/7DFPS/images/autumn-zpos.png b/7DFPS/images/autumn-zpos.png
diff --git a/7DFPS/images/blue-glowy.jpg b/7DFPS/images/blue-glowy.jpg
diff --git a/7DFPS/images/cloud.png b/7DFPS/images/cloud.png
diff --git a/7DFPS/images/electric-blue-light.jpg b/7DFPS/images/electric-blue-light.jpg
diff --git a/7DFPS/images/glow.png b/7DFPS/images/glow.png
diff --git a/7DFPS/images/rocky-ground.jpg b/7DFPS/images/rocky-ground.jpg
diff --git a/7DFPS/images/x-crate.png b/7DFPS/images/x-crate.png
diff --git a/7DFPS/index.html b/7DFPS/index.html
@@ -0,0 +1,39 @@
+<html>
+<head>
+<title>3JS FPS</title>
+<link rel=stylesheet href="css/index.css"/>
+</head>
+<body>
+
+<div class="bigTitle">3JS FPS</div>
+<hr>
+
+<p class="superText"> 
+I submitted an entry for the <a href="http://www.7dfps.com">7DFPS Game Jam</a>. Over the course of a week, I spent a few hours each evening seeing how (if?) I could use my knowledge of Three.js to create a "First-Person (perspective) Shooter" style game. 
+A link to the result is below. The latest version of the Chrome browser is recommended for viewing. (A postmortem writeup will be available later.) <br/> <br/>
+
+&lt;disclaimer&gt; While functional, this source code is unpolished, the frame rate isn't great, the collision detection is wonky (jump if you get stuck!) and there is really no objective to this "game" (...but can you get into the room with the star?). Think of this project as more of a preliminary learning experience. &lt;/disclaimer&gt;
+</p>
+
+
+<center>
+<img src="html-images/3JSFPS.png" />
+</center>
+
+<p class="superText"> 
+Controls:
+<ul>
+<li> <p class="superText"> Option 1: Keyboard. <br/> W/A/S/D = move forwards/left/backwards/right. Q/E = turn left/right. R/F = look up/down. R&F together to set look to horizon. Space = jump. <br/>(Super secret: T/G to ignore gravity and fly up/down, I used this for debugging.) </p>
+<li> <p class="superText"> Option 2: Mouse. <br/> Click anywhere in the window to activate mouse look (requires pointer lock to be available on your browser). Mouse movement will control turning left/right and looking up/down. Press escape to exit mouse look mode.</p>
+<li> <p class="superText"> Option 3: XBox controller. <br/> Left joystick = move forwards/backwards/left/right. Right joystick = turn left/right and look up/down. A button = jump. (If the controller is active but not responding, try pressing any button on the controller and refresh the webpage.)</p>
+</ul>
+</p>
+
+<center>
+<a href="3JSFPS.html">Explore 3JS FPS</a>
+</center>
+
+<br/><br/><br/>
+
+</body>
+</html>
diff --git a/7DFPS/js/Detector.js b/7DFPS/js/Detector.js
@@ -0,0 +1,59 @@
+/**
+ * @author alteredq / http://alteredqualia.com/
+ * @author mr.doob / http://mrdoob.com/
+ */
+
+Detector = {
+
+	canvas: !! window.CanvasRenderingContext2D,
+	webgl: ( function () { try { return !! window.WebGLRenderingContext && !! document.createElement( 'canvas' ).getContext( 'experimental-webgl' ); } catch( e ) { return false; } } )(),
+	workers: !! window.Worker,
+	fileapi: window.File && window.FileReader && window.FileList && window.Blob,
+
+	getWebGLErrorMessage: function () {
+
+		var element = document.createElement( 'div' );
+		element.id = 'webgl-error-message';
+		element.style.fontFamily = 'monospace';
+		element.style.fontSize = '13px';
+		element.style.fontWeight = 'normal';
+		element.style.textAlign = 'center';
+		element.style.background = '#fff';
+		element.style.color = '#000';
+		element.style.padding = '1.5em';
+		element.style.width = '400px';
+		element.style.margin = '5em auto 0';
+
+		if ( ! this.webgl ) {
+
+			element.innerHTML = window.WebGLRenderingContext ? [
+				'Your graphics card does not seem to support <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation" style="color:#000">WebGL</a>.<br />',
+				'Find out how to get it <a href="http://get.webgl.org/" style="color:#000">here</a>.'
+			].join( '\n' ) : [
+				'Your browser does not seem to support <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation" style="color:#000">WebGL</a>.<br/>',
+				'Find out how to get it <a href="http://get.webgl.org/" style="color:#000">here</a>.'
+			].join( '\n' );
+
+		}
+
+		return element;
+
+	},
+
+	addGetWebGLMessage: function ( parameters ) {
+
+		var parent, id, element;
+
+		parameters = parameters || {};
+
+		parent = parameters.parent !== undefined ? parameters.parent : document.body;
+		id = parameters.id !== undefined ? parameters.id : 'oldie';
+
+		element = Detector.getWebGLErrorMessage();
+		element.id = id;
+
+		parent.appendChild( element );
+
+	}
+
+};
diff --git a/7DFPS/js/Stats.js b/7DFPS/js/Stats.js
diff --git a/7DFPS/js/THREEx.FullScreen.js b/7DFPS/js/THREEx.FullScreen.js
@@ -0,0 +1,108 @@
+// This THREEx helper makes it easy to handle the fullscreen API
+// * it hides the prefix for each browser
+// * it hides the little discrepencies of the various vendor API
+// * at the time of this writing (nov 2011) it is available in 
+//   [firefox nightly](http://blog.pearce.org.nz/2011/11/firefoxs-html-full-screen-api-enabled.html),
+//   [webkit nightly](http://peter.sh/2011/01/javascript-full-screen-api-navigation-timing-and-repeating-css-gradients/) and
+//   [chrome stable](http://updates.html5rocks.com/2011/10/Let-Your-Content-Do-the-Talking-Fullscreen-API).
+
+// # Code
+
+/** @namespace */
+var THREEx		= THREEx 		|| {};
+THREEx.FullScreen	= THREEx.FullScreen	|| {};
+
+/**
+ * test if it is possible to have fullscreen
+ * 
+ * @returns {Boolean} true if fullscreen API is available, false otherwise
+*/
+THREEx.FullScreen.available	= function()
+{
+	return this._hasWebkitFullScreen || this._hasMozFullScreen;
+}
+
+/**
+ * test if fullscreen is currently activated
+ * 
+ * @returns {Boolean} true if fullscreen is currently activated, false otherwise
+*/
+THREEx.FullScreen.activated	= function()
+{
+	if( this._hasWebkitFullScreen ){
+		return document.webkitIsFullScreen;
+	}else if( this._hasMozFullScreen ){
+		return document.mozFullScreen;
+	}else{
+		console.assert(false);
+	}
+}
+
+/**
+ * Request fullscreen on a given element
+ * @param {DomElement} element to make fullscreen. optional. default to document.body
+*/
+THREEx.FullScreen.request	= function(element)
+{
+	element	= element	|| document.body;
+	if( this._hasWebkitFullScreen ){
+		element.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
+	}else if( this._hasMozFullScreen ){
+		element.mozRequestFullScreen();
+	}else{
+		console.assert(false);
+	}
+}
+
+/**
+ * Cancel fullscreen
+*/
+THREEx.FullScreen.cancel	= function()
+{
+	if( this._hasWebkitFullScreen ){
+		document.webkitCancelFullScreen();
+	}else if( this._hasMozFullScreen ){
+		document.mozCancelFullScreen();
+	}else{
+		console.assert(false);
+	}
+}
+
+// internal functions to know which fullscreen API implementation is available
+THREEx.FullScreen._hasWebkitFullScreen	= 'webkitCancelFullScreen' in document	? true : false;	
+THREEx.FullScreen._hasMozFullScreen	= 'mozCancelFullScreen' in document	? true : false;	
+
+/**
+ * Bind a key to renderer screenshot
+ * usage: THREEx.FullScreen.bindKey({ charCode : 'a'.charCodeAt(0) }); 
+*/
+THREEx.FullScreen.bindKey	= function(opts){
+	opts		= opts		|| {};
+	var charCode	= opts.charCode	|| 'f'.charCodeAt(0);
+	var dblclick	= opts.dblclick !== undefined ? opts.dblclick : false;
+	var element	= opts.element
+
+	var toggle	= function(){
+		if( THREEx.FullScreen.activated() ){
+			THREEx.FullScreen.cancel();
+		}else{
+			THREEx.FullScreen.request(element);
+		}		
+	}
+
+	var onKeyPress	= function(event){
+		if( event.which !== charCode )	return;
+		toggle();
+	}.bind(this);
+
+	document.addEventListener('keypress', onKeyPress, false);
+
+	dblclick && document.addEventListener('dblclick', toggle, false);
+
+	return {
+		unbind	: function(){
+			document.removeEventListener('keypress', onKeyPress, false);
+			dblclick && document.removeEventListener('dblclick', toggle, false);
+		}
+	};
+}