Какую выбрать реализацию нестандартной сетки (как в морском бое, но она отличается)?

Question

[Игорь Прищепа]

Здравствуйте!

Всем давно известны "большие крестики нолики", но, возможно, не только, я видел еще одну разновидность в виде ромба. Ну что-то похожее на вот это:

И вот у меня в последний раз, когда играл, возникло желание реализовать это на ПК. Мой выбор пал на Web. Поскольку хотел избавиться от всяких "инсталяшек" и прочей "лабудени". Но сев за дело, я понял, что не могу понять с какой стороны мне подойти, в плане создания самого поля и как обрабатывать нажатия на сами грани будущих квадратов.. В общем, нужен ваш совет (пинок под зад), который бы меня натолкнул на правильную реализацию.

Comments

[Юрий Лобанов]

Так какую картинку верстать хотите? Тут ведь 4 картинки, если Вы не заметили :)

[Игорь Прищепа]

@iiil Суть в том, что создается чистое поле как на первом рисунке, после игроки ставят полоски(это нужно поиграть, что бы понять), в следствии чего получается в итоге как на левой в правом углу. В конце концов игроки начинают занимать поле (опять же нужно поиграть что бы понять), получается как на нижней левой, под конец игры все поле заполнено. И по окончанию должно подсчитать кол-во крестиков и ноликов. Вот.

[Юрий Лобанов]

@Kind_pradatoR еще одно уточнение: в каком случае ставится крестик в поле? Скажем, квадратик с координатами 7, 4, у него на второй картинке одна граница синяя, вторая красная, а на третьей картинке все границы заполнены и стоит крестик.

[Игорь Прищепа]

@iiil кто последний закрыл квадрат. То есть есть три линии одна не закрашена, вот кто ставит ( ход по очереди), того и клеточка, соответственно и О или Х определяется по этому.

Answer 1

[Dmitry Vashkevich]

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

Comments

[Игорь Прищепа]

хм...интересная мысль... а что предложите по поводу того, что нас ромб?

[Dmitry Vashkevich]

можно ромб, можно хоть кружками) если нельзя просто с использованием html+css сделать - можно с использованием canvas сделать :) по сути все сведется все-равно к отлавливанию координат мышки и поиска ближайшей грани..

[Игорь Прищепа]

@dmitryvashkevich понятно, что нужно будет отлавливать координаты. Я просто ищу саму подходящую реализацию, что бы меньше мороки было уже после. С дивами я тоже думал, но вот думаю как быть с тем, что должен получаться ромб с такими вот гранями....Эх..

[Dmitry Vashkevich]

Ромб в каком плане? Как на картинках - ромб-карта из квадратов? Так дивы позиционировать можно.. Тоже самое и с таблицей можно, какие-то ячейки активные сделать со своими стилями, какие-то нет..

Или вообще вместо маленьких квадратиков ромбы? Тогда в стороны css3 можно посмотреть на трасформации. По сути тоже самое получится, но расчет до ближайшей грани будет чуть сложнее.. на уровне школьной геометрии :)

[Игорь Прищепа]

@dmitryvashkevich дивами буду пробовать.) Пытаюсь сейчас придумать как можно генерировать такие поля разных размеров.

Answer 2

[Юрий Лобанов]

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

Comments

[Dmitry Vashkevich]

С бордерами можно элементы сдвигать "друг на друга" на размер бордера, при наведении подсвечивать верхний бордер (который может быть у перекрывающего элемента, а не у того, на который навели). В принципе, что высчитывать элемент-границу, что нужный бордер - на мой взгляд одинаково по сложности.