image
Давно хотел написать свою небольшую игрушку. И вот, изучив подходящие технологии, создал «шедевр».

На игру меня вдохновили coffee script и node.JS. Очень захотелось создать что-нибудь, во что могли бы играть двое. Начнем с клиента. Для компиляции coffee в java script я использовал innotify.

Вот такой bash скриптик получился: 

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

Он слушает все coffee файлы в папке js текущего каталога и, при их изменении, сохраняет скомпилированный файл в папку js каталога на уровень выше.

Свою игру я коротко опишу в конце статьи. Для начала хотелось бы показать механизм взаимодействия клиента с сервером.

Вот простой пример клиента на coffee (jQuery подключен):

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)

Создан класс «Hello», метод «constructor» которого пробует подключиться к node серверу.

При успешном подключении срабатывает метод «onopen», который сразу посылает на сервер тестовое сообщение в JSON формате.

И финальный этап: если сервер удачно обработал сообщение и прислал ответ, то срабатывает метод «message», который делает alert полученному сообщению.

Вот сервер, который отвечает требованиям моего небольшого примера:

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;
	}	
    });
});

Тут объяснять особо нечего. Подключаем нужные модули, создаем сервер, на «connection.on» вешаем функцию, которая обрабатывает полученные с клиента сообщения. Если переменная «index» из объекта сообщения равна «test_message»(именно то что мы шлем с клиента), то отвечаем клиенту «Ну привет!». Список connections нужно сохранить в массив.

Вот и весь механизм, на котором построены взаимоотношения моей игры с node сервером. Теперь ближе к игре. Я решил воспроизвести легендарную «Battle City». Получилась достаточно неплохая вещь (хоть и немного сыроватая в плане дизайна).

Поиграть в рабочую локальную версию, а так же скачать архивы с локальной и web версиями можно у меня на сайте:
1) Поиграть
2) Скачать

Для реализации интерфейса игры я активно использовал jQ темплейты. Само поле боя прорисовывается с помощью SVG.

Для всех объектов игры созданы отдельные методы. Такой метод формирует и отдает готовый элемент ландшафта, бота, игрока, значка с полным набором переменных и функций, который тут-же прорисовывается и добавляется в соответствующий массив.

Все поле боя поделено на клеточки (20 на 20). В одной клеточке может быть только один объект (снаряды не в счет).

Карты уровней хранятся в файлах в JSON формате и загружаются node сервером по запросу клиента. Для их изменения есть админка.

Начало игры происходит следующим образом:
1) Форма ввода ника (есть проверка на чистую латиницу). Ник проверяется на уникальность на сервере
2) Форма создания/выбора игры. Тут можно создать новую или выбрать уже созданную, не начатую игру. Название игры также проверяется на уникальность на сервере и служит уникальным идентификатором игры.
3) Форма подготовки к началу игры. Тут можно либо сразу начать игру, либо подождать подключения второго игрока.
4) Прорисовка поля боя и таблиц данных о состоянии игроков и игры

Вот и все, если коротко. Для более подробного ознакомления качайте готовые версии и смотрите. Скриншот поля боя игры:

image

Всем спасибо за внимание.