Для реализации этих туповатеньких шахмат нам потребуется HTML, CSS и JS.
1. Начнём с разметки. Нам потребуется несколько контейнеров и элементов для 8 строк и 8 столбцов таблицы с шахматными клетками:
```html
<div class="container">
<div class="row row-1">
<span class="box"></span>
<span class="box box-color-2"></span>
<span class="box"></span>
<span class="box box-color-2"></span>
<span class="box"></span>
<span class="box box-color-2"></span>
<span class="box"></span>
<span class="box box-color-2"></span>
</div>
...
</div>
```
2.Далее нам потребуется несколько правил CSS для открытия и закрытия шахматных клеток. Подсказка: Вначале мы используем свойство background-color для задания цвета клетки. Во-вторых, используем селектор "nth-child" для настройки цвета соседних клеток.
```css
.box {
width: 20px;
height: 20px;
background-color: #fff;
border: 1px solid #000;
}
.box-color-2 {
background-color: #000;
}
.row span:nth-child(2n+1) {
background: #fff;
}
.row-1 span:nth-child(2n+2) {
background: #000;
}
.row-2 span:nth-child(2n+1) {
background: #000;
}
.row-3 span:nth-child(2n+2) {
background: #fff;
}
/* И так далее... */
```
3.Наконец, для добавления логики туповатеньких шахмат мы можем использовать JavaScript. Нам потребуется цикл для перемещения фигур. Простой if-else блок предназначен для изменения цвета в зависимости от позиции.
```javascript
// Цикл для движения фигурами
let pos = 0;
while (pos < 8) {
// Выбор в зависимости от положения
if (pos % 2 === 0) {
// Двигайтесь вперёд по чёрной клетке
$('.box').eq(pos).addClass('box-color-2')
} else {
// Двигайтесь вперёд по белой клетке
$('.box').eq(pos).removeClass('box-color-2')
}
// Увеличение позиции
pos += 1
}
```