HTML - создаём пустой документ
Создадим в рабочем каталоге (в web-root каталоге) файл index.html:
index.html<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Программируем шахматы</title>
<link rel='stylesheet' href='chess.css' type='text/css' media='all' />
<script type='text/javascript' src='chess.js'></script>
</head>
<body>
<div class="board"></div>
</body>
</html>
Здесь мы в строке 7 подключаем файл стилей chess.css, которого пока нет, но мы его скоро создадим. В строке 8 подключаем javascript-файл chess.js, которого тоже пока нет, и в котором будет весь функционал на стороне браузера.
Основной контент - пустой блок div с классом board (строка 11).
JavaScript - создаём доску
В рабочем каталоге, рядом с index.html, cоздаём файл chess.js с таким содержимым:
chess.jswindow.onload = function () {
initGame();
}
function initGame() {
createBoard();
}
function createBoard() {
const BoardSize = 8;
board = document.querySelector('.board');
board.innerHTML = '';
for (let i = 0; i < BoardSize**2; i += 1) {
const cell = document.createElement('div');
let is_white = (parseInt(i / BoardSize) + (i % BoardSize)) % 2 == 0;
cell.classList.add('cell', (is_white ? 'white' : 'black'));
board.appendChild(cell);
}
}
Когда загрузилась страница, мы инициализируем игру - вызываем функцию initGame. Эта функция пока только создаёт доску - вызывается функция createBoard.
Функция createBoard
В константе boardSize указываем размер доски, равный 8. Т.е. мы будем создавать квадратную доску 8*8 клеток.
В строке 11 мы ищем в html-документе первый элемент с классом board. Нашли, и сохранили его в переменную board. Именно здесь и будет наша шахматная доска. В следующей строке (12) мы очищаем содержимое элемента с нашей доской - подготавливаем место, чтобы ничего не мешало. Прямо сейчас, вначале, там и так пусто, но функция создания доски наверное будет вызываться и в случаях, когда там что-то уже есть.
Поля доски сделаем блоками div, идущими подряд, друг за другом, все 64 штуки. А потом уже с помощью css раскрасим их, и расположим в виде шахматной доски.
В строке 13 делаем цикл, тело которого выполнится 64 раза. В строке 14 создаём элемент div. В строке 16 добавляем этому элементу два класса, один - "cell", другой - "black" или "white" (в зависимости от значения переменной is_white). И наконец в строке 17 добавляем наш элемент к доске.
В строке 15 в переменную is_white надо записать логическое "да" (true), если хотим чтобы поле с номером i было "белым", и false - если нужно "чёрное" поле. А как это определить? Давайте нарисуем что мы хотим получить:
Числа на полях соответствуют значениям переменной цикла i. Видно, что простое чередование цветов "белое, чёрное, белое,чёрное" не годится. После чёрного поля с номером 7, должно идти опять чёрное поле с номером 8. А после белого поля №15 - поле №16 опять белого цвета.
Один способ решения: можно чередовать цвета (is_white = !is_white), а при смене ряда (когда i нацело делится на 8) - ещё раз менять цвет. Правда, если мы захотим нарисовать доску размером например 9*9, то этот способ не сработает.
Другой способ решения - сделать вложенный цикл. Внешний будет рисовать строки, внутренний - отдельные поля в строке. Вот так:
function createBoard() {
const BoardSize = 8;
board = document.querySelector('.board');
board.innerHTML = '';
let row_start_cell_is_white = true;
for (row = 0; row < BoardSize; row++) {
let is_white = row_start_cell_is_white;
for (col = 0; col < BoardSize; col++) {
const cell = document.createElement('div');
cell.classList.add('cell', (is_white ? 'white' : 'black'));
board.appendChild(cell);
is_white = !is_white;
}
row_start_cell_is_white = !row_start_cell_is_white;
}
}Третий способ (у нас он и реализован) - можно определить цвет поля по сумме номера столбца и номера ряда. Например поле с номером 7 расположено в ряде №0, столбец №7. Сумма 0+7 = 7 - нечётное число, поле чёрное. Поле номер 8: ряд №1, столбец №0. 1+0 = 1- нечётное число, поле чёрное. Ещё пример, поле №41 - ряд №5, стоблец №1. 5+1 = 6 - чётное число, поле белое.
Нужное нам условие можно записать так:
is_white = (номер_строки + номер_столбца) является чётным числом
Что значит "является чётным числом"? Значит остаток от деления на 2 равен нулю. Теперь условие можно записать так:
is_white = (номер_строки + номер_столбца) % 2 == 0
Остаётся определить номера строки и столбца. И тут тоже всё просто. Номер столбца равен остатку от деления номера поля на 8:
i % BoardSize
А номер строки - целая часть от деления номера поля на 8:
parseInt(i / BoardSize)
В итоге у нас получилось (см. файл chess.js, строка 15):
let is_white = (parseInt(i / BoardSize) + (i % BoardSize)) % 2 == 0;CSS - оформляем вид доски
Итак, у нас теперь в документе доска представлена идущими подряд полями - div-ами. В инспекторе объектов браузера это выглядит так:
Осталось добавить визуальное оформление. Создаём файлик chess.css в той-же директории, что и index.html:
chess.css.board {
width: 480px;
display: flex;
flex-wrap: wrap;
}
.cell {
width: 60px;
height: 60px;
}
.white {
background-color: #edb;
}
.black {
background-color: #b86;
}
В строках 7, 8 задаём ширину и высоту одного поля доски. В строках 3, 4 заставляем поля идти друг за другом по горизонтали и переноситься по рядам.
Наглядное введение в CSS Flex: Как работает CSS Flexbox
В строке 2 указываем ширину всей доски. Ширину одного поля умножаем на 8, получаем 60px * 8 = 480px
Ну и в классах white и black указываем цвета для "белых" и "чёрных" полей доски.
Итоги
Пока всё просто. С помощью javascript - кода мы создали пустую шахматную доску. Что получилось можно посмотреть на демо - странице