Added restart button, minor tweaks, final zip

deathraygames · Sep 13, 2020 · 1925f57 · 1925f57
1 parent ea934eb
commit 1925f57
Show file tree

Hide file tree

Showing 8 changed files with 82 additions and 40 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,22 @@
 # 404 Orbiting Asteroids for JS13k 2020
 
+Play the latest version: https://deathraygames.github.io/404-js13k-2020/dist/
 
-Sounds 
+## JS13k
 
-I considered [jsfxr](https://github.com/mneubrand/jsfxr), but then found that [ZzFX micro](https://github.com/KilledByAPixel/ZzFX/blob/master/ZzFX.micro.js) is smaller and offered simple sound effects that I was looking for. I created the sounds by experimenting with [the ZzFX tool](https://killedbyapixel.github.io/ZzFX/), and put everything into a `sounds.js` file.
+* [JS13k Rules](http://2020.js13kgames.com/#rules): Make a game with a package size less than 13k (13,312 bytes) in one month
+* Theme: *"404"*
+* Entry for this game: ...(TBD)...
+* See all the entries for the competition at http://2020.js13kgames.com/
+
+## Post Mortem
+
+I didn't have a lot of inspiration with the theme of "404", so I decided to use this challenge as an excuse to [learn WebGL](https://xem.github.io/articles/webgl-guide.html) and to improve [my physics library](https://github.com/rocket-boots/physics). I enjoyed working with basic spaceship flying as part of [Return to the Moon](https://github.com/deathraygames/lunar-lander-13k) in 2019, so settled on making a simple [Asteroids](https://en.wikipedia.org/wiki/Asteroids_(video_game)) "clone". Because there wasn't a lot of originality to the gameplay, I ended up using a very literal title: *"404 Orbiting Asteroids"*.
+
+I spent most of the month learning WebGL and working on a **starfield background**, which resulted in [webgl-starfield](https://github.com/rocket-boots/webgl-starfield) and a helper library [webglp](https://github.com/rocket-boots/webglp) to help smooth out some of the ugly WebGL js code.
+
+As a clone of classic the **gameplay** didn't require too much thought: *Fly around, shoot asteroids*. I knew I wanted some gravity to make flying more interesting, and since it [didn't make too much sense](https://twitter.com/deathraygames/status/1300966473280753664/photo/1) to have the asteroids with a strong force of gravity, I decided to add a big mass in the center. I originally wanted a sun and a few planets (like [Star Hopper Glitch Jump](https://github.com/deathraygames/star-hopper-glitch)), but knew it would be too complicated to keep the planets in orbit, so I just stuck with one mass: a sun.
+
+When it game time to work on the **controls** I decided to copy Reassembly, a game I really enjoy. Rotation of the ship follows the mouse, clicking fires the weapons. To make the game playable entirely by mouse I made the right-click fire the engines. Later on I also added some keyboard controls: "w" to fire engines and space bar to fire.
+
+After the game was playable I realized it desperately needed some **sounds** to give the experience more depth. I considered [jsfxr](https://github.com/mneubrand/jsfxr), but then found that [ZzFX micro](https://github.com/KilledByAPixel/ZzFX/blob/master/ZzFX.micro.js) is smaller and offered simple sound effects that I was looking for. I created the sounds by experimenting with [the ZzFX tool](https://killedbyapixel.github.io/ZzFX/), and put everything into a `sounds.js` file.
diff --git a/dist/404-orbiting-asteroids-13k.zip b/dist/404-orbiting-asteroids-13k.zip
diff --git a/dist/game-window.js b/dist/game-window.js
diff --git a/dist/index.html b/dist/index.html
@@ -3,9 +3,9 @@
 <head>
 	<title>404 Orbiting Asteroids - A js13k game for 2020</title>
 	<meta charset="utf-8">
-	<meta name="description" content="Simple desktop game in 13 kb for js13k 2020">
+	<meta name="description" content="Simple asteroids-like desktop game in 13 kb for js13k 2020">
 	<meta name="author" content="Luke Nickerson">
-	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 	<style>
 		body {
 			padding: 0;
@@ -103,6 +103,15 @@
 			color: rgba(255, 255, 255, 0.5);
 			font-size: 80%;
 		}
+		#restart {
+			font-size: inherit;
+			background: rgba(153, 255, 77, 1);
+			border: 0;
+			padding: 0.75em 2em;
+			text-transform: uppercase;
+			cursor: pointer;
+			margin: 1em;
+		}
 	</style>
 </head>
 <body scroll="no">
@@ -137,7 +146,8 @@
 			<strong>You died.</strong>
 			<p id="sun">The sun is hot! 🌞+🚀=💀</p>
 			<p id="bullet">Ricochet! 🚀+🔫=💀</p>
-			<p>🔄 Refresh the page (F5) to start over.</p>
+			<p>Click below or 🔄 Refresh the page (F5) to start over.</p>
+			<button type="button" id="restart">Restart</button>
 		</section>
 	</main>
 	<script src="game-window.js"></script>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -33,7 +33,7 @@
   },
   "dependencies": {
     "rocket-boots-coords": "git+https://github.com/rocket-boots/coords.git#v0.6.0",
-    "rocket-boots-physics": "git+https://github.com/rocket-boots/physics.git#v0.4.0",
+    "rocket-boots-physics": "git+https://github.com/rocket-boots/physics.git#v0.5.0",
     "webglp": "git+https://github.com/rocket-boots/webglp.git#v0.1.0"
   }
 }
diff --git a/src/SpaceObject.js b/src/SpaceObject.js
@@ -1,10 +1,10 @@
 import Polygon from './Polygon.js';
 // import physics from '../../../rocket-boots-repos/physics/src/physics.js';
-// import { physics } from 'rocket-boots-physics';
 import physics from '../node_modules/rocket-boots-physics/src/physics.js';
-// import { Coords } from 'rocket-boots-coords';
 
+// import { Coords } from 'rocket-boots-coords';
 // physics.Coords = Coords;
+
 physics.bigG = .000001;
 
 class SpaceObject extends Polygon {
@@ -22,7 +22,7 @@ class SpaceObject extends Polygon {
 					c(),
 				],
 				hitColor: [.7, 0., 0.],
-				boundingBox: [],
+				// boundingBox: [],
 				hit: false,
 				verts: [], // set in calc
 				vc: null, // set in calc
@@ -32,6 +32,7 @@ class SpaceObject extends Polygon {
 				// acc: new Coords(),
 				// vel: new Coords(),
 				r: 0,
+				outerRadius: 0,
 				innerRadius: 0,
 				children: [],
 			}
@@ -61,7 +62,7 @@ class SpaceObject extends Polygon {
 	calcRadii() {
 		let inner = Infinity;
 		// Outer/largest radius
-		this.r = this.baseVerts.reduce((n, v) => {
+		this.outerRadius = this.r = this.baseVerts.reduce((n, v) => {
 			// Store radius on each base vertex for quicker computation later
 			const r = v.r = Polygon.getRadius(v);
 			if (r < inner) { inner = r; }
@@ -79,7 +80,7 @@ class SpaceObject extends Polygon {
 		return this.vc;
 	}
 
-	getColor() {
+	getColor(v, bv, i) {
 		const bc = this.baseColor;
 		return [
 			bc[0] + (this.hit ? .1 : 0.),
@@ -92,8 +93,8 @@ class SpaceObject extends Polygon {
 		let vc = [];
 		this.verts.length = 0;
 		this.baseVerts.forEach((bv, i) => {
-			this.verts[i] = [bv[0] + this.pos.x, bv[1] + this.pos.y, 0]; // bv[2] + this.pos.z];
-			vc = vc.concat(this.verts[i]).concat(this.getColor());
+			const v = this.verts[i] = [bv[0] + this.pos.x, bv[1] + this.pos.y, 0]; // bv[2] + this.pos.z];
+			vc = vc.concat(v).concat(this.getColor(v, bv, i));
 		});
 		this.vc = new Float32Array(vc);
 	}

diff --git a/src/game.js b/src/game.js
@@ -41,6 +41,7 @@ const rand = (n = 1) => Math.random() * n;
 
 const achievements = {};
 const objects = [];
+const effects = [];
 const sun = setupSun();
 const asteroids = setupAsteroids(sun);
 const ship = setupShip(sun)
@@ -58,7 +59,7 @@ const draw = () => {
 	// Draw stars background
 	glp.use(0).draw({ uniforms, buffs: [['position']] });
 
-	// Draw galaxy
+	// Draw "space" galaxy
 	const buffs = [
 		['position', { size: 3, stride: 6 }],
 		['color', { size: 3, stride: 6, offset: 3 }],
@@ -72,7 +73,7 @@ const draw = () => {
 		clear: false,
 	});
 
-	objects.forEach((o) => {
+	effects.concat(objects).forEach((o) => {
 		// glp.unif('translation', 0, 0, 0); // o.x, o.y, o.z);
 		glp.draw({
 			// uniforms: [],
@@ -99,7 +100,7 @@ function achieve(what) {
 	}
 }
 
-//--------------- OBJECTS
+//--------------- OBJECT MANAGEMENT
 
 const removeDeletedObjects = (deleteIndices = []) => {
 	for(let d = deleteIndices.length - 1; d >= 0; d--) {
@@ -145,10 +146,16 @@ const objectLoop = (t) => {
 			}
 		}
 	});
+	effects.forEach((o) => {
+		o.rotate(t);
+		o.calcVertsWithRotation();
+	});
 	removeDeletedObjects(deleteIndices);
 	return { asteroidCount };
 };
 
+//-------------------- OBJECT CREATION
+
 function makeDecay(o, n = 8) {
 	o.decayTime = n;
 	o.ongoing = (t) => {
@@ -160,8 +167,8 @@ function makeDecay(o, n = 8) {
 function die(reason) {
 	isDead = true;
 	ship.delete = true;
-	makeFragments(ship);
-	makeBlast(ship.pos, ship.vel);
+	makeFragments(ship, 10);
+	makeBlast(ship.pos, ship.vel, 5);
 	sounds.death();
 	endGame(reason);
 }
@@ -188,6 +195,7 @@ const makeBullet = (ship, bulletPower) => {
 	b.mass *= 0.5;
 	makeDecay(b, 10);
 	b.damage = (dmg, objHit) => {
+		b.baseColor[0] = .9; // red-ify the richoceting bullets
 		// console.log(dmg / 10);
 		b.decayTime *= 0.5;
 		if (objHit instanceof Asteroid) {
@@ -200,9 +208,9 @@ const makeBullet = (ship, bulletPower) => {
 	objects.push(b);
 };
 
-function makeBlast(pos, vel) {
-	const b = new Blast(pos, vel);
-	const b2 = new Blast(pos, vel, [1., 1., 0.], 0.05, 3);
+function makeBlast(pos, vel, scale = 1) {
+	const b = new Blast(pos, vel, [1., 0.5, 0.], .2 * scale, 8);
+	const b2 = new Blast(pos, vel, [1., 1., 0.], 0.05 * scale, 3);
 	objects.push(b);
 	objects.push(b2);
 }
@@ -233,8 +241,8 @@ function makeFragment(o, n) {
 	objects.push(f);
 }
 
-function makeFragments(o) {
-	const n = 2 + Math.floor(rand(4));
+function makeFragments(o, extra = 4) {
+	const n = 2 + Math.floor(rand(extra));
 	for(let i = 0; i < n; i++) { makeFragment(o, n); }
 }
 
@@ -288,23 +296,24 @@ function setupAsteroids(sun) {
 	}
 };
 
-// function makeOuterSun(s, r, color) {
-// 	const baseVerts = SpaceObject.getRegularPolygonVerts(s, r);
-// 	const outerSun = new SpaceObject(baseVerts);
-// 	outerSun.baseColor = color;
-// 	outerSun.mass = 0;
-// 	outerSun.vel = null;
-// 	outerSun.move = () => {};
-// 	outerSun.collide = () => {};
-// 	outerSun.gravitate = null;
-// 	giveSpin(outerSun, .1);
-// 	objects.push(outerSun);
-// }
+function makeOuterSun(s, r, color) {
+	const baseVerts = SpaceObject.getRegularPolygonVerts(s, r);
+	const outerSun = new SpaceObject(baseVerts);
+	outerSun.baseColor = color;
+	outerSun.mass = 0;
+	outerSun.vel = null;
+	outerSun.move = () => {};
+	outerSun.collide = () => {};
+	outerSun.gravitate = null;
+	giveSpin(outerSun, .1);
+	effects.push(outerSun);
+}
 
 function setupSun() {
 	const sun = new Sun();
-	// const color = sun.baseColor.map((c) => Math.max(0, c - 0.2));
-	// const r = sun.r * 1.05;
+	const color = sun.baseColor.map((c) => Math.max(0, c - 0.3));
+	const r = sun.r * 1.1;
+	[8,8,4,4,4,3].forEach((s) => makeOuterSun(s, r, color));
 	// makeOuterSun(8, r, color);
 	// makeOuterSun(8, r, color);
 	// makeOuterSun(3, r, color);
@@ -429,6 +438,12 @@ const setupInput = (canvas, ship) => {
 		ship.rotation = theta - Math.PI/2;
 		achieve('rotate');
 	};
+	document.addEventListener('click', (e) => {
+		console.log(e.target, e);
+		if (e.target.id === 'restart') {
+			location.reload();
+		}
+	});
 };
 
 // Create glp