HTML5

индекс
61,16

Javascript Pseudo-3d Game


Здравствуйте, Хабрасообщество.
Я очень люблю JavaScript за его изящество, красоту и много других преимуществ. А еще я очень люблю на нём писать. Более того, я люблю писать не только стандартные вещи, но и то, что обычно на этом языке мало кто пишет. В этой серии статтей я хочу подробно рассказать о создании кроссбраузерной (IE6+, Chrome, O9+, Fx2+, Konq) псевдо-3д игры на JavaScript+DOM (без использования Canvas) в несколько этапов. Игра будет подобна к первым Might and Magic. В планах сделать передвижение по лабиринту с видом сверху, потом с видом от первого лица, затем населить лабиринт монстрами, ловушками, дверями, а в конце добавить сетевую игру с серверной частью на PHP и, естественно, не забыть про многофункциональный редактор карт. Уверен, со временем и предложениями появятся и другие идеи.

Итак, презентую готовый первый этап игры.

Игра



Принцип игры на данным момент безумно прост. Вы — стрелочка, которая должна добраться с зеленого квадратика в красный и так 5 раз.
Двигаемся стрелочками. Или через shift+стрелочки. Второй режим — пока удобнее. Но силу определенных причин основным будет именно режим «иду куда смотрю», а не «иду, куда показывает стрелочка». Это из-за планов.
Латинское «e» — включает редактор карт.

Редактор


Перемещаем активную клетку стрелочками. С помощью shift+стрелочка, или с помощью [asdw] ставим стены в определённом направлении.
Z — начало, X — конец. Enter — играть нашу карту. Учтите, что сейчас реализовано только редактирование существующих карт. Если вы хотите создать карту определённого размера с нуля — используйте ссылку http://freecr.ru/maze/?editor&w=15&h=10

Реализация и технологии


Во время создания движка я старался использовать множество возможностей протипированного одхода в ЖС и считаю, что вполне преуспел в этом. Наследование пока не использовалось, но в следующих этапах обязательно понадобится. Код получился читаемым и легкорасширяемым, хоть и требует легкого рефакторинга(чем мы и будем заниматься далее). Хотелось бы получить советов и мнений от не менее опытных товарищей. Надеюсь, данные исходники смогут послужить в будущем отличным примером для новичков.

Для отображения результата используется только DOM и ни одной картинки. Для манипуляции с DOMом используется JQuery. Для отлова клавиатурных событий — мой $.keyboard плагин. Всё остальное — или написано мной с нуля, или взято где-то из моих архивов.

Планы


Как я уже сказал, разработка будет вестись в несколько этапов. Первым этапом есть создание базового движка и редактора карт. Следующий этап — вид от первого лица. Прошлую реализацию вы уже можете посмотреть: freecr.ru/lab/ (ооо, только не смотрите в исходники!). Цель — добиться того-же результата. И снова — только DOM:

Если найдутся желающие — я детально опишу реализацию, алгоритмы, проблемы и их решения отдельным топиком.

Разное


Проект хостится на гуглокоде (для меня это уже традиция).
Лицензия — GPL v3
Принимаю предложения и issues.
+76
18 декабря 2009, 11:56
30

комментарии (53)

НЛО прилетело и опубликовало эту надпись здесь
+3
TheShock #
вы смотрите старую версию. я переписываю её с нуля в силу того, что набрал намного больше опыта.
карта открывается если активировать «Читер-мод»
Р ­— это метка. вы ставите метку, если хотите отметить, что вы тут были

0
itspoma #
молодец! понравилось!

а вот этот участок кода надо побольше «обфусцировать»:

    if (!confirm('Вы уверены, что хотите активировать "Читер мод"?')) return false;
    if(window.prompt('Нужен пароль') != 1) return false; // <<<<<<

А то легко подсмотреть пароль к четер-моду ;)
0
TheShock #
у меня не было цели скрыть возможность читерства. я, как минимум, мог бы поставить md5 от пароля =)
+1
Ctacus #
омг, когда у меня спросило пароль, я автоматически поставил 1 и подумал что он принимает любой пароль =))
+1
lol2Fast4U #
однако в старой версии плавные повороты есть, а тут не понятно, куда идешь
+2
TheShock #
> www.nihilogic.dk/labs/wolf/
это канвас. как минимум не так кроссбраузерно. и вообще — другие цели=)
0
TheShock #
Вы уж простите за замечание, но перед тем, как комментировать — желательно знать про что идется в топике. Хотя бы один раз прочитать. Благо, он не такой большой.
0
Mobyman #
Я тоже вначале так подумал, но не все так просто:)
this.map = function(d) {
var map = document.getElementById('all');
if(cheater){
if (d && map.style.display != 'block') map.style.display = 'block';
else map.style.display = 'none';
}
}


