Nemesis is a First Person Shooter tournament-style game created entirely in the browser using HTML5 Canvas/WebGL with no plugins in under 24 hours for AngelHack Silicon Valley 2012. It features everything you'd expect from a shooter:
- Run around, shoot, collide with things
- Enemies run around and shoot you
- Health tracking, score tracking, radar
- Pickups (extra health)
Built with the help of Three.js with no prior Three.js or WebGL experience.
Play it now!
WASD to move, mouse to look around, click to shoot. Hit F11 to go full screen. Mouse recommended. Tested with the latest version of Firefox and Chrome.
As of this writing, the version linked above is the same as the version I completed for AngelHack.
If you like this, feel free to Upvote on Hacker News!
The Story
On Saturday, June 23, 2012, I arrived at AngelHack with Alex Rattray. We intended to work together but had been unable to decide on a project we both liked. We saw people flying toy helicopters around and making them avoid obstacles and I decided right then that I was going to build something even cooler that would blow people's minds. I'd done some pretty serious tests with Canvas before but had never used WebGL (or even OpenGL) or coded 3D graphics before. On the other hand, as the co-leader of the Community Bonus Pack, I've been involved in game development for years. Alex and I decided that we had different priorities and he ended up building Acvte, a blogging platform where you write and manage blog posts with Google Docs.
Meanwhile, choosing Three.js as a starting point was pretty easy as it came with the recommendation of Ian Langworth, CTO and co-founder of Artillery Games. The problem is it has very sparse documentation. Luckily I'm no stranger to building on libraries with no documentation, so I approached it the same way I have before: by reading through a lot of other people's code until it became clear what that code was doing. ThreeJSdoc helped a lot with finding relevant examples.
I started writing code at about 4:30pm on Saturday and finished at about 1pm on Sunday. Perhaps surprisingly, I wrote under 600 lines of JavaScript (it's all client-side) for the entire game. Three.js is pretty awesome. I did hit a few roadblocks but it mostly went pretty smoothly and I implemented basically everything I had wanted to. Here are some challenges I faced and the workarounds I used:
- Loading models turned out to be a pain, so I skipped that and went with the red angry-face cubes as enemies instead. This turned out to work pretty well for its purposes. Three.js does have support for loading models but it was eating up a lot of browser memory and I couldn't get the rotation right in the amount of time I had.
- Some of the controls were hard to wrangle, so I overrode THREE.FirstPersonControls and implemented some features myself to provide more of an FPS experience. Some compromises I made include not being able to look up or down and only being able to walk on flat surfaces (you couldn't go up or down a ramp for example, at least without more code)
- I used a pretty basic 2D-to-3D transformation to build the map
- The enemies move around mostly randomly instead of using PathFinding.js like I originally wanted them to because I didn't have time to debug why some paths weren't being found
The code
As you might expect for something written in 24 hours, it's a little messy, but it should still be readable. The original code is tagged with "AngelHack" in the repo.
I wrote up a long explanation of how the code works. If you're interested in building something similar it should be useful.
Future development
There's a lot that could still be done here:
- Allow looking up and down
- Pointer locking (some code for this is already written; unfortunately no stable-release major browsers support it yet)
- Allow jumping
- Allow walking up and down ramps/elevators/etc.
- Better collision (especially for the enemies)
- Networking, so you can play against other people online
- A level editor so you can play in multiple arenas (along with a way to choose a level)
- More weapons and pickups
- Better AI
I will probably keep working on the code sporadically, and I'll accept useful pull requests, but it would be awesome to see other people fork and improve the code.
About me
I'm Isaac Sukin, sometimes known as IceCreamYou. I'm an undergraduate student at the Wharton School at the University of Pennsylvania (class of 2014) and self-taught programmer since 2007. I've been involved in game development in one form or another since 1999.