How to make a 3D shooter on JavaScript for a couple of days

On Saturday, closer to midnight, I had free time and a burning desire to make a toy under the browser, for fun and to increase the experience for. I decided on the genre rather quickly: on the MMORPG this time I definitely would not have enough time, I decided to make just a meat grinder. 20 minutes spent writing a basic code to control the player and his opponents. And then the question arose - 2D or 3D (or rather, Canvas / SVG or is it still a full-fledged WebGL)?



Considering that I am now involved in the development of the project, where WebGL is the basic technology for 3D mode, I made the choice consciously. For about six months I have been working with the wonderful Three.js library, and this time it has again become my best assistant.



In the next hour, a scene was created and set up, a player disc was added as a pair of primitives and the first version of the opponents was created.

')

Now for some details.

To control the camera, I made a limited mode of rotation vertically and horizontally, which, in my opinion, is quite convenient for controlling the mouse. The gun, which essentially personifies the main character, is fixed in the center of coordinates and rotates after the camera, respectively - it always has the same angle as the camera.

Opponents appear in a certain range of space, given the angles of deviation from the center and the distance to it.



This version of the location allowed simply enough to realize the movement of opponents to our gun, because knowing the enemy's deflection angle, we simply gradually move him to the center of coordinates, reducing the distance between him and the gun.



Actually, as a result on Sunday night I had the following picture:







Sunday I spent in pleasant family troubles, and on Monday I devoted myself to working on the main project. And then came Tuesday. On the way to the office, I managed to switch to a “toy” and thought out a further implementation plan.



First of all, after I entered the office, I asked our modeler to make me a dry wood model for the surroundings, and I picked up a model gun on the open spaces of the net. I took the model of the enemy from examples to the Three.js library.

People in the office periodically approached to see what I was doing. Everyone smiled sweetly and waited for the link.



In just a few minutes, a name was invented (its meaning will be revealed later), and then I asked to draw a screensaver, buttons, frags and health icons, our designer did it with pleasure.







Then I thought that winter would be uncomfortable in the yard without snow. No sooner said than done, in 10 minutes the snow was screwed on the basis of a particle system.



The time has come to give our hero the opportunity to shoot, and I added a new class - a bullet.



Returning to the description of the mechanics of the scene, I remind you that we always know the angles of the direction of the gun and the angles of opponents. Knowing this, we can easily determine whether a bullet hits the enemy or not, and once again I note that this approach has greatly simplified the process of calculating the flight and getting a bullet into the enemy. As a result, our gun learned to shoot, and the bullet - to hit the enemy.

It remains to teach our opponents to be like something alive. I used already animated models, which in itself made it possible very quickly to set up the simplest mechanism for changing the animation and the state of the enemy: he runs, falls, gets up and walks with a frown, and finally dies at all.

By the way, having reached a certain distance to the player, the enemy goes into attack mode and, in fact, tries to take life from the player.







A little later, keyboard handlers were added to set a pause and switch to full screen mode, and then the actual wrapper for the functioning of the gameplay. Probably, all this added a bit of porridge to the code, but the time was nearing the corporate event scheduled for 8 pm, and there were already some things that were not so much :)



In the end, the whole thing migrated to the server, and everyone who wanted it got their link .



After analyzing the first feedbacks, minor edits were made, bosses were added, opponents did not immediately die, and bullets began to inflict floating damage.



I think that at the weekend I still will have free time, and I will be able to tie the AI ​​to the enemy (so that he hides behind the trees and moves in dashes), make the trees impenetrable and impassable, and something else.



All project sources are open for research. I did not add comments, but I tried to write code structured and understandable for study.



PS And yes, I do not pretend to be an exemplary solution and ideal implementation options, it’s just for fun that works in Google Chrome, Safari and Mozilla Firefox.