- PVSM.RU - https://www.pvsm.ru -

Клон игры JezzBall / KBounce / «Неугомонные шарики» на html5

В последнее время все больше и больше игр делается под браузеры. Помимо разработки новых новых игр наблюдается тенденция «клонирования» старых игр. В качестве примера можно привести такие игры как Battle City [1], DX-BALL [2].
Смотря на разработки третьих лиц, у меня все больше и больше возникало желание сделать что-то подобное, написать свою браузерную игрушку. Но каждый раз начиная что-то делать я вставал в тупик, т.к. отсутствие фантазии и дизайнеских навыков давали о себе знать. Не так давно я увидел пост [3] о том, как ребята из студии BorodinART сделали клон одной из любимых игр детства — DX-BALL. Этот пост вдохновил меня и я решил сделать клон стандартной игрушки из KDE — KBounce или «Неугомонные шарики».

image

Игра KBounce, в свою очередь, является клоном игры JezzBall, разработанной в 1992 г. Дмитрием Павловским:

image
Правила игры

Играют на поле, окруженном стеной, с двумя или более мячами, которые отскакивают от стен. Размер поля уменьшается, если вы создаете стену и при этом никакой шар не оказывается попавшим в ловушку. Чтобы пройти уровень, игроку за данное время нужно уменьшить размер поля по крайней мере на 75%. На каждом следующем уровне к игре добавляется по одному шару, а игроку дается больше жизней и времени. Подсчет очков зависит от того, насколько вы уменьшили площадь.

Немного о работе

Я не буду приводить куски кода, и объяснять как что работает. Если говорить кратко, то игрушка сделана на canvas'е с использованием библиотеки KineticJS [4]. Цель моей работы было сделать игрушку максимально похожей на оригинальную, однако, небольшие отличия все же есть (таблица рекордов, смена темы). Подсчет очков производится по формуле: 2(x-75)(y+5), где: x-процент заполнения, y-оставшиеся жизни. На прохождение n-го тура дается 60+30*n секунд. Бонусом к игре я сделал приложение вконтакте, в котором дополнительно ведется рейтинг среди друзей. Желающие вставить игру себе на сайт могут воспользоваться специальным кодом для вставки, который указан на сайте.

Ссылки

Желающим посмотреть на результат, предлагаю перейти по ссылкам, предложения и критика преветствуется:
Игра: http://bimball.com/bounce [5]
Приложение вконтакте: http://vk.com/app4014280 [6]

P.S: На хаб «Я пиарюсь» не хватает кармы, прошу не ругать.

Автор: drkernel

Источник [7]


Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/javascript/55365

Ссылки в тексте:

[1] Battle City: http://blog.bencao.it/fc_tank/

[2] DX-BALL: http://dx-ball.ru/

[3] пост: http://habrahabr.ru/post/147339/

[4] KineticJS: http://kineticjs.com/

[5] http://bimball.com/bounce: http://bimball.com/bounce

[6] http://vk.com/app4014280: http://vk.com/app4014280?habrahabr=1

[7] Источник: http://habrahabr.ru/post/213117/