Browser online game with jQuery, CoffeeScript, SVG and node.JS

I have long wanted to write my little toy. And now, having studied the appropriate technologies, he created a “masterpiece”.

I was inspired to play the coffee script and node.JS. I really wanted to create something that two could play. Let's start with the client. To compile coffee in a java script I used innotify.

Such a bash script came out:

coffee --compile --output ../js/ js/ while inotifywait -q -r -e modify .; do coffee --compile --output ../js/ js/ done 

He listens to all coffee files in the js folder of the current directory and, when changed, saves the compiled file in the js folder of the directory to a higher level.
')
I will briefly describe my game at the end of the article. For a start, I would like to show the mechanism of client interaction with the server.

Here is a simple example of a client at coffee (jQuery connected):

 class @Hello constructor: -> window.WebSocket = window.WebSocket || window.MozWebSocket; if !window.WebSocket alert(['   WebSocket']) return false #     @connection = new WebSocket('ws://localhost:1337') @connection.onopen = @onopen @connection.onmessage = @message # ,       node  onopen: => #          @connection.send(JSON.stringify( 'index':'test_message' 'text':'' )) # ,      message:(message) => #    alert(message.data) #       "hello"  jQuery $.fn['hello'] = () => object = new @Hello() return $(@).data('hello', object) 

The “Hello” class was created, the “constructor” method of which tries to connect to the node server.

If the connection is successful, the “onopen” method is triggered, which immediately sends a test message to the server in JSON format.

And the final stage: if the server successfully processed the message and sent a response, then the “message” method is triggered, which makes alert the received message.

Here is a server that meets the requirements of my small example:

 process.title = 'node-test'; var webSocketServer = require('websocket').server; var http = require('http'); var fs = require('fs'); var sys = require('sys'); var server = http.createServer(function(request, response) {}); server.listen(1337, function() {console.log('Web server runing...');}); var wsServer = new webSocketServer({httpServer: server}); wsServer.on('request', function(request) { var connection = request.accept(null, request.origin); connection.on('message', function(message) { var json = JSON.parse(message.utf8Data); switch (json.index) { case 'test_message': connection.sendUTF(' !'); break; } }); }); 

There is nothing special to explain here. We connect the necessary modules, we create the server, on "connection.on" we hang up the function that processes the messages received from the client. If the variable “index” from the message object is equal to “test_message” (exactly what we send from the client), then we reply to the client “Well, hello!”. The list of connections must be saved in an array.

That's the whole mechanism on which the relationship of my game with the node server is built. Now closer to the game. I decided to reproduce the legendary "Battle City". It turned out quite a good thing (albeit a bit damp in terms of design).

You can play the local working version, as well as download archives with local and web versions on my website:
1) Play
2) Download

To implement the game interface, I actively used jQ templates. The battlefield itself is drawn using SVG.

Separate methods are created for all game objects. This method generates and gives the finished element of the landscape, bot, player, icon with a full set of variables and functions, which is also drawn and added to the corresponding array.

The entire battlefield is divided into cells (20 to 20). In one cell there can be only one object (shells do not count).

Level maps are stored in files in JSON format and loaded by the node server at the request of the client. To change them there is an admin panel.

The game begins as follows:
1) Nickname input form (there is a check for a clean Latin). Nick is checked for uniqueness on the server
2) Form the creation / selection of the game. Here you can create a new one or select an already created, not started game. The name of the game is also checked for uniqueness on the server and serves as a unique identifier for the game.
3) The form of preparation for the start of the game. Here you can either start the game immediately, or wait for the connection of the second player.
4) Drawing a battlefield and tables of data on the status of players and games

That's all for short. For more information, download the finished version and see. Screenshot of the battlefield of the game:



Thank you all for your attention.