Гексовое поле

Тема в разделе "Как сделать...", создана пользователем Dark Wizard, 6 фев 2009.

Статус темы:
Закрыта.
  1. Dark Wizard

    Dark Wizard

    Регистр.:
    23 сен 2007
    Сообщения:
    157
    Симпатии:
    76
    Хочется портировать настольную игру из реала в интернет)

    Единственная проблема - не знаю как лучше сделать гексовое поле.

    [​IMG]

    Сделал таблицами, но как-то не-то.

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

    Поискал по интернету, почитал про алгоритмы, но готовой реализации какой-нибудь простенькой (хотя бы 4 гекса) не нашёл.

    [​IMG]

    Может кто-то что-то подобное делал? Поделитесь опытом пожалуйста)
     
  2. venetu

    venetu

    Регистр.:
    28 мар 2007
    Сообщения:
    737
    Симпатии:
    263
    Я бы делал через position:absolute и с увеличивающимся z-index от левого верхнего угла к правому нижнему. То есть у каждой клетки три соседа с одной стороны имеют меньший z-index, а три соседа справа - больший. Тогда mouseover всегда будет выделять нужный тебе див.

    А вообще - что должно быть в одной клеточке? Ну в смысле будут ли там еще объекты кроме фона? Может было бы проще сделать квадратный гиф, у которого в центре нарисован нужный шестиугольник, а возле углов прозрачные пиксели. И генерить эти гифы (ну или png) на сервере из комбинаций "фон + человечек + позиция человечка". Вставить одну картинку на другую - очень просто. Выплюнуть это все в бровзер в виде png с прозрачностью - тоже просто, и даже проблем с IE6 не будет, т.к. "полупрозрачность" тут не нужна.

    В общем, если твою идею можно реализовать такими вот "спрайтами" - то имхо это самый простой путь. Если нет - тогда куча div'ов с z-index'ами. Но имхо намучаешься с ними..
     
    Dark Wizard нравится это.
  3. polyetilen

    polyetilen Заблокирован

    Регистр.:
    10 авг 2006
    Сообщения:
    814
    Симпатии:
    474
    Можно использовать тег map, вся карта как одна картинка к картинке подключается map с размёткой границ.
    А для подсветки использовать дивы с абсолютной позицией и с фоном разрезанного гекса с прозрачными краями.
    Когда на тег map наводиться мышь то коказывать подсветку над зоной где мышь.
    Для примера:
    HTML:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    body {
        margin-left: 0px;
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
    }
    -->
    </style></head>
    
    <body>
    <img src="http://www.white-wolf.com/vampire/boardgame/Board.jpg" width="496" height="496" border="0" usemap="#Map" />
    <map name="Map" id="Map">
    <area shape="poly" coords="219,205,269,206,292,245,269,284,223,284,197,244" href="#" alt="" onMouseOver="document.getElementById('gex1').style.visibility='visible';" onMouseOut="document.getElementById('gex1').style.visibility='hidden';" />
    <area shape="poly" coords="218,149,262,151,288,183,270,207,214,206,200,184" href="#" onMouseOver="document.getElementById('gex3').style.visibility='visible';" onMouseOut="document.getElementById('gex3').style.visibility='hidden';"/>
    <area shape="poly" coords="319,184,291,183,273,210,292,245,322,243,342,217" href="#" onMouseOver="document.getElementById('gex2').style.visibility='visible';" onMouseOut="document.getElementById('gex2').style.visibility='hidden';"/>
    </map>
    <div id="gex1" style="position:absolute;top:207px;left:199px;background:#FF0000;width:94px;height:77px;visibility: hidden;z-index:100;"></div>
    <div id="gex2" style="position:absolute;top:184px;left:271px;background:#00FF00;width:73px;height:62px;visibility: hidden;z-index:200;"></div>
    <div id="gex3" style="position:absolute;top:150px;left:203px;background:#0000FF;width:84px;height:62px;visibility: hidden;z-index:300;"></div>
    
    </body>
    </html>
    
    
    но что-то так мерцает на onMouseOut, тогда переделать можно onMouseOut.
     
    Dark Wizard и dotsenko нравится это.
  4. Dark Wizard

    Dark Wizard

    Регистр.:
    23 сен 2007
    Сообщения:
    157
    Симпатии:
    76
    Спасибо за ответы, подожду ещё. Наверное буду генерировать основную картинку фоновую на сервере, а фишки и фигурки игроков отдельными слоями сверху (чтобы при наведении подсказки высплывали).

    Вот ещё вопрос, как лучше эти зоны пронумеровать? Или нумеровать бесмысленно, лучше названия задать? (например, чтобы реализовать одно из правил игры, что атаковать можно только зону, на которой стоит фигурка игрока или соседние зоны).
     
  5. serjinio

    serjinio

    Регистр.:
    10 май 2007
    Сообщения:
    439
    Симпатии:
    49
    <div id="№"> вот вам и идентификатор зоны...
     
  6. Dark Wizard

    Dark Wizard

    Регистр.:
    23 сен 2007
    Сообщения:
    157
    Симпатии:
    76
    Это понятно. Я имею ввиду, как лучше это поле

    [​IMG]

    пронумеровать, чтобы реализовать параметр "соседняя зона".

    Например, если бы у меня была квадратное поле, я бы для элемента a(x,y) задал соседние по принципу:
    - a(x-1,y-1)
    - a(x+1,y-1)
    - a(x-1,y+1)
    - a(x+1,y+1)
    (это если без диагональных). Т.е. для поля в 5 клеток шириной, пронумерованных от 1 до 25:

    1 2 3 4 5
    6 7 8 9 10
    11 12 13 14 15
    16 17 18 19 20
    21 22 23 24 25
    для зоны 13, соседние были бы
    зона 12: a(13-1)
    зона 14: a(13+1)
    зона 8: a(13-5)
    зона 18: a(13+5)

    Вот) а возможно ли это на гексаграмме реализовать?
     
  7. venetu

    venetu

    Регистр.:
    28 мар 2007
    Сообщения:
    737
    Симпатии:
    263
    Пронумеруй обычно, как шахматы. Просто помни, что каждый четный столбец у тебя сдвинут на полклетки вверх, и соседей в соседнем ряду у клетки 2, а не один. То есть один вверху, один внизу, два справа (y-1 и y) и 2 соответственно слева.

    Затык тут может быть что если соседний ряд четный, то в нем надо брать клетки с y-1 и y, а если нечетный - то y и y+1. Ну так это можно загнать в формулу, будет типа signY = (x % 2)*2-1.

    И на поле будет обычная гео-разметка по 2м координатам x и y. Имхо самый удобный путь.
     
Статус темы:
Закрыта.