Node.js + HTML5 + js = online action game. Play on Node.js

It has long been wondered, why writing online games for node.js is so rare, especially in Habré?
After all, what praises sang a noda when it appeared, and how many predicted the good (or bad) this platform, and something new is not much added.

I decided to check whether such an approach to the game is doomed to failure, and why. I have to say right away, the results have encouraged me!
Under the cut the details and problems that I encountered during the development process.

Brief background

As a 4th year student of cybernetics, I received from a programming teacher a proposal to participate in a competition held by STEP and several other companies in combination. The contest “Golden Byte” has been held not for the first year and I thought that this is a great opportunity to try myself in the field of game development. Having experience of 1.5 years in a web studio as a developer (php, js, html, well, everything is as usual), I decided not to hesitate for a long time and applied for the nomination " Game design ". Fortunately, my friend and I (an amateur artist) had some ideas (thoughts) about the concept of a browser game.
')

Go!

The essence of the game in brief.

Browser time killer. Two teams of plastic soldiers run around the computer desk and destroy each other, fighting for possession of the table. The team wins by typing a certain number of kills. Control: WASD + mouse.

A design document was drafted in a couple of days, sent and approved by the jury of the competition. At this point, I have already defined the platform on which the server part will be based, the client, in general, the basic architecture. The decision was made in favor of Node.js (server), js + html5 (client). Data about the map, items, available units are stored in xml format and lie on the server.

Sketches of units were drawn while I sawed the code.



Features and background to the game here lay out, I think it is not appropriate.

Logics

So, I faced several implementation problems, and since I still had no business with the node, I had to adjust to the situation.

As a client-server communication method, I chose Web sockets, connected socket.io, a couple of shamans and dances, and voila, there is a connection. The first sketches a la movement and synchronization were carried out with clumsily drawn pictures in a picture (for clarity).



Data fly in json format.

The process of what is happening in the background was approximately as follows.

1. The user enters the site, receives primary data on the map, all the necessary service information, first packet.
2. The user sees the main screen. - Download the necessary images (preload).
3. The user anonymously connects socket.io with the server, registers it in session.
4. The user chooses which side he will play for - a request is sent, a mark about the side is put.
5. The user chooses which character he will play for - a request is sent, a mark about the character is put.
6. The player is placed on the respawn point, based on the map settings.
7. The process of data exchange with the server begins, and the game itself (below is the algorithm).

The action synchronization algorithm was thought up as follows:

• The server has an interval of 50 ms, which sends the necessary info to the connected users, the location and actions of the players. (A list of player objects is sent).
• Users have a catch-event for messages and when they catch it, check which package came in, main / first / system, etc.
• In response, a packet is flying from the user with the current user action. Only keystrokes fly, all calculations take place on the server (is it possible to go there, where you find yourself, etc., etc.).

And so in a circle.

Drawing

As a field for drawing, I used canvas. After a brief viewing of popular libraries, I thought that I still do it more for myself, and not for the competition. But it's much nicer to write my bike, especially in a new area for me, so it was decided to write my own small rendering engine.

Well, as it should be, setInterval, requestAnimationFrame, and all the knowledge that remained on geometry and elementary algebra went to the course.
After rendering the background, the active area of ​​the screen was selected, which is visible to the user, minus the difference in the area of ​​the object being drawn. At this perimeter, the core is rendered. On the server, everything is regularly sorted according to the distance from the screen (in height) so that the picture of the soldier standing on does not overlap the soldier standing closer to the screen.

By this time, I already had a ready-made set of sprites for drawing a unit. I added a method to render the animation of sprites to the engine, as a result I got the following:



So, at the moment I was ready:

• Drawing units with animation
• Drawing objects
• Uneven Table Borders (inability to pass for them)
• Moving around the map

Unit sprites were rendered in 3Dmax and glued together. It looked like this (clickable):

And, of course, boevka

The combat unit is implemented quite simply. When you click the left mouse button on the field, the character turns in that direction and hits. The right mouse button is a block to the side in the direction of the mouse. A character has certain characteristics that determine his speed / vitality / fatigue / range_ impact / dmg, etc.

And again, all calculations occur on the server, the player receives only the result of his keystrokes.

Some service information / statistics

VPS server for 5 euros per month:
CPU 1200 Mhz, 256MB RAM, Debian OS.

Map 3000 to 3000 (one-dimensional array, followed by conversion). When the server starts, it initializes, takes 900 ms. When was a two-dimensional array, took 6500 ms.

5MB client channel. 40 connections (20 to 20). Data exchange was ensured and a constant FPS was maintained without sags 30-60.

Some more pictures:

Main screen:



Scroll the mouse wheel:



Blue team win:



Cross-browser compatibility is provided for Chrome, Mozilla, Opera, Explorer 10+. In general, everything that supports canvas and Websockets.

There was also an adapted version for those who came from the phone (the interface is not finished, but it works).

Total

All the work took about one and a half months of work after study and work.
I will not give a link to the game, the poor server will not sustain the habraeffect, and I'm not ready yet for load testing.
At a competition in my city, my friend and I took 2nd place, which in principle did not upset me, but only spurred. I made the game more for myself, but in the future, maybe we will redo the graphics, and it will be possible to share it, but it is still too early to talk about it.

For those who want to see my clumsy code, here is the git repository. Just do not spit, now I see how ugly everything is, although I did it only half a year ago: https://github.com/amikstrike/wn

Thanks for attention!