И, собственно, сам код:
if (!confirm('Вы уверены, что хотите активировать «Читер мод»?')) return false;
if(window.prompt('Нужен пароль') != 1) return false;


Вот так.
+4
vitaly80 #
Супер, жалко только, что нет плавного перехода между кадрами!
+1
kostyl #
Поддерживаю, хотя бы пару промежуточных кадров вставить. Думаю их разновидностей не так много.
+4
danilissimus #
защита от читерства классная конечно :-D
(блин, вы же просили не смотреть сорцы:)
0
mekegi #
Читерство не понадобится если просто пользоваться правилом правой руки))
Выберем одно из направлений — либо правое либо левое. например выбрали правое. Начинаем идти держась правой стороны. как только справа появляется проход поворачиваем туда. как только упираемся в тупик просто разворачиваемся и опять идем по правой стороне.
так можно выйти из любого лабиринта даже закрытыми глазами. просто вытянув руку и держась одной из сторон
0
DileSoft #
Не совсем так! Правильное описание: надо идти так, как будто касаешься правой рукой стены и не можешь ее оторвать от стены. То есть если идешь вдоль правой стены, а в конце поворот налево, следует повернуть, потому что стены справа продолжаешь касаться.
+1
mekegi #
>Не совсем так!
то что вы описали чем то отличается от того что описывал я?
+1
DileSoft #
И, кстати, это работает только с лабиринтами, где нет кольцевых маршрутов — www.myrobot.ru/articles/logo_mazesolving.php
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
0
mekegi #
то что такие случаи есть я знаю. но в игрушках как правило ставят классические лабиринты. а во всяких аттракционах — где люди в реале пытаются найти выход — так всегда классические.
Еще в дествте узнал этот алгоритм — и сильно удивлялся когда смотрел экранизацию «Трое в лодке не считая собаки». Вроде бы куча народу — вроде бы неглупых — и никто не знал как выйти))
НЛО прилетело и опубликовало эту надпись здесь
0
mekegi #
к классическом лабиринте вы по определению не попадете на колонну. в классическом вы будете идти вдоль стен
НЛО прилетело и опубликовало эту надпись здесь
0
gribunin #
В правильной формулировке правило гарантирует не выход из лабиринта, а возврат в исходную точку. В таком виде оно работает всегда.
0
Sulako #
а если вы взялись за колонну посреди лабиринта и нарезаете круги вокруг нее?
+1
mekegi #
У лабиринта есть вход. так что случаи когда марисне закинули вас в центр лабиринта — стерев память — я не рассматрию))
0
Sulako #
как правило, в роли марсиан выступают разработчики игры.
+3
Mumi #
Попробуйте выбраться из такого лабиринта :)
0
Mumi #
Ой. Пока я рисовал эту чудную картинку, нашлось рисовальщиков быстрых более.
0
krolser #
Не всегда. Если всё время держатся правой стороны, то можно начать ходить по кругу. Например, если взялся за «колонну» и ходишь вокруг неё.
0
dshinin #
Таким способом можно выбраться далеко не из любого лабиринта =)
А только из того, в котором стены, грубо говоря, представляют из себя единый неразрывный контур. Если где-то есть участок, своими стенами не касающийся стен окружающего его лабиринта — то по правилу правой руки вы пройдете мимо него.
Для таких лабиринтов есть другое правило. Не вспомню на вскидку как оно называется, но его суть сводится к выставлению отметок (камешков) на развилках.
+3
GreyCat #
Красиво! Напоминает Eye of Beholder и подобные винтажные RPG :) Нет в планах создания чего-то подобного? Механика-то простая, а долгие часы получения удовольствия достигаются легко :)
+1
Mithgol #
Да, именно Eye of Beholder напоминает это перемещение по лабиринту, в котором ходьба идёт по клеткам и мгновенно (а не вкось и шагами, как в играх id Software).

Eye of Beholder был особенно ужасен дырками в полу, через которые персонажи игрока неожиданно проваливались в незнакомое место более нижнего этажа лабиринта, притом кишащего ядовитыми пауками или вообще птицеголовыми магами.

