Как сделать сапера на с
Обновлено: 02.07.2024
Вообще говоря любая игра обязана начинаться с тетрадки. Описывая игру в тетрадке вы понимаете чего вы хотите добиться от игры и набрасываете план действий. Все мастодонты инди-игр советуют начинать именно с этого шага и я бы не стал им пренебрегать.
С другой стороны когда мы делаем клон игры (особенно такой простой как сапёр), можно смело пропускать "этап тетрадки" и сразу начать придумывать внешний вид. Ведь это гораздо интересней
Как я и обещал, я постараюсь описывать создание игры в мельчайших подробностях. Поэтому первым делом расчехляйте свои фотошопы или гимпы. Предупреждаю сразу, что я пользуюсь фотошопом версии CC 2014, так что у кого гимп тем придётся разбираться самим как там всё устроено.
Шаг 1.
Открываем фотошоп и создаём новый файл, единицы измерения пиксели, размер 640х1136:
Почему такой размер? Потому что я решил делать мобильную игру. На своём опыте я выяснил, что самое "безопасное" разрешение для большинства смартфонов - это разрешение iPhone 5. Теперь откройте браузер Google Chrome и откройте средства разработчика ( F12 если вы на Windows). Внизу вы увидите иконку смартфона с подсказкой Toggle device mode, после того кк вы кликните на неё экран уменьшится до размеров устройства, которое можно выбрать в выпадающем меню сверху, вам нужно найти в этом меню опцию Apple iPhone 5:
Но ведь там 320х568? Да, но рядом вы можете заметить цифру 2, которая означает плотность пикселей выбранного устройтсва. Если бы мы сделали макет размером 320х568, то на телефоне все картинки выглядели бы размытыми. Чтобы добиться чёткости на необходимо создать макет в два раза больше по размерам: 640 (320 * 2) на 1136 (568 * 2).
Шаг 2.
Я верстальщик, поэтому я всей душой ненавижу абсолютно всех дизайнеров с которыми мне доводилось работать. Всё из-за того, что ни один из тех с кем мне довелось работать за свою десятилетнюю карьеру понятия не имел о сетках (а тем более о модульных сетках). Давайте не будем уподобляться плохим дизайнерам и сделаем всё красиво.
Если вы хотите подробней узнать о том, что такое сетки (grids), то посмотрите эту презентацию. Я начинал своё знакомство с сетками именно с неё.
Как выясняется, многие не знают, что такое модульные сетки (modular grids), и путают их с обычными сетками. Это разные вещи. Совсем недавно я нашел великолепную статью о модульных сетках. Так же могу порекомендовать вам замечательный конструктор модульных сеток.
Сразу хочу сказать, что модульные сетки лучше всего подходят для мобильных сайтов и приложений. Мы с вами не будем углубляться в дебри проектирования интерфейсов, однако мы почерпнём одну очень важную для нашего проекта деталь из гайдлайнов самого гугла. А именно минимальный размер модуля - 8 пикселей. Оказывается, что разрешение которое мы выбрали (640х1136) идеально делится на 8 (что по ширине, что по высоте). Поэтому откройте в фотошопе ваш файл и зайдите в настройки сетки: в верхнем меню выберите Edit > Preferences > Guides, Grids & Slices.
Затем, в меню сверху выберите View > Show > Grid (или нажмите CTRL+' если у вас Windows), теперь ваш документ будет выглядеть так:
Теперь вам надо найти центр вашего макета. Наврядли кто-то из сдесь присутсвующих макеты делает, но если что, то я рекомендую это делать всегда. Для этого вам надо убедиться что у вас включено отображение линеек (rulers, это те которые сверху и справа у окна макета). Выберите в меню сверху View > Rulers (или просто нажмите CTRL+R если вы на Windows). Убедитесь, что единицы измерения у вас выставлены как пиксели (по умолчанию там сантиметры вроде), для этого кликните правой кнопкой мышки по любой линейке и выберите в выпадающем меню пиксели. Затем убедитесь, что у вас включена привязка (snap), для этого в вехнем меню выберите View > Snap To > Document Bounds . После всех настроек можете смело начинать находить центр макета. Для этого кликните левой кнопкой мыши по верхней линейке и, не отпуская кнопки, потяните мышку вниз. У вас должен появиться "гайдлайн":
Если вы будете тянуть его достаточно медленно, то увидите как он "прилипнет" к середине макета (сработала привязка). Проделайте ту же операцию с левой линейкой. Ваш докумен теперь должен выглядеть так:
Самое главное в сапёре - клетки. В тех же гайдлайнах гугла сказано, что идеальный размер иконки на смартфоне 48х48 пикселей. Почему, спросите вы? Гугл объясняет это очень просто - такую площадь занимает пятно контакта указательного пальца у среднестатистического пользователя. "Умно!", - подумал я когда впервые об этом прочитал. Так почему бы и нам не сделать размер клетки 48х48? Создайте новый слой, выбрав в верхнем меню Layer > New > Layer. , или просто кликнув по иконке на палитре слоёв:
Затем переименуйте новый слой в "Helper Cells". Далее выберите инструметн прямоугольного выделения ( Rectangular Marquee Tool - шорткат M ). Чтобы выделение получилось квадратным, а не прямоугольным, зажмите Shift перед тем как тянуть. Выделите в любом месте экрана прямоугольник размером 48х48 пикселей. Если у вас до сих пор активен инструмент прямоугольного выделения, то вы сможете перетаскивать выделение. Перетащите его в центр макета. В форошопе CC 2014 гайдлайны при этом должны стать фиолетовыми (так вы поймёте, что попали в центр). После этого залейте выделение любым цветом (я залил чёрным):
После этого я начал экспериментировать с количеством клеток. Экспериментальным путём я выяснил, что красиво получается если добавить ещё по 4 клетки справа и слева. Но только не вплотную, а с отступом в один модуль (мы помним, что размер модуля у нас минимален - 8px).
Абсолютно через такие же эксперименты, я надобавлял клеток сверху и снизу:
Вот и готово наше игровое поле Нужно убегать домой. Продолжение следует (после праздников). Надеюсь я вас заинтриговал.
Написал консольное приложение сапер, но появились проблемы с реализацией. Мой алгоритм таков: есть массивы, один для показа клеток в консоли, в другом содержаться расположения мин(9-мина,0-8 соответственно кол-во мин рядом). При выборе одной из клеток, если клетка содержит 0, то проверяются все соседние клетки по порядку, а в массиве для показа этот ноль становится видимым, если те клетки содержат 0,то снова выполняется этот рекурсивный проход по клеткам и отображение в массиве для показа. Так вот, в случае если выбрана одна из клеток и она ноль, в клетке слева и сверху содержатся единицы,а в клетке сверху-слева находится ноль, то по идее этот ноль не должен отображаться,потому что к нему нет прямого доступа(то есть,с любых сторон кроме диагональных)Как мне реализовать это?
657 1 1 золотой знак 9 9 серебряных знаков 23 23 бронзовых знака
а чем плохи диагонали? мне кажется должны обрабатываться все ячейки вокруг.
представьте поле 6на6,в позициях (1,4) и (4,1) содержатся мины,теперь выбираем клетку на позиции (3,3). При обходе всех клеток сверху слева не должен быть тронут ноль
Данная игра вряд ли пригодится для создания или оформления сайта, но в ней можно посмотреть, как реализованы некоторые элементы или просто поиграть.
Установка:
- Подключаем CSSminesweeper.css
- Подключаем JSminesweeper.js ниже HTML, который представлен ниже:
Найдено на codepen.io у пользователя creme
Смотрите также:
Медведь, выключающий лампочку
Юмористическая сцена с выключающим лампочку медведем
Генератор сов
Бесполезный, но интересный скрипт, генерирующий случаным образом сов
Привлечение внимания изменением элемента
Добавить комментарий:
Комментарии:
Ответьте девушке, пожалуйста. Что у меня не стыкуется со шрифтами в скрипте и html? Не добавляю никаких мета-тегов: идёт нестыковка шрифтов в скрипте. Добавляю meta charset="UTF-8" и теряю шрифты в html.
Не понял, при чем тут шрифты и скрипты?
Исправьте опечатку. Не "Вы выйграли!", а "Вы выиграли!"
Спасибо. Поставлю на сайте для капчи для смеху в форме для связи))). Посмотрю на результаты)) А то боты на прошлом сайте задрали настолько, что пришлось отключать регистрацию и комментарии. Хостинг аж блочил мой сайт. Сейчас хочу изначально всё переработать и сразу исправлять ошибки прошлого. Жаль, что на js, он обходится, придётся переписывать на Java и переносить на технологию взаимодействия ajax. Посмотрим, что выйдет)
И ещё немного логика сапёра нарушена. Здесь поле формируется изначально, а в исходном, после первого нажатия. Поэтому здесь можно сразу на мину налететь)
Данная игра вряд ли пригодится для создания или оформления сайта
Классическая игра Сапёр. Нужно обезвредить все мины на поле. Четыре уровня сложности: новичок, любитель, опытный и мастер. Первые два уровня сложности отличаются друг от друга только лишь размерами поля. Два последних уже имеют другой процент соотношения заполнения мин на поле (опытный - 1/4 от всего поля, мастер - примерно 1/3 от всего поля).
Рисунок 1 - Запуск игры
Рисунок 2 - Во время игры
Рисунок 3 - Выбор уровня сложности
Рисунок 4 - Конец игры
Комментарий:
Решил освоиться в GDI+ и написал игру Сапёр. Но так и не понял как добиться эффекта, когда окно заходит за границы рабочего стола, чтобы оно (если уж и перерисовывалось) не так тормозило при перерисовке. Тут мне и стало интересно, а как же написан Windows'кий Сапёр. Посмотрел, там используется Direct3DCreate9(). То ли эту нужно чтобы приложение имело какой-то авторитет в системе, то ли сама игра там написана с использованием библиотеки Direct3D. С этим я не разобрался. Кто чего знает, буду рад Вас послушать. Ну и собственно хотелось бы услышать мнения о моей игре.
Исполняемый файл: Сапёр на C++
Проект (Microsoft Visual Studio 2010 Ultimate): Сапёр на C++ Проект
Добавь клик обеими кнопками, новую игру по F2, новую игру по ПКМ. И уменьши клеточки, а то при 1024 на 600 вылезает за рабочий стол.
s3dworld
> когда окно заходит за границы рабочего стола, чтобы оно (если уж и
> перерисовывалось) не так тормозило при перерисовке
Ыыы?
Да, у тебя действительно нехилые лаги, когда окно заходит за край. Что ты с ним делал? Я надеюсь, ты не создавал настоящие кнопки для поля?
TarasB
Это и не кнопки вовсе. скажем так, это мой компонент, рисуемый с помощью GDI+. А лаги такие из-за перерисовки. Что делать, я не знаю.
Ты каждый компонент хитро перерисовываешь, что ли? Делай перерисовку только при изменении состояния поля, и не на форму, а в буфер. И в wm_Paint пропиши BitBlt из этого буфера. Ну нечему там лагать.
TarasB
Я перерисовую на форму только тогда, когда у какого-то поля изменилось состояние. И перерисовываю я тогда только именно это поле. Хорошо, сделаю я не на форму, а куда-нибудь на Bitmap или Image. ну а толку? Всё равно потом на форму рисовать. Или ты имеешь ввиду постоянно перерисовывать окно через определённый интервал из буфера? А при изменении состояния, буфер меняется. Так что ли?
TarasB
попробуй поставить стили CS_SAVEBITS, CS_VREDRAW, CS_HREDRAW, может поможет (наверняка не знаю)
Читайте также: