Сделаем игру крестики нолики на javascript.
Будет девять ячеек, по нажатию на ячейку будет добавляться функция с записью номера ячейки, на которую кликнули.
Затем проверим ячейку есть ли в данной ячейки текст, если нет, то записываем текущее значение игрока икс или ноль.
Записываем это в массив dataX или dataO каждого игрока.
Добавляем класс икс X и O ячейки на которую нажали, чтобы окрасить ячейку.
Делаем проверку на длину массива, если он больше двух с функцией проверки на победу из комбинаций.
Если кто, то победил, то удаляем функцию клика по ячейки и выводим сообщения кто победил.
Содержание статьи
Зададим структуру в index.html для игры на javascript.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<span class="game-title" id="message">Ход игрок X</span> <div class="game"> <div class="game-item" data-ceil="1"></div> <div class="game-item" data-ceil="2"></div> <div class="game-item" data-ceil="3"></div> <div class="game-item" data-ceil="4"></div> <div class="game-item" data-ceil="5"></div> <div class="game-item" data-ceil="6"></div> <div class="game-item" data-ceil="7"></div> <div class="game-item" data-ceil="8"></div> <div class="game-item" data-ceil="9"></div> </div> <button id="reset-game">Очистить</button> |
Стилизуем крестики нолики в main.sass.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
.game-title display: block font-size: 2em color: blue font-weight: bold text-align: center .game display: -webkit-box display: -webkit-flex display: -ms-flexbox display: flex -webkit-box-pack: justify -webkit-justify-content: space-between -ms-flex-pack: justify justify-content: space-between -webkit-flex-wrap: wrap -ms-flex-wrap: wrap flex-wrap: wrap width: 152px margin: 0 auto 10px border: 1px solid #b641b0 &-item position: relative width: 50px height: 50px line-height: 48px border: 3px solid #1f62e9 cursor: pointer text-align: center font-size: 30px font-weight: bold -webkit-transition: all linear 0.3s -o-transition: all linear 0.3s transition: all linear 0.3s &:hover background-color: LightSalmon &.o background-color: CornflowerBlue &.x background-color: Orchid #reset-game background-color: #d8bfd8 display: block margin: 0 auto border: 3px solid #b641b0 border-radius: 20px cursor: pointer -webkit-transition: all linear 0.3s -o-transition: all linear 0.3s transition: all linear 0.3s &:hover background-color: #1f62e9 |
Пишем игру на javascript
Объявляем все переменные.
- Переменная ceil ячейка с помощью getElementsByClassName ищем все данные элемента game-item.
- Делаем перезапуск игры переменной reset = document.getElementById (reset-game).
- Выводим сообщение message с идентификатором message.
- Добавляем игрока в переменную player.
- Сделаем счетчик шагов stepCount.
- Добавим массив с выигрышными комбинациями в winCombinations.
- Добавляем два пустых массива dataX и dataO. В эти массивы будут записываться значение ячейки, на которую кликнул игрока.
- Пишем код. Проходим циклом по всем элементам cell (var i = 0; i < ceil.length; i++) и каждому элементу добавляем событие, которое вызывается по клику с названием currentStep ceil[i].addEventListener (click, currentStep). Теперь по клику на ячейку будет вызываться функция currentStep.
- Пишем функцию currentStep (). Сперва объявим переменную num = +this, плюс стоит чтобы преобразовать в число. getAttribute (data-ceil) и получаем значение атрибута. Записали в переменную значение атрибута куда кликнули. У каждой ячейки будет свой номер 1, 2, 3 до 9.
- После клика проверяем есть ли значение в ячейки с помощью условия. Если в данной ячейки нет никакого содержания if (!this.textContent), то мы назначаем игрока this.innerText = player. Чтобы при клике он менялся на другого пишем changePlayer ().
- Пишем функцию changePlayer (). Если текущий игрок X, то становится игрок O. Если не X то становится X. player === X ? (player = O) : (player = X) . Используем условные операторы. Условие игрок равен Х ?, то значение правда : второе значение ложь.
- Увеличим счетчик хода. Изначально равен ноль и с каждым ходом увеличиваем на один. Увеличивать будем с помощью тернарного оператора делаем проверку. Если счетчик ходов равен девяти stepCount === 9, то выводим сообщение ? (message.innerText = Ничья) и если не равен девяти, то выводим чей ход на текущий момент (message.innerText = Ходит игрок + player).
- Добавим функцию очистки поля после игры. Есть переменная reset, для поиска кнопки. Повесим на элемент кнопка событии по клику reset.addEventListener (click, function (). Это событие будет вызывать функцию. Циклом проходим по всем ячейкам и в каждую ячейку делаем пустой ceil[i].innerText = "".
- Очищаем массивы у каждого игрока и выводим сообщение, что будет ходить первый игрок message.innerText = Ходит игрок + player.
- Делаем функцию, которая будет проверять выиграл ли игрок и выводилось сообщение. Функция будет function checkWin (arr, number), в нее передаем массив и число. Массив будет либо dataX или dataO, а число это номер ячейки, на которую кликнули.
- Перед записью функции подготовим массив и число. После того как в ячейку добавилось значение мы с помощью тернарного оператора проверяем, если игрок X, то мы добавляем в массив dataX число num с значением X, если не X, то в dataO. Проверка начнется если в массиве три числа , пишем if (dataO.length > 2 || dataX.length > 2) и добавляем вторую проверку на функцию победы (checkWin (dataO, num) || checkWin (dataX, num). Если в массиве dataO и dataX длина больше двух и при этом checkWin для О и Х возвращает значение true, то будет выполняться.
- Возвращаемся к функции 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 и проходим повторно.
- После того как определили победителя вернемся назад и напишем ceil[i].removeEventListener (click, currentStep), чтобы после победной комбинации нельзя было нажимать на ячейки и возвращаем запись кто победил return (message.innerText = Победил игрок + player).
-
Добавим цвета ячейки после нажатия добавлением нового класса && this.classList.add (x) и && this.classList.add (o), цвета у классов зададим в стилях.
- Чтобы эти классы очищались после нажатия сброс игры добавим ceil[i].classList.remove (x, o).
Код в common.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 |
$(function() { var ceil = document.getElementsByClassName("game-item"), reset = document.getElementById("reset-game"), message = document.getElementById("message"), player = "X", stepCount = 0, winCombinations = [ [1, 2, 3], [1, 4, 7], [1, 5, 9], [2, 5, 8], [3, 6, 9], [3, 5, 7], [4, 5, 6], [7, 8, 9] ], dataX = [], dataO = []; for (var i = 0; i < ceil.length; i++) { ceil[i].addEventListener("click", currentStep); } function currentStep() { var num = +this.getAttribute("data-ceil"); if (!this.textContent) { this.innerText = player; player === "X" ? dataX.push(num) && this.classList.add("x") : dataO.push(num) && this.classList.add("o"); if ( (dataO.length > 2 || dataX.length > 2) && (checkWin(dataO, num) || checkWin(dataX, num)) ) { for (var i = 0; i < ceil.length; i++) { ceil[i].removeEventListener("click", currentStep); } return (message.innerText = "Победил игрок " + player); } changePlayer(); stepCount++; stepCount === 9 ? (message.innerText = "Ничья") : (message.innerText = "Ходит игрок " + player); } } function changePlayer() { player === "X" ? (player = "O") : (player = "X"); } reset.addEventListener("click", function() { for (var i = 0; i < ceil.length; i++) { ceil[i].innerText = ""; } dataO = []; dataX = []; player = "O"; stepCount = 0; message.innerText = "Ходит игрок " + player; for (var i = 0; i < ceil.length; i++) { ceil[i].addEventListener("click", currentStep); ceil[i].classList.remove("x", "o"); } }); function checkWin(arr, number) { for (var w = 0, wLen = winCombinations.length; w < wLen; w++) { var 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++; if (count === 3) { return true; } } } count = 0; } } } }); |