Два задания, связанные с созданием шахматной доски с помощью HTML, CSS и JavaScript

Условие:

Код

Решение:

Предмет: Программирование (Веб-разработка). Раздел: Работа с DOM (Document Object Model) в JavaScript. Тебе необходимо выполнить два задания, связанные с созданием шахматной доски с помощью HTML, CSS и JavaScript. Задания направлены на приобретение навыков работы с DOM, который используется для работы с элементами HTML. ### Задание №1: Создание шахматной доски Для начала нужно создать шахматную доску на веб-странице. Это можно сделать с использованием HTML, CSS и JavaScript для динамической генерации доски путем обращения к DOM. #### Шаги для выполнения: 1. **Создадим HTML-файл:** ```html Шахматная доска

``` 2. **JavaScript для динамического создания доски** (файл `script.js`): ```javascript const board = document.getElementById("chessBoard"); // Генерация шахматной доски for (let row = 0; row < 8; row++) { for (let col = 0; col < 8; col++) { const cell = document.createElement("div"); cell.classList.add("cell"); // Чередуем чёрные и белые клетки if ((row + col) % 2 === 0) { cell.classList.add("white"); } else { cell.classList.add("black"); } board.appendChild(cell); } } ``` ✅ После выполнения этих шагов у тебя будет появляться шахматная доска размером 8x8 в браузере. --- ### Задание №2: Расстановка шахматных фигур с использованием массивов и методов DOM Теперь нужно расставить шахматные фигуры на доске. Допускается использование символов шахматных фигур, например, из [этого источника](https://www.alt-codes.net/chess-symbols.php). #### Шаги для выполнения: 1. **Добавим символы фигур в массивы:** ```javascript const figures = { white: ['♖', '♘', '♗', '♕', '♔', '♗', '♘', '♖'], black: ['♜', '♞', '♝', '♛', '♚', '♝', '♞', '♜'], whitePawns: Array(8).fill('♙'), // белые пешки blackPawns: Array(8).fill('♟') // черные пешки }; const boardCells = document.querySelectorAll('.cell'); // Расставляем белые фигуры for (let i = 0; i < 8; i++) { boardCells[i].textContent = figures.black[i]; // чёрные основные фигуры boardCells[i + 8].textContent = figures.blackPawns[i]; // чёрные пешки boardCells[i + 48].textContent = figures.whitePawns[i]; // белые пешки boardCells[i + 56].textContent = figures.white[i]; // белые основные фигуры } ``` ✅ Теперь у тебя есть шахматная доска с расставленными на ней фигурами. --- ### Объяснение процесса: 1. **Создание сетки доски:** - `grid-template-columns: repeat(8, 50px);` и `grid-template-rows: repeat(8, 50px);` создают сетку доски размером 8x8 клеток, где каждая клетка имеет размер 50x50 пикселей. 2. **Изменение цвета ячеек:** - Используя цикл и проверку `(row + col) % 2 === 0`, ты задаёшь чередование чёрных и белых клеток, что важно для создания шахматной раскраски. 3. **Использование массивов для фигур:** - Массивы `figures.white` и `figures.black` хранят соответствующие наборы фигур для белой и чёрной стороны. - Массивы с пешками хранятся отдельно и добавляются на строки 2 и 7. 4. **Подстановка символов:** - Через методы DOM (например, `textContent`) в ячейки добавляются фигуры. ### Итог Ты должен получить шахматную доску с правильно расставленными фигурами на веб-странице.