Помню, ещё там были надписи на стенах, нанесённые расовой письменностью карликов или орков, так что команду приходилося подбирать многорасовою.
–1
sevka_fedoroff #
Еще странно было наблюдать за играющими в него — эдакое слайд-шоу, т.е. непонятно куда человек вообще идет
0
Siddthartha #
клевая игрушка была.
+3
AlexeyTokar #
dev.opera.com/articles/view/creating-pseudo-3d-games-with-html-5-can-1/ и там же ссылка на вторую статью
реализация на канвасе и чистом DOM с применением raycasting технологии, которая так же описана там же с примерами и пр.
0
TheShock #
не сомневайтесь, я знаю что такое канвас и даже писал на нём небольшие игрушки.
но это канвас, а не чистый ДОМ, что есть большая разница.
0
AlexeyTokar #
Вы не удосужились перейти по ссылке и вникнуть в мой комментарий.

во-первых, по ссылке Вы найдете решение БЕЗ канваса
во-вторых, я ни в коем случае не сомневался в Вашем знакомстве с канвасом, я более намекал на использование технологии «распространения лучей»
+1
AleksDesker #
Правая рука конечно выручает во многих ситуациях, но дискуссия помоему не о том. Если занятся всерьез, довести до играбельного вида, добавить социалку, РПГ элементы и т.п. можно прилично на заработать.
НЛО прилетело и опубликовало эту надпись здесь
+1
Lachezis #
3D лабиринт жудко напомнил мне игру Legacy для Windows Moblie. На первый взгляд треть работы по портированию уже сделана. )
0
magicdream #
Писал как-то лабиринт от первого лица на WinAPI и чистом Си(по требованию препода). Рендерилось это не очень быстро. Также повороты только влево и вправо. Заместо пола и потолка было просто нечто серое(надо было, как у вас картинку зафигачить). Пришлось ограничить макс. скорость движения и поворота. Правда я не особо парился. Сомневаюсь, что у вас получится реализовать плавный поворот, а если и получится, то это будет нечто очень хитрое и черезчур сложное именно для данной задачи.
0
AlexeyTokar #
плавный поворот реализуется очень даже просто. см в линке в каменте
0
magicdream #
Посмотрел, выглядит неплохо http://devfiles.myopera.com/articles/580/3d_texture.htm. Но если вы сделаете размер картинки побольше и самое главное прикрутите освещение, то тормозить будет очень заметно. Даже в том варианте по ссылке оно тормозит. В моей курсовой лабиринт без освещения рендерился очень быстро.
0
AlexeyTokar #
Вы сравниваете javascript лабиринт на DOM и C реализации по скорости рендеринга? :)

для тех масштабов, которые нужны здесь и сейчас, примера выше достаточно
0
magicdream #
Я говорю, что реализовать плавный поворот и с тенями так просто не получится. Если у вас конечно не будет картинка ещё меньше, чем в приведенном примере или стены совсем маленькие(рендеринг в данном случае неслабо зависит от высоты стен). При повороте вы будете видеть, как поколоночно отрисовываются стенки и ускорить этот процесс будет сложно.
+1
Restorer #
когда-то я делал вульф без canvas. работает достаточно шустро:
zame-dev.org/pub/wolf3d/
(и на хабре писал об этом :)
0
danilissimus #
как вы сделали это без канвы?
0
Restorer #
посредством css-спрайтов (тут подробнее — habrahabr.ru/blogs/webdev/25025/)
–2
lazyday #
реализация никуда не годится, нет плавности движения, поворотов — вместо этого какие-то рывки.

элементарный туториал от мозиллы выглядит куда изящнее
https://developer.mozilla.org/En/A_Basic_RayCaster

код не блещет глубиной познаний и заявленным «опытом»

чтобы не смешить собственные тапкм учитесь у nihilogic'а и, пожалуйста, используйте canvas.
webgl уже на подходе а тут каменный век

0
13i #
1 ур. — 1 мин. 40 сек.
2 ур. — 2 мин. 78 сек.
Проходил по правилу правой руки, особо не торопясь.
В принципе ничего сложного.

Сама реализация довольно удивила. Да и скрипт небольшой.
0
TheShock #
> 2 ур. — 2 мин. 78 сек.
ничего себе. если баг, то надо править

1-2 уровни — достаточно примитивны.
НЛО прилетело и опубликовало эту надпись здесь
0
protos_s #
гм… интересненько, надо как-то сесть написать свою игрушку написать :)

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.