Форум программистов, компьютерный форум, киберфорум
8Observer8
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск  

Игровая демка "Сапёр" на чистом WebGL 1.0 и JavaScript из туториала "Unity 2D Minesweeper Tutorial" от NoobTuts

Запись от 8Observer8 размещена 06.03.2022 в 11:49
Показов 2605 Комментарии 0

Содержание блога

Игровая демка "Сапёр" на чистом WebGL 1.0 и JavaScript портированная из туториала Unity 2D Minesweeper Tutorial от NoobTuts

Название: 01 - you win.png
Просмотров: 9522

Размер: 5.7 Кб Название: 02 - you lose.png
Просмотров: 9439

Размер: 7.2 Кб

Для создания игровой демки использовались инструменты:
  • Легковесный бесплатный редактор кода VSCode, который занимает ~300 MB на жёстком диске
  • Легковесный бесплатный редактор растровой графики GIMP, который занимает ~1 GB на жёстком диске
  • Платный упаковщик тайлов Texture Packer Pro. Упаковывает тайлы в один png-файл. Генерируется json-файл, в котором хранятся параметры, например, имена тайлов и текстурные координаты прямоугольников в формате JSON
  • Библиотека glMatrix для линейной алгебры, то есть для создания матриц и векторов и математических операций с ними. Эта библиотека подключается одной строкой кода:
    HTML5
    1
    
    <script src="https://cdn.jsdelivr.net/npm/gl-matrix@3.4.3/gl-matrix-min.js"></script>
  • Библиотека Planck.js для создания обработчика нажатия мыши по ячейке поля. Planck.js - это порт физического движка Box2D. Эта библиотека позволяет очень просто обрабатывать клик по объекту без необходимости писать кучу if. В туториале на Unity тоже используется компонент "Box Collider 2D" для обработки нажатия мыши по ячейке поля. Я написал максимально близко к туториалу на Unity. Эта библиотека подключается одной строкой кода:
    HTML5
    1
    
    <script src="https://cdn.jsdelivr.net/npm/planck-js@0.3.31/dist/planck.min.js"></script>

Используется рекурсивный алгоритм Заливка (Flood Fill), чтобы открыть пустые ячейки. Реализация алгоритма немного не доработана. На первом скриншоте показано, как есть, а на втором, как должно быть, то есть ячейка с двойкой должна была открыться:



Обработку клика по объекту я взял из этой записи блога: Handling Mouse Click in Box2D. На всякий случай скопирую всю запись блога, потому что ссылка может стать мёртвой, например, из-за того, что автор записи перестанет платить за хостинг:

Handling Mouse Click in Box2D

Often in a game you would want to know the b2Body on which the mouse click occurred .

The co-ordinates for the mouse click can be obtained as follows,
JavaScript
1
2
3
4
5
6
var mouseX, mouseY;
function handleMouseDown(e) { 
    mouseX = (e.clientX - canvas.offsetLeft) / SCALE;
    mouseY = (e.clientY - canvas.offsetTop) / SCALE;
    getBodyAtMouse();
}
The b2Body at the Mouse Click can be obtained as follows,
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
var selectedBody;
function getBodyAtMouse() {
 mousePVec = new b2Vec2(mouseX, mouseY);
    var aabb = new b2AABB();
    aabb.lowerBound.Set(mouseX - 0.001, mouseY - 0.001);
    aabb.upperBound.Set(mouseX + 0.001, mouseY + 0.001);
    selectedBody = null;
    world.QueryAABB(getBodyCB, aabb);
    if(selectedBody!= null && selectedBody.GetUserData() != null)
              console.log(selectedBody.GetUserData().name);
    return selectedBody;
}
b2AABB() returns an axis aligned bounding box defined by the upper and lower bounds. I have set the upper and lower bound of the box to the mouse click points. The AABB query returns all fixtures overlapping in the given the rectangular area, the callback function is called for each of the fixture in the bounding box. The callback is usually used to create a list of fixtures/body for further processing.

JavaScript
1
2
3
4
function getBodyCB(fixture) {
       if(fixture.GetShape().TestPoint(fixture.GetBody().GetTransform(), mousePVec)){
                  selectedBody = fixture.GetBody();
    }
}
Вложения
Тип файла: zip minesweeper-2d-noobtuts-port-planckjs-webgl-js.zip (43.5 Кб, 617 просмотров)
Размещено в Без категории
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Новые блоги и статьи
Был там один разговор по поводу свободы в материальном мире.
kumehtar 19.08.2026
Суть: рассматривается живое существо, оказавшееся внутри довольно странной системы (этого мира) и пытающееся обустроить в ней свой кусок пространства. Жизнь действительно предъявляет каждому. . .
Когда логика программы не спасает от человеческих ошибок
Maks 18.08.2026
В последнее время всё чаще и чаще сталкиваюсь с таким явлением, как абсолютная невнимательность (или глупость) пользователей. Проявляется это чаще всего на работе в коллективе. Допустим, человек с. . .
Лето уходит
kumehtar 17.08.2026
Мысли в слух
kumehtar 17.08.2026
Забавно, насколько сейчас стала доступна информация. Например о магии, духовном развитии, медитациях, и других подобных направлениях, ранее зачастую тайных, передаваемых от учителя к ученику. Хотя. . .
Перемещение строк из ТЧ в другой документ с учетом текущего пробега
Maks 17.08.2026
Реализация из решения ниже выполнена на примере нетипового документа "Автозапчасти", с ТЧ "Шины". За основу взят алгоритм отсюда: https:/ / www. cyberforum. ru/ blogs/ 359708/ 10838. html Задача: . . .
Саморегулирующийся социальный контракт для сервера cross-section.
Hrethgir 14.08.2026
С кодом конечно таких глубоких размышлений пока не было, впрочем я уже привык к алгоритмизации. Суть предмета записи: снова в диалоге с нейросетью (я взял пока себе ник для учётки админа - Rector). . . .
Часы электронные
Uhbif79 12.08.2026
Выкладываю программу часов. Программа позволяет: 1. Использовать системное время и дату, 2. Есть возможность вводить время и дату вручную. 3. Реализованы 2 будильника: начало и конец рабочего дня. . . .
Часы с будильником на основе класса QLCDNumber
Uhbif79 12.08.2026
Всем добрый день, выкладываю программу часов с будильником на основе класса QLCDNumber. Здесь я пробовал самостоятельно создавал классы, впервые столкнулся с видимостью переменной одного класса из. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru