Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.04.2012, 09:04
Интересующийся
Отправить личное сообщение для last-art Посмотреть профиль Найти все сообщения от last-art
 
Регистрация: 26.01.2012
Сообщений: 10

Реализация игрового поля для игры "Точки"
Привет всем!
Принимайте в ряды.

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

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

Товарищи прошу вашего совета, какие можно придумать способы, дайте толчок, а я попробую раскрутить уже. Пока застрял!
Ответить с цитированием
  #2 (permalink)  
Старый 19.04.2012, 11:21
Аватар для Gvozd
Матрос
Отправить личное сообщение для Gvozd Посмотреть профиль Найти все сообщения от Gvozd
 
Регистрация: 03.04.2008
Сообщений: 6,234

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

Все это исходя из предположения, что левый верхний угол поля совпадает с перекрестком в фоне
Ответить с цитированием
  #3 (permalink)  
Старый 19.04.2012, 17:22
Интересующийся
Отправить личное сообщение для last-art Посмотреть профиль Найти все сообщения от last-art
 
Регистрация: 26.01.2012
Сообщений: 10

Весело. А что если записать все необходимые координаты в массив!?
Ответить с цитированием
  #4 (permalink)  
Старый 19.04.2012, 17:42
Аватар для Раед
''
Отправить личное сообщение для Раед Посмотреть профиль Найти все сообщения от Раед
 
Регистрация: 11.12.2011
Сообщений: 636

last-art,
Не в коем случае не мучайтесь с background'ом. Сделайте обычную HTML-вёрстку (на дивах или на таблице)
Ответить с цитированием
  #5 (permalink)  
Старый 19.04.2012, 17:44
Аватар для trikadin
Модератор
Отправить личное сообщение для trikadin Посмотреть профиль Найти все сообщения от trikadin
 
Регистрация: 27.04.2010
Сообщений: 3,417

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

Та-да.

Сообщение от Раед
Не в коем случае не мучайтесь с background'ом. Сделайте обычную HTML-вёрстку (на дивах или на таблице)
А мне кажется, "обычная html-вёрстка" вызовет больше проблем.
__________________
Читайте:
Ты любопытный) Всё-таки, ничему в этом мире не помешает хорошая доля юмора)
Как спросить, чтобы вам ответили
Часто Задаваемые Вопросы (FAQ)

Последний раз редактировалось trikadin, 19.04.2012 в 17:52.
Ответить с цитированием
  #6 (permalink)  
Старый 19.04.2012, 20:46
Аватар для Раед
''
Отправить личное сообщение для Раед Посмотреть профиль Найти все сообщения от Раед
 
Регистрация: 11.12.2011
Сообщений: 636

Сообщение от trikadin
"обычная html-вёрстка" вызовет больше проблем.
Например?
Ответить с цитированием
  #7 (permalink)  
Старый 20.04.2012, 08:47
Интересующийся
Отправить личное сообщение для last-art Посмотреть профиль Найти все сообщения от last-art
 
Регистрация: 26.01.2012
Сообщений: 10

Я пока с трудом представляю как сверствать поле 1000 на 1000 пикселе с размером квадратика 20 пикселей...
Пока что более реальным выглядит работа с получением координаты с поля ->запись в "рабочий" массив, далее проверка не занята ли в "рабочем" массиве данная координата, если да -> алерт - > else начинаем проверку вокруг новой координаты на 20 пикселей во все 4 стороны. Блин, только тут проблема (а может и более):
1. как отделить свои от чужих, ведь в противном случае точки будут просто ставиться по принципу, "если свободно".
Ответить с цитированием
  #8 (permalink)  
Старый 22.04.2012, 02:18
Аватар для trikadin
Модератор
Отправить личное сообщение для trikadin Посмотреть профиль Найти все сообщения от trikadin
 
Регистрация: 27.04.2010
Сообщений: 3,417

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

<!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 эл-та, мне - один. Для двух вам понадобится шесть, мне - две. И т.д.

Как-то так.
__________________
Читайте:
Ты любопытный) Всё-таки, ничему в этом мире не помешает хорошая доля юмора)
Как спросить, чтобы вам ответили
Часто Задаваемые Вопросы (FAQ)
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Скрипт для заполнения поля формы vatras Opera, Safari и др. 9 11.01.2019 11:38
Добавление поля для выбора файла MrKapustin jQuery 5 04.04.2014 17:34
Реализация ECMAScript262v5 для устаревших платформ SV0L0CH Библиотеки/Тулкиты/Фреймворки 3 05.08.2011 05:34
Валидация поля для отправки формы shkarbatov Javascript под браузер 3 25.07.2011 13:07
Ищу программиста для сотрудничества, ищу программиста для создания браузерной игры He3HaUKa Javascript под браузер 3 25.04.2011 19:53