На момент 14 ноября появились первые улучшения: наконец-то кроссворды обзавелись списком вопросов, ответы на них стало возможным подсмотреть рядом с ними, а клетки стали квадратными и более аккуратными.

16 ноября на сетке кроссворда наконец-то появились номера вопросов (в упомянутых ранее массивах они ставились при помощи символов «>» и «^» для горизонтальных и вертикальных слов соответственно, а сам номер рассчитывался автоматически), то есть стало возможно быстро и легко находить их, а также я добавил выпадающий список кроссвордов, потому что даже в изначальном примитивном формате их хранения прямиком в коде страницы я сделал некоторое количество кроссвордов по переведённым для занятий текстам и между ними надо было как-то переключаться.

19 ноября программу ждали некоторые внешние улучшения (например, меню кроссвордов стало занимать всю ширину, чтобы их названия полнее отображались на телефоне) и возможность показать сразу все ответы прямо на сетке. Удобно это не только для повторения пройденного: поскольку первое время сетку я заполнял вручную очень кустарными методами, приходилось часто перепроверять, что же получается на практике, и отображение всех ответов сильно в этом помогало. Хотя ощущение неудобства, конечно, постепенно росло, особенно после составления одного кроссворда вместе со студентами на занятии.

12 декабря я наконец-то приступил к созданию конструктора кроссвордов, дабы навсегда оставить расстановку всего и вся в массиве строк в прошлом. И вот первая версия конструктора уже позволила добавлять слова и редактировать их описание и положение на сетке.

13 декабря я таки додумался до прикрепления конструктора в верхней части экрана, чтобы составлять большие кроссворды было удобнее. С этой же целью конструктору была добавлена полупрозрачность, когда он не в фокусе.

По состоянию на 20 декабря конструктор стал ещё чуточку лучше: я добавил в него галочки для понимания, какие из загаданных слов уже находятся на сетке, а также кнопки перемещения слова или слов и кнопку сохранения результата.

25 декабря в кроссвордах появились непрерывный ввод слов при нажатии на его номер, что значительно упростило отгадывание, и переключение между номерами при нажатии на Tab. То бишь решать кроссворд стало можно и без отрыва от клавиатуры.

29 декабря конструктор претерпел ещё ряд изменений: поле ввода всех слов и их меню теперь стало возможно сужать и расширять, а набор кнопочек пополнился добавлением слова на сетку, его поворотом и удалением с сетки.

31 декабря я прикрутил изменение размера вообще ко всему кроссворду, благодаря чему составление новых кроссвордов слегка упростилось за счёт большего обзора.

16 января 2024 года я начал работу над настройкой цветов программы, чтобы дать пользователю самому выбирать их сообразно своим предпочтениям и настроению.

На момент 25 января поддержка цветовых схем была наконец готова: с этого дня стало возможным настраивать все четыре цвета программы, сохранять получившиеся цветовые схемы и загружать их. А при перезагрузке страницы они успешно загружались сами из local storage.

2 марта пользоваться конструктором стало ещё удобнее, благо слова теперь можно было перемещать по сетке обычным «мышиным» перетаскиванием, а поворачивать — щелчком по их номеру.

16 апреля настройки кроссвордов пополнились изменением шрифта и степени скругления ячеек. Вся это радость, конечно, тоже умеет сохраняться внутри файла, дабы не надо было всё настраивать заново при каждому запуске.

И несколько месяцев я был в целом доволен результатом. Но в ноябре 2024 произошло то, чего я сам от себя не ожидал: несмотря на большие усилия, приложенные к кроссвордам, я решил переписать их с нуля (хотя отдельные части переписывал и до этого). Недовольство недочётами собственного кода оказалось сильнее нежелания переделывать почти всё, но это того стоило, ведь я наконец-то сумел применить некоторые новые знания и просто сделать код гораздо аккуратнее, что явно никогда не будет лишним.

Что решение было верным, я особенно убедился 27 ноября, когда довёл до ума новый редактор кроссвордов: он избавился от двух громоздких окошек и стал сводиться к двум небольшим панелям снизу и сверху — для ввода слова и его описания и для перемещения всех слов разом, — а все основные действия теперь выполняются прямо на сетке, что на фоне прежнего конструктора стало ощутимым прорывом.

А 13 декабря для пущей красоты я добавил небольшой визуальный эффект: теперь при старте игры все клетки кроссворда подсвечиваются по диагонали начиная с верхнего левого края.

Напоследок покажу процесс от создания простейшего кроссворда до его разгадывания.

Вот такое у гуманитария выдалось приключение. Я прекрасно понимаю, что претендовать на образцовое качество вряд ли могу, что программ с кроссвордами не хуже моей пруд пруди и что опытного человека не удивишь чем-то, что он напишет максимум за день, но для меня это личное достижение и приятная возможность сделать что-то своё, что при этом будет неплохо служить моим преподавательским целям и радовать студентов.

Желающие опробовать показанное мной самостоятельно могут найти мои творения на GitHub (старые кроссворды на данный момент лежат в папке Crosswords, а новые — в New Crosswords, позже я переименую их соответственно в Old Crosswords и Crosswords, чтобы подчеркнуть переход к обновлённому варианту).

Успехов всем в преподавании и программировании и спасибо за внимание!

<script src="script.js"></script>

</body>

</html>

```

### CSS

В CSS файле мы зададим размеры нашего canvas и добавим некоторые базовые стили для оформления:

```css

body {

display: flex;

flex-direction: column;

align-items: center;

font-family: Arial, sans-serif;

}

canvas {

border: 1px solid black;

margin-top: 20px;

cursor: pointer;

}

h1 {

margin-bottom: 0;

}

```

### JavaScript

JavaScript будет использоваться для управления логикой игры. Основная идея — это создать сетку, на которой пользователь сможет "строить" здания путем кликов:

```javascript

const canvas = document.getElementById('cityCanvas');

const ctx = canvas.getContext('2d');

const gridSize = 10;

const cellSize = 40; // Размер клетки на сетке

canvas.width = gridSize * cellSize;

canvas.height = gridSize * cellSize;

const cityGrid = new Array(gridSize).fill(0).map(() => new Array(gridSize).fill(0));

// Функция для отрисовки сетки

function drawGrid() {

ctx.clearRect(0, 0, canvas.width, canvas.height);

for (let x = 0; x < gridSize; x++) {

for (let y = 0; y < gridSize; y++) {

ctx.strokeStyle = 'gray';

ctx.strokeRect(x * cellSize, y * cellSize, cellSize, cellSize);

if (cityGrid[x][y] === 1) { // Если построено здание

ctx.fillStyle = 'blue';

ctx.fillRect(x * cellSize, y * cellSize, cellSize, cellSize);

}

}

}

}

// Обработка клика

canvas.addEventListener('click', (event) => {

const rect = canvas.getBoundingClientRect();

const x = Math.floor((event.clientX - rect.left) / cellSize);

const y = Math.floor((event.clientY - rect.top) / cellSize);

cityGrid[x][y] = cityGrid[x][y] === 0 ? 1 : 0;

drawGrid();

});

// Начальная отрисовка сетки

drawGrid();

```

### Описание

1. **HTML**: Создает базовый каркас страницы с canvas, где будет происходить рисование.

2. **CSS**: Определяет стили для страницы и canvas, добавляя границу и стили для текста.

3. **JavaScript**: Определяет сетку города, состоящую из массивов. Пользователь может кликать на клетку сетки, чтобы "строить" (или "сносить") здания, используя двумерный массив для отслеживания состояния каждой клетки.

Этот базовый проект можно улучшать и расширять, добавляя больше функций, таких как разные типы зданий, экономика, ресурсы, и так далее.

Сразу оговорюсь, игра - говно. Скучная, занудная, но если вам нравится медитативно тыкать в экран мышкой (или пальцем, уж не знаю, на чём вы играете), будет самое оно.

Правила такие: Основная цель - захватить все клетки поля. Противники будут пытаться вам активно в этом помешать.

1- Чтобы сделать ход, выбирайте любую свою клетку, на которой находится 2 и более кубиков.

2- Доступные для атаки клетки противников будут подсвечены.

3- Выберите направление атаки, атака начнется немедленно. Для расчета победы будут брошены игральные кости в соответствии с количеством кубиков, стоящих на атакующей и защищающейся клетке. У кого выпало больше, тот победил в этом ходу. На атакующей клетке остается оборонительный гарнизон из одного кубика, а все остальные кубики перемещаются на вновь захваченную клетку. Ходить можно до тех пор, пока у вас есть клетки с двумя и более кубиков.

На уровнях повыше добавил немного магии, можно херануть молнией и снести одну из клеток с доски. Как по мне - это самая весёлая часть геймплея )))

Жду тапков и предложений по доработке геймплея, кидайте не стесняйтесь.

Ссылочка на игру - вот (качать не надо, работает в браузере)

https://yandex.ru/games/app/178890

Хочу теперь сделать пару аркад, или старую добрую метроидванию. Если вдруг соберусь -запилю отдельным постом.

2. Создание персонажа (Я пока не до конца решил будут ли классы или расы или что то ещё, но какие то уникальные карты и особенности точно добавлю.

3. Карта, по которой можно будет перемещаться. Генерируется рандомно, пока это цветные клетки, в будущем это будут места интересностей (мельница, пещера, заброшенный дом, болото и т.д). Есть 10 ходов до наступления ночи и что то произойдёт))

4. Боёвка

Ваша экипировка дарует вам карты, эти карты можно использовать в боёвке. У персонажа есть Сила Ловкость Выносливость Дух Интеллект и Харизма. Каждая карта требует своё количество очков какого либо атрибута. Монстры так же имеют свои карты и логику поведения. Карты они играют сразу, но вот какие зависит от того что вы играли ранее, или сколько у вас хитов и так далее. В будущем будут карты силы (А ля воин) , для магов (Интеллект) , для Шаманов (Дух) и прочее прочее))

На этом всё! Спасибо если дочитали до конца.
Всем продуктивных будней ;)
С вами был , Djunney