Ноябрь 2017
Автор: Рубрика: Верстка Комментариев нет

Игра на javascript подробно


Игра на javascript

Сделаем игру крестики нолики на javascript.

Будет девять ячеек, по нажатию на ячейку будет добавляться функция с записью номера ячейки, на которую кликнули.

Затем проверим ячейку есть ли в данной ячейки текст, если нет, то записываем текущее значение игрока икс или ноль.

Записываем это в массив dataX или dataO каждого игрока.

Добавляем класс икс X и O ячейки на которую нажали, чтобы окрасить ячейку.

Делаем проверку на длину массива, если он больше двух с функцией проверки на победу из комбинаций.

Если кто, то победил, то удаляем функцию клика по ячейки и выводим сообщения кто победил.

Зададим структуру в index.html для игры на javascript.

Стилизуем крестики нолики в main.sass.

Пишем игру на javascript

Объявляем все переменные.

  • Переменная ceil ячейка с помощью getElementsByClassName ищем все данные элемента game-item.
  • Делаем перезапуск игры переменной reset = document.getElementById (reset-game).
  • Выводим сообщение message с идентификатором message.
  • Добавляем игрока в переменную player.
  • Сделаем счетчик шагов stepCount.
  • Добавим массив с выигрышными комбинациями в winCombinations.
  • Добавляем два пустых массива dataX и dataO. В эти массивы будут записываться значение ячейки, на которую кликнул игрока.
  1. Пишем код. Проходим циклом по всем элементам cell (var i = 0; i < ceil.length; i++) и каждому элементу добавляем событие, которое вызывается по клику с названием currentStep ceil[i].addEventListener (click, currentStep). Теперь по клику на ячейку будет вызываться функция currentStep.
  2. Пишем функцию currentStep (). Сперва объявим переменную num = +this, плюс стоит чтобы преобразовать в число. getAttribute (data-ceil) и получаем значение атрибута. Записали в переменную значение атрибута куда кликнули. У каждой ячейки будет свой номер 1, 2, 3 до 9.
  3. После клика проверяем есть ли значение в ячейки с помощью условия. Если в данной ячейки нет никакого содержания if (!this.textContent), то мы назначаем игрока this.innerText = player. Чтобы при клике он менялся на другого пишем changePlayer ().
  4. Пишем функцию changePlayer (). Если текущий игрок X, то становится игрок O. Если не X то становится X. player === X ? (player = O) : (player = X) . Используем условные операторы. Условие игрок равен Х ?, то значение правда : второе значение ложь.
  5. Увеличим счетчик хода. Изначально равен ноль и с каждым ходом увеличиваем на один. Увеличивать будем с помощью тернарного оператора делаем проверку. Если счетчик ходов равен девяти stepCount === 9, то выводим сообщение ? (message.innerText = Ничья) и если не равен девяти, то выводим чей ход на текущий момент (message.innerText = Ходит игрок + player).
  6. Добавим функцию очистки поля после игры. Есть переменная reset, для поиска кнопки. Повесим на элемент кнопка событии по клику reset.addEventListener (click, function (). Это событие будет вызывать функцию. Циклом проходим по всем ячейкам и в каждую ячейку делаем пустой ceil[i].innerText = "".
  7. Очищаем массивы у каждого игрока и выводим сообщение, что будет ходить первый игрок message.innerText = Ходит игрок + player.
  8. Делаем функцию, которая будет проверять выиграл ли игрок и выводилось сообщение. Функция будет function checkWin (arr, number), в нее передаем массив и число. Массив будет либо dataX или dataO, а число это номер ячейки, на которую кликнули.
  9. Перед записью функции подготовим массив и число. После того как в ячейку добавилось значение мы с помощью тернарного оператора проверяем, если игрок X, то мы добавляем в массив dataX число num с значением X, если не X, то в dataO. Проверка начнется если в массиве три числа , пишем if (dataO.length > 2 || dataX.length > 2) и добавляем вторую проверку на функцию победы (checkWin (dataO, num) || checkWin (dataX, num). Если в массиве dataO и dataX длина больше двух и при этом checkWin для О и Х возвращает значение true, то будет выполняться.
  10. Возвращаемся к функции checkWin (arr, number) и пишем цикл, который идет по массиву комбинаций побед. До тех пор пока w меньше длины выигрышной комбинации winCombinations.length увеличиваем w на один. Затем каждую строку берем в переменную ar someWinArr = winCombinations[w], вторая переменная count = 0. Делаем проверку если кликнули на первую ячейку, то ищем все массивы с выигрышной комбинацией и проверяем на победу if (someWinArr.indexOf (number) !== -1) . Если после проверки получили несколько массивом, то делаем еще цикл, который проходит внутри каждого массива по трем цифрам for (var k = 0, kLen = someWinArr.length; k < kLen; k++). Проверяем три числа из комбинации с тем числом, на которое нажал игрок if (arr.indexOf (someWinArr[k]) !== -1). Если число есть, то увеличиваем счетчик на один count++, если счетчик станет равен трем, то есть полное совпадение и мы вернем true. Если массив не прошел проверку сбрасываем счетчик на ноль count = 0 и проходим повторно.
  11. После того как определили победителя вернемся назад и напишем ceil[i].removeEventListener (click, currentStep), чтобы после победной комбинации нельзя было нажимать на ячейки и возвращаем запись кто победил return (message.innerText = Победил игрок + player).
  12. Добавим цвета ячейки после нажатия добавлением нового класса && this.classList.add (x) и && this.classList.add (o), цвета у классов зададим в стилях.

  13.  Чтобы эти классы очищались после нажатия сброс игры добавим ceil[i].classList.remove (x, o).

Код в common.js

Комментариев нет