Реализация игрового поля для игры "Точки"

[last-art]

Привет всем!
Принимайте в ряды.

Изучаю JavaScript недавно, если хотите с нуля, так как до этого, дело с ним иметь не приходилось, опыт в программировании есть, но небольшой.
Не знаю, как-то манит он меня и все. Очень для меня приятны его принципы и т.д.
Конечной целью для себя ставлю работу только в направлении javascript- программирования (серверный\клиентский), то есть не только написание динамики к сайтам.
Короче, процесс обучения, как в принципе и всегда, начал с постановки не тривиальной задачи и попытке ее реализации. Изучение методом погружения.
Задачу решено фрагментировать на кучу маленьких и приступать.
Кратко о задаче.
Хочу написать всем известную игру - «Точки», знаю что «тема избита» наверняка многими начинающими и исходники так же наверняка лежат в открытом доступе, но сразу скажу, не хочется подглядывать как конкретно реализован тот или иной момент программной логики синтаксически.

Теперь вопрос:
Одна из подзадач, которая вызвала затруднения у меня еще до начала активного проектирования – это реализация поля.
Никак не соображу как лучше или даже как решибельно сделать поле для точек.
Поле будет иметь фиксированные размеры, допустим 1000 на 1000 пикселей, клетки в поле будут иметь размер 20 на 20 пикселей.
Как реализовать сетку я пока хз. Самый простой и непонятный для дальнейшей реализации поля метод, это кинуть на бэкграунд какой-нибудь клетчатый фон, но тогда надо как-то привязать координаты перекрестий в клеточках, чтобы юзер смог ставить точку только на перекрестие клеточек, а, не где попало. Сложность в том, что это самый трудоемкий способ который я пока что нашел.
Второй способ (хз как его сделать) верстать решетку, но блин это пока тоже видиться верхом безумия.

Товарищи прошу вашего совета, какие можно придумать способы, дайте толчок, а я попробую раскрутить уже. Пока застрял!

[Gvozd]

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

вычисляешь координаты клика относительно левого верхнего угла поля.
Делишь нацело на размер клетки - получаешь координаты(номер) перекрестка что выше-слева относительно места клика.
Затем делишь координаты клика на размер клетки с остатком.
Если по горизонтали остаток меньше половины размера клетки - клик был по левому(верхнему или нижнему) перекрестку.
Аналогично определяем по вертикали.
В итоге получаем координаты(номер) перекрестка по которому был совершен клик.
При желании можно не обрабатывать клики которые были на большом расстоянии от точки, например дальше 10 пикселей.

Все это исходя из предположения, что левый верхний угол поля совпадает с перекрестком в фоне

[last-art]

Весело. А что если записать все необходимые координаты в массив!?

[Раед]

last-art,
Не в коем случае не мучайтесь с background'ом. Сделайте обычную HTML-вёрстку (на дивах или на таблице)

[trikadin]

last-art, просто делаете поле из квадратиков с картинкой-бекграундом в виде двух линий - горизонтальной и вертикальной и "выколотым" центром. Пробегаете циклом, в замыкании ставите квадратику клик и его координаты, которые он "запомнит". При клике на квадратик меняете цвет его центра и вызываете нужную ф-цию с запомненными координатами квадратика. Например. В клике проверяете "близость" клика к центру ((координаты мышки - позиция элемента) > 10 | <10)

Та-да.

Не в коем случае не мучайтесь с background'ом. Сделайте обычную HTML-вёрстку (на дивах или на таблице)

А мне кажется, "обычная html-вёрстка" вызовет больше проблем.

[Раед]

"обычная html-вёрстка" вызовет больше проблем.

Например?

[last-art]

Я пока с трудом представляю как сверствать поле 1000 на 1000 пикселе с размером квадратика 20 пикселей...
Пока что более реальным выглядит работа с получением координаты с поля ->запись в "рабочий" массив, далее проверка не занята ли в "рабочем" массиве данная координата, если да -> алерт - > else начинаем проверку вокруг новой координаты на 20 пикселей во все 4 стороны. Блин, только тут проблема (а может и более):
1. как отделить свои от чужих, ведь в противном случае точки будут просто ставиться по принципу, "если свободно".

[trikadin]

Например?

Например, нам нужно отслеживать клик не по квадратику, а по точке пересечения линий (читай, границе пересечения квадратиков). Посмотрим, что будет, если использовать, например, табличную вёрстку для вашего примера:

<!DOCTYPE html>
<html>
<head>
<style>
table {
 border-collapse: collapse;
}

table td {
 width: 19px;
 height: 19px;
 border: 1px solid black;
 padding: 0;
}
</style>
</head>
<body>
<table>
 <tr>
  <td></td>
  <td></td>
 </tr>
 <tr>
  <td></td>
  <td></td>
 </tr>
</table>
</body>

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

Соответственно, если точек много, вам придётся в обработчике каждый раз обсчитывать, рядом с каким из углов кликали. Фигово это, товарищ)

Точка должна быть более-менее круглой. Сделайте круглую точку на стыках ячеек.

Для того, чтобы сделать одну точку, вам понадобится 4 эл-та, мне - один. Для двух вам понадобится шесть, мне - две. И т.д.

Как-то так.