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

Статус
В этой теме нельзя размещать новые ответы.
Dark Wizard

Dark Wizard

Гуру форума
Регистрация
23 Сен 2007
Сообщения
194
Реакции
80
Хочется портировать настольную игру из реала в интернет)

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

VampirePrinceoftheCityboard.jpg


Для просмотра ссылки Войди или Зарегистрируйся, но как-то не-то.

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

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

Board.jpg


Может кто-то что-то подобное делал? Поделитесь опытом пожалуйста)
 
Я бы делал через position:absolute и с увеличивающимся z-index от левого верхнего угла к правому нижнему. То есть у каждой клетки три соседа с одной стороны имеют меньший z-index, а три соседа справа - больший. Тогда mouseover всегда будет выделять нужный тебе див.

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

В общем, если твою идею можно реализовать такими вот "спрайтами" - то имхо это самый простой путь. Если нет - тогда куча div'ов с z-index'ами. Но имхо намучаешься с ними..
 
Можно использовать тег 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.
 
Спасибо за ответы, подожду ещё. Наверное буду генерировать основную картинку фоновую на сервере, а фишки и фигурки игроков отдельными слоями сверху (чтобы при наведении подсказки высплывали).

Вот ещё вопрос, как лучше эти зоны пронумеровать? Или нумеровать бесмысленно, лучше названия задать? (например, чтобы реализовать одно из правил игры, что атаковать можно только зону, на которой стоит фигурка игрока или соседние зоны).
 
<div id="№"> вот вам и идентификатор зоны...
 
<div id="№"> вот вам и идентификатор зоны...
Нажмите для раскрытия...

Это понятно. Я имею ввиду, как лучше это поле

Board.jpg


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

Например, если бы у меня была квадратное поле, я бы для элемента 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)

Вот) а возможно ли это на гексаграмме реализовать?
 
Пронумеруй обычно, как шахматы. Просто помни, что каждый четный столбец у тебя сдвинут на полклетки вверх, и соседей в соседнем ряду у клетки 2, а не один. То есть один вверху, один внизу, два справа (y-1 и y) и 2 соответственно слева.

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

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