Тральщик
Сапер... да, та старая классическая игра, в которую вы когда-то играли на старой доброй Windows '95 (на самом деле она была реализована в обновлениях программного обеспечения Microsoft до Windows 8). Minesweeper берет свое начало в самых ранних играх для мэйнфреймов 1960-х и 1970-х годов. Самым ранним предком Сапера был Куб Джеримака Рэтлиффа. Базовый стиль игрового процесса стал популярным сегментом жанра головоломок в 1980-х годах.
Освежите в памяти свою историю Сапера здесь.
Знаете ли вы, что такое настоящий Сапер? Я тоже не знал, пока не прочитал это.
Я помню, как мой первый опыт работы с компьютерами в 90-х годах заключался в том, что я много играл в эту игру, поэтому я подумал, какая игра может быть лучше, чем эта, чтобы пройти полный круг?
Моя версия
Начиная
Играйте в игру здесь!
Базовый игровой процесс
- Выберите уровень сложности.
- Легко = 9х9, 10 мин
- Средний = 16х16, 40 мин
- Хард = 30х30, 160 мин
- Нажмите в любом месте доски, чтобы начать и запустить таймер. *Цифры показывают, сколько мин примыкает к той или иной ячейке.
- Используйте «Shift + Click» , чтобы добавить пометку к ячейке, если вы считаете, что это моя.
Победа/Проигрыш
- Если ты подорвался на мине... игра окончена, приятель.
- Выиграйте, открыв все клетки без мин!
(понял... МОЯ... ПОДМЕТАЛЬНАЯ ОЧИСТКА...?)
Используемые технологии
Старые добрые Три Амиго:
HTML
Как видно из исходного кода, HTML очень лаконичен, поскольку большая часть действий происходит в JavaScript. Не говоря уже о том, что сама игровая доска представляет собой простой стол.
CSS
Мне было очень весело стилизовать это под старый вид рабочего стола Windows '95. Я все еще хочу немного с ним повозиться, чтобы сделать его идеальным (не удалось найти точный шрифт, используемый MS).
Моей самой большой проблемой при работе с CSS было определение стилей таблиц (границы, размеры td и т. д.).
JavaScript
Поскольку я впервые писал работающее веб-приложение с использованием JavaScript, неудивительно, что этот раздел оказался для меня самой большой проблемой в проекте.
Вот пара основных моментов:
- Динамическое изменение размера таблицы при выборе уровня сложности.
- Я создал функцию (конечно, с помощью Джима), которая анализирует число из идентификатора в таблице и преобразует его в переменную ${size}, которая в основном добавляет строки/столбцы на основе полученного числа. Эта концепция поразила меня.
- В свою очередь, динамически создаём массив массивов, соответствующий визуальной таблице.
- Создание класса «Ячейка», который я использовал для создания отдельных «объектов ячеек», которым я присвоил массу свойств: row#, col#, бомба t/f, количество соседних бомб (еще одна проблема сама по себе, кстати) , выявили t/f и пометили t/f.
- Такой подход значительно облегчил написание более лаконичного кода и отсутствие повторения снова и снова, а также создание методов класса, которые будут выполняться для каждого объекта ячейки.
- Создание функционального таймера, отображающего прошедшие секунды.
- Рандомизированное размещение бомб на массиве.
- Рендеринг всего в DOM.
- Назначение обработчиков кликов различным событиям.
- Создание логики выигрыша/проигрыша
- Выяснение потока управления тем, как все функции синхронно связаны друг с другом.
- Изучение рекурсии и того, как правильно написать функцию, создающую такой эффект.
Мой выбор дизайна
Я решил использовать внешний вид OG Windows '95. Я твердо верю в принцип «Имитировать. Ассимилировать. Вводить новшества». модель обучения, поэтому для моего первого проекта мне нужно было пройтись, прежде чем я смогу бежать, и начать с фазы имитации процесса обучения.
Я очень рад, что выбрал этот путь, потому что я МНОГОму научился, просто пытаясь соответствовать стилям оригинальной игры.
С учетом вышесказанного, я определенно собираюсь создать модернизированную версию этого когда-нибудь в ближайшее время.
Следующие шаги!
Этот проект действительно доставил мне массу удовольствия. Я планирую продолжать совершенствовать его и возвращаться к многочисленным урокам, извлеченным на долгие годы вперед.
- Как я упоминал ранее, мне бы хотелось создать «переключатель отображения», который превращает CSS в модернизированный, чистый, плоский и минималистичный пользовательский интерфейс.
- Есть некоторые глупые маленькие эстетические ошибки, которые заставляют меня рвать на себе волосы, например, то, как ширина/высота ячейки изменяется на несколько пикселей, когда доска полностью раскрыта. Мне нужно это исправить.
- Мне также хотелось бы детализировать Windows '95, заставить кнопку «Пуск» что-то делать, добавить часы в правом нижнем углу и несколько функциональных значков на рабочем столе.
- Очень сложная функция, которую я хотел бы реализовать, — это создать функцию, в которой пользователь мог бы выбирать сложность, вводя числа (номера строк/столбцов/шахт).
Это будет на черный день.
Спасибо за чтение! Надеюсь, вам понравится игра :)
