Форум OlegON > Ресурсы OlegON > Вопросы сервера

Простейшие шахматы на CSS/JS : Вопросы сервера

17.06.2024 11:09


11.02.2023 21:19
OlegON
 
Туповатенькие шахматы, больше для того, чтобы послужить заготовкой для чего-то более серьезного.
Ну и, если уже просто заскучали где-то, а канал в инет маленький, то можно и в них поиграть. Главное, не объявить мат в три-четыре хода, поскольку фигуры оно не развивает совсем.
https://olegon.ru/pr/chess/
11.02.2023 21:24
Капитан О.
 
Для реализации этих туповатеньких шахмат нам потребуется 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
}
```
Часовой пояс GMT +3, время: 11:09.

Форум на базе vBulletin®
Copyright © Jelsoft Enterprises Ltd.
В случае заимствования информации гипертекстовая индексируемая ссылка на Форум обязательна.