On Saturday night I thought about building a browser game to have some fun and gain some experience. It wasn’t difficult to choose a genre: as I didn’t have time for MMORPG, I decided to make it a slaughter. It took me about 20 minutes to write code for controlling the player and the opponents. Yet there was a question if this would be a 2D or 3D (actually, Canvas/SVG or complete WebGL)?

Considering my participation in a project that uses WebGL as basic technology of 3D mode, my choice was absolutely conscious. I’m working with Three.js for almost six months, and this wonderful library came to help again this time.

During the next hour, I’ve created and set the scene, added dummy model of a player and the first version of the enemies.

Now let me go into the details.
I’ve made a limited rotation mode to control the camera, vertical and horizontal, which is easy to handle using a mouse. The gun – which is also the player – is fixed in the center of coordinates and it turns around with the camera so the gun has the same angle as the camera.
The enemies appear in a certain range, which is determined by squint angles and distance to the center.
This type of position allowed an easy way of moving opponents towards the gun – knowing the squint angle of the object we can just transfer it to the center of coordinates and thus shorten the distance to the gun (player).
So I had something like that by Sunday morning:



Sunday went into the family business, Monday was spent working on the main project and finally, on Tuesday, I considered the whole game things. At first I asked our 3D modeler to model a dead tree and found a gun model in Web. I took the enemy model from Three.js library examples. The guys in the office were all excited about the idea and waited for the link.
The game name turned up suddenly (the word is not meaningless, actually), after that our designer was glad to draw a startup screen, buttons, frag and heal icons.



I thought it would look better with some winter mood — snow based on particle system was added in 10 minutes.
Now the time came to let the player shoot, so I added a new class – the bullet. As you remember, we always know the angles of gun direction and the angles of opponents. So we can easily recognize whether the bullet hits targets or not. Once again, I want to remark that such approach has much simplified estimation of bullet fly and reaching the target. As a result we now have our gun shooting and bullet killing.
The only thing left is to make enemies look cool and alive. I used already animated models, and that’s why it wasn’t difficult to get animation changing: now the opponent could run, fall, stand up, go forward frowning and finally die. By the way, when the enemy comes closer, the attack mode turns on so he tries to lower the player’s vitality.



A bit later I added keyboard handlers (set pause and full-screen keys) and prepared whole process for the run. You may find some mess in the code, but the Christmas party in the office has almost started and I couldn’t fight distractions anymore.

At long last the game was sent to the server and everyone could get the link.

After first feedback slight corrections were made: we got bosses, opponents stopped dying at one stroke, and bullets started causing floating damage.

I guess I will have free time at the weekend and make up some features like AI for opponents (so they can hide behind trees and move by bounds), impenetrable trees etc.
The source code is open, feel free to examine. I didn’t add comments but tried to make it clear and well-defined.

P.S. I know the project is not perfect, but I made it just for fun (by the way it works only on Google Chrome, Safari and Firefox).