Крестики нолики на javascript

Крестики нолики на javascript

В курсе по Ruby у вас уже был шанс создать эту игру для проверки ваших навыков в ООП. И если вы ее сделали, то сейчас вам будет проще, так как предстоит реализовать ее для браузера.

Крестики-нолики

Помните эту игру? Если нет, то посмотрите в Википедии. Здесь будут два игрока, игровое поле, проверка на выигрыш после каждого хода. Приступим!

Ваше задание

Необходимо создать игру, где два игрока (человека) играют друг против друга.

  1. Создайте для проекта репозиторий на Github.
  2. Создайте пустой документ HTML.
  3. Подумайте, о том, из чего должна состоять игра. Какие понадобятся объекты и функции? Лучше сейчас подумать несколько лишних минут, чем потом переделывать программу, теряя часы впустую.
  4. Создайте объект доски 3х3 в JS, которая содержит текущее значение в каждой клетке ("X", "O" или " ").
  5. Создайте функцию render() , проходящую циклом по этому объекту, и создающую соответствующие элементы HTML. Стилизуйте их как настоящую доску для игры в крестики-нолики.
  6. Создайте логику игры (здесь мы не будем давать много подсказок). Когда пользователь кликает на пустой клетке, она должна отобразить символ текущего пользователя. Это можно реализовать, обрабатывая событие клика на соответствующем div. Может быть полезным присвоить каждому div’у атрибут data или id (на основании позиции div’а), чтобы вы могли его идентифицировать в вашем коде JS.
  7. Также игра должна определить момент окончания — если кто-то выиграл, или же больше некуда ходить. В случае окончания игры, выведите соответствующее сообщение на экране.
  8. Если желаете — замените буквы "X" и "O" произвольными изображениями.
  9. Отправьте решение на Github.

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

Читайте также:  Что делать если застряла карта в банкомате

Проблема в том, что функция работает некорректно. Всегда выдает "победа", когда ставишь крестик в последней ячейке. А должна, как следует из правил игры, выдавать "победа" только при наличии заполненной полностью строки, колонки или диагоналей.

1 ответ 1

Честно говоря, я не смог осознать ваши проверки. Но, я уверен, они даже близко не рабочие. Я попытался переписать ваше условие, но у меня получилось раз в 5 больше операций сравнения. Десятиэтажная непонятная портянка кода. И я решил переписать в другом ключе.

Гибкий и простой вариант, не зависящий от количества ячеек

На свежую голову написал гораздо более простой и лаконичный вариант. Он не зависит от количества ячеек и не требует никакой настройки.

Логика работы базируется на следующем правиле определения победы в игре:

  • победная комбинация является или полным набором ячеек одной строки (индекс у строки одинаков, ячейки перебираем от 0 до максимума по очереди)
  • или набором ячеек одного столбца (одинаковый индекс столбца, строки перебираем от 0 до максимума)
  • или диагональю из верхнего-левого угла в правый нижний (перебираем по очереди все ячейки, стоящие в пересечении одинаковых индексов строк и столбцов: 0х0, 1х1, 2х2, etc)
  • или диагональю из левого-нижнего в правый-верхний угол (координаты ячеек можно выразить через [max — n — 1] x [n] . То есть, для таблицы 3х3 нужно перебрать ячейки (n — номер итерации) n=0: [3 — 0 — 1]x[0] (2х0), n=1: [3 — 1 — 1]x[1] (1х1), n=2: [3 — 2 — 1]x[2] (0х2)

Пример дополнен инпутом, в котором нужно ввести число, после чего таблица будет перерисована соответствующим количеством строк-столбцов.

Полный js-код из примера (кроме самой функции proverka добавлен функционал перерисовки таблицы и навешивания слушателей):

Читайте также:  Какое имя можно поставить в инстаграме

Первый вариант, не масштабируемый.

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

Ссылка на основную публикацию
Компьютерное моделирование в excel
рассмотрение этапов информационного моделирования на примере решения конкретных задач; закрепление навыков работы в MS Excel; установление межпредметных связей: информатики и...
Клуб любителей шевроле авео
Для Вашего удобства мы собираем все инструкции по эксплуатации, каталожные номера и т.д.Полезная информация Для размещения Ваших объявлений ищите специальную...
Ключ для установки винды 8
Всем доброго времени суток, подбирайте клчики, мы собрали наиболее актуальные, но к сожалению физически не можем проверить все. В данной...
Компьютерные сокращения в английском языке
Молодёжный компьютерный сленг – источник большого количества запросов в поисковых системах Интернета, производимых людьми, столкнувшимися в интернете с непонятным словом,...
Adblock detector