{"draftJsState":{"blocks":[{"data":{"image":{"id":"67419b71b9a44d0f05cff443"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"f2t44"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Статья: Как создать адаптивную игру \"Крестики-Нолики\" с настраиваемым количеством ячеек для победы","type":"header-three","key":"2c84l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В данной статье мы рассмотрим, как создать веб-игру \"Крестики-Нолики\" с возможностью настройки размера поля и количества подряд идущих ячеек, которые необходимы для победы. Мы также добавим базовую стратегию для игры против компьютера, который может \"обучаться\" на предыдущих играх и делать более разумные ходы.","type":"unstyled","key":"eluhr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Основные особенности игры:","type":"header-three","key":"58qcs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":22,"offset":0,"style":"BOLD"}],"text":"Изменяемый размер поля: Пользователь может выбрать размер игрового поля от 3x3 до 100x100 клеток.","type":"ordered-list-item","key":"3p2gp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":39,"offset":0,"style":"BOLD"}],"text":"Настроечное количество ячеек для победы: Игрок может установить количество подряд идущих клеток, которое приведет к победе, в пределах от 3 до 100.","type":"ordered-list-item","key":"dekq3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":22,"offset":0,"style":"BOLD"}],"text":"Игра против компьютера: Вторым игроком в игре является компьютер или игрок \"0\", который использует простую стратегию выбора ходов, улучшая их по мере игры.","type":"ordered-list-item","key":"8uids"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"1. Структура проекта","type":"header-three","key":"8ot73"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Проект состоит из HTML, CSS и JavaScript. HTML отвечает за структуру игры, CSS - за стиль и внешний вид, а JavaScript - за логику игры и взаимодействие с пользователем.","type":"unstyled","key":"77vkm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"HTML","type":"header-three","key":"cm5k4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"HTML создает основу игры, включая элементы управления для настройки размера поля и длины победной линии, а также место для отображения самого игрового поля. Важно отметить, что в HTML есть два элемента ввода:","type":"unstyled","key":"31t7b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":0,"style":"BOLD"}],"text":"Размер поля: Определяет количество строк и столбцов.","type":"unordered-list-item","key":"1r065"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":20,"offset":0,"style":"BOLD"}],"text":"Длина победной линии: Позволяет пользователю задать количество подряд идущих ячеек, необходимых для победы.","type":"unordered-list-item","key":"3kbma"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Board Size:\n\nWin Length:\n\n","type":"unstyled","key":"6bobe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"CSS","type":"header-three","key":"fef1j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"CSS отвечает за внешний вид игры, создавая сетку для игрового поля, стилизуя клетки и кнопки управления. Для каждой клетки игры мы создаем стиль, который делает её доступной для взаимодействия, и обновляем вид клеток в зависимости от состояния игры.","type":"unstyled","key":"7sipp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".board {\n display: grid;\n margin: 20px auto;\n gap: 0; \n grid-template-columns: repeat(${boardSize}, 50px);\n grid-template-rows: repeat(${boardSize}, 50px);\n justify-items: center;\n align-items: center;\n}\n\n.cell {\n width: 50px;\n height: 50px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 24px;\n font-weight: bold;\n background-color: #f9f9f9;\n border: 1px solid #000;\n cursor: pointer;\n box-sizing: border-box;\n}","type":"unstyled","key":"30t1n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"JavaScript","type":"header-three","key":"f3lcl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"JavaScript реализует всю логику игры. Он обрабатывает ход игрока и компьютера, отслеживает историю ходов, а также проверяет условия победы.","type":"unstyled","key":"5isd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"1. Инициализация игры","type":"header-three","key":"90dtu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"При запуске игры создаются основные элементы: игровое поле и кнопки управления. Размер поля и количество ячеек для победы устанавливаются через интерфейс.","type":"unstyled","key":"4t6qr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"function startGame() {\n boardSize = parseInt(document.getElementById('size').value);\n winLength = parseInt(document.getElementById('winLength').value);\n board = Array(boardSize).fill().map(() => Array(boardSize).fill(\"\"));\n currentPlayer = \"X\";\n movesHistory = [];\n winningMoves = [];\n renderBoard();\n}","type":"unstyled","key":"1s3ah"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"2. Отображение игрового поля","type":"header-three","key":"drn5f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для отображения поля используется HTML-сетка. Каждая клетка представляет собой div элемент, который можно кликнуть для выполнения хода. Мы обновляем поле после каждого хода.","type":"unstyled","key":"7ek6d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"function renderBoard() {\n const gameContainer = document.getElementById('game');\n gameContainer.innerHTML = '';\n const grid = document.createElement('div');\n grid.className = 'board';\n grid.style.gridTemplateColumns = `repeat(${boardSize}, 50px)`; \n grid.style.gridTemplateRows = `repeat(${boardSize}, 50px)`; \n\n for (let i = 0; i < boardSize; i++) {\n for (let j = 0; j < boardSize; j++) {\n const cell = document.createElement('div');\n cell.className = 'cell';\n cell.dataset.row = i;\n cell.dataset.col = j;\n cell.textContent = board[i][j];\n cell.onclick = () => playerMove(i, j);\n grid.appendChild(cell);\n }\n }\n\n gameContainer.appendChild(grid);\n}","type":"unstyled","key":"44g1r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"3. Логика ходов","type":"header-three","key":"frt9t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Игрок и компьютер поочередно делают ходы. Когда игрок кликает на клетку, проверяется, не занята ли она, и затем ход записывается в игровое поле. После этого ход делает компьютер. Чтобы игра была интересной, компьютер использует простую стратегию выбора ходов и улучшает её по мере игры.","type":"unstyled","key":"a05sa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"function playerMove(row, col) {\n if (board[row][col] !== \"\") return;\n\n board[row][col] = currentPlayer;\n movesHistory.push({ player: currentPlayer, row, col });\n\n if (checkWinner(currentPlayer)) {\n alert(`${currentPlayer} wins!`);\n startGame();\n return;\n }\n\n currentPlayer = \"O\";\n renderBoard();\n setTimeout(computerMove, 500);\n}","type":"unstyled","key":"ah9ln"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"4. Проверка победы","type":"header-three","key":"cis9r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для проверки победы используется функция checkWinner, которая анализирует строки, столбцы и диагонали на наличие необходимого количества подряд идущих ячеек. Значение winLength позволяет настроить длину победной линии.","type":"unstyled","key":"coe4r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"function checkWinner(player) {\n // Проверка строк, столбцов и диагоналей на наличие победной линии\n for (let i = 0; i < boardSize; i++) {\n for (let j = 0; j <= boardSize - winLength; j++) {\n if (board[i].slice(j, j + winLength).every(cell => cell === player)) {\n return true;\n }\n }\n }\n\n for (let j = 0; j < boardSize; j++) {\n for (let i = 0; i <= boardSize - winLength; i++) {\n if (board.slice(i, i + winLength).every(row => row[j] === player)) {\n return true;\n }\n }\n }\n\n for (let i = 0; i <= boardSize - winLength; i++) {\n for (let j = 0; j <= boardSize - winLength; j++) {\n if (Array.from({ length: winLength }, (_, k) => board[i + k][j + k]).every(cell => cell === player)) {\n return true;\n }\n if (Array.from({ length: winLength }, (_, k) => board[i + k][j + winLength - 1 - k]).every(cell => cell === player)) {\n return true;\n }\n }\n }\n\n return false;\n}","type":"unstyled","key":"81iu7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"5. Заключение","type":"header-three","key":"4bbq2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В результате, мы получаем гибкую и увлекательную игру \"Крестики-Нолики\", где пользователь может изменять размер поля и количество подряд идущих ячеек, необходимых для победы. Компьютер также имеет возможность обучаться, улучшая свою стратегию по мере игры.","type":"unstyled","key":"c4fts"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Это простая, но мощная основа для создания более сложных игр с улучшенными алгоритмами и возможностями настройки.","type":"unstyled","key":"fi46g"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":72,"offset":30}],"inlineStyleRanges":[],"text":"Сама игра доступна по ссылке: https://sergsergius.ru/tic-tac-toe-%d0%be%d0%bd%d0%bb%d0%b0%d0%b9%d0%bd/","type":"unstyled","key":"bgmce"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"W7PcNAk8YiT0xWJWSuiY"}],"entityMap":{"0":{"data":{"url":"https://sergsergius.ru/tic-tac-toe-%d0%be%d0%bd%d0%bb%d0%b0%d0%b9%d0%bd/"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}