Портируем игру с тетриса… в браузер!
Думаю все (или хотя бы большинство хабражителей) помнят такие интересные девайсы как тетрисы (или Brick game). Их бум пришёлся на девяностые — начало двухтысячных годов. И хотя хитрые китайцы производители обещали 99 игр в 1, 999 в 1, и даже 9999 игр в 1, все играющие люди которых я знаю — всё равно в основном играли только в 3 игры: сам, собственно говоря, тетрис, «гоночки», и «змейку». Так как такие игры — это убивалки времени, мне пришла идея создать копию всех трёх игр в виде расширений для браузера, чтобы было чем себя занять пока что-нибудь грузится. И начал я со змейки.
Немного о настоящем девайсеКак сообщает википедия, игровое поле устройства представляет собой монохромный экран с разрешающей способностью 10 на 20 крупных пикселей. Соответственно у пикселя может быть только 2 состояния — активный и неактивный, никакие цветовые изменения не предусмотрены. Справа, обычно, располагается дополнительное поле, где указывается текущий счёт игры, рекорд, уровень, скорость, и какие-нибудь дополнительные параметры, если они имеются.Змейка
Наверное, очень трудно найти человека который не знал бы что это за игра такая, но на всякий случай следует объяснить её суть. Мы играем за, внезапно, змейку, которая ползает по полю, ест еду, и радуется жизни. Изначально она состоит из четырёх пикселей, но с каждым «обедом» (который представляет из себя один пиксель), змейка растёт, прибавляя к своей длине ещё один пиксель. Игра заканчивается если змея ударяется «головой» о саму себя, или же о край игрового поля. Существуют модификации разрешающие пересекать игровое поле, или добавляющие на него дополнительные блоки, но их я не рассматриватривал и реализовывал классику. Итог: 
Но обо всём по порядку.
Реализация Для реализации я выбрал, HTML5, CSS 3.0, и JavaScript (а точнее его библиотеку, JQuery 1.12). Да-да, никаких canvas и флешей! Разумеется, вместо JQuery можно было использовать какую-нибудь более легковесную библиотеку, чтобы не «микроскопом по гвоздям», как говорится, но я выбрал именно JQuery, просто потому что я его знаю.Для написания скриптов я выбрал подобие ООП, и поэтому архитектура управляющего скрипта получилась такая: несколько объектов для разных задач, и объект _core, для управления этим всем.
Детально:
_check — используется для проверки возможности поворота змеи, проверки проигрыша и съедания еды _do — используется для разной «грязной» работы, типа установки координатов пикселя, изменения скорости, движения, и т.д _core — используется для управления логикой игры: её инициализация, начало, конец, перезагрузка, а так же подключение стилей _keyHandler — небольшой объект, чисто для обработки нажатий на клавиши Хранение данных: Всё хранится в свойствах глобального объекта window.snake. Отдельно хранятся только текущие очки (window.score), и рекорд (localStorage['HighScore']).
Представление
Безусловно, если игра не жанра roguelike, то её внешний вид является очень важной составляющей. А так как планируется сделать копию ретро-игры — так тем более. Поэтому для воссоздания духа Brick game я нашёл и вырезал два симпатичных пикселя, которые моментально вызывают ностальгию.
Активный пиксель
и фоновый, неактивный.Показывать всё это я решил путём добавления div -ов с фоном в виде активного пикселя, и точного их позиционирования. Поле у нас 20×10, размер пикселя — 20×20, соответственно свойство top может колебаться от 0 до 380, свойство left от 0 до 180.
Так же нам нужно поле для очков, рекорда, и скорости. В конце концов получилось так:
html — код
» + window.snake.speed) }, updateScore: function () { $(»#score»).html («Score
» + Math.floor (window.score)) }, //… } Еда Сама суть игры — это убить об стену накормить змею. Я реализовал это так: — при поедании еды ставим флаг «growUp»— при следующем «кадре» добавляем один пиксель в хвост змеи— добавляем очкиJS — код // var _do = { // move: function (){ // var e = new Object; // e — последний пиксель в хвосте // e = window.snake.position[window.snake.length — 1];
if (window.snake.growUp) { _do.addPixel (e.x, e.y); window.snake.growUp = false }
// }
//}
Game Over
С реализацией проигрыша всё очень просто. Перед каждым движением головы, проверяем не окажутся ли её координаты меньше нуля, либо больше {180, 380}. Так же проверяем не окажутся ли её координаты равными координатам какого-нибудь пикселя с хвоста. Если окажется или первое или второе — Game Over:).JS — код
gameOver: function () {
var e = window.snake.position[0].x;
var t = window.snake.position[0].y;
for (var n = 1; n < window.snake.length; n++) {
if (e == window.snake.position[n].x && t == window.snake.position[n].y) {
_core.stopGame();
return true
}
if (e > 180) {
_core.stopGame ();
return true
}
if (e < 0) {
_core.stopGame();
return true
}
if (t > 380) {
_core.stopGame ();
return true
}
if (t < 0) {
_core.stopGame();
return true
}
}
return false
},
Результат
В результате получилось вот такое расширение для Chrome/Opera 20+/Другие chromium браузеры.
На данный момент расширение уже доступно для браузера Opera.Так же его можно потестить с любого браузера (или с IE) здесь, и если будут желающие поставить его себе в хром — я залью его в Chrome WebStore (залил бы сразу, но активация dev-аккаунта платная, не хочется тратиться не зная надо ли оно кому-то).А так же ссылка на GitHub.
