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

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

Запись от 8Observer8 размещена 06.03.2022 в 11:49
Показов 2213 Комментарии 0
Метки javascript, unity, unity2d, webgl

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

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

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

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

Размер: 7.2 Кб

Для создания игровой демки использовались инструменты:
  • Легковесный бесплатный редактор кода VSCode, который занимает ~300 MB на жёстком диске
  • Легковесный бесплатный редактор растровой графики GIMP, который занимает ~1 GB на жёстком диске
  • Платный упаковщик тайлов Texture Packer Pro. Упаковывает тайлы в один png-файл. Генерируется json-файл, в котором хранятся параметры, например, имена тайлов и текстурные координаты прямоугольников в формате JSON
  • Библиотека glMatrix для линейной алгебры, то есть для создания матриц и векторов и математических операций с ними. Эта библиотека подключается одной строкой кода:
    HTML5
    1
    
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/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 Кб, 497 просмотров)
Метки javascript, unity, unity2d, webgl
Размещено в Без категории
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Новые блоги и статьи
Создаем RESTful API на Golang с Fiber
golander 04.06.2025
Я перепробовал десятки фреймворков для создания RESTful API за последние годы, и когда впервые столкнулся с Fiber, понял, что это совсем другой уровень. Нет, я не собираюсь рассказывать сказки о. . .
Как работать с куки в ASP.NET Core
UnmanagedCoder 04.06.2025
Когда я впервые начал работать с куки в ASP. NET Core, меня поразило, насколько отличается работа с ними от классического ASP. NET. В Core все стало более декомпозированным - больше нет удобного. . .
Рисование коллайдеров физического движка Box2D-WASM v3 на Three.js
8Observer8 04.06.2025
Erin Catto (автор Box2D) переписал с нуля Box2D v2 с С++ на Си и появилась версия Box2D v3. Birch-san собрал Box2D v3 в WebAssembly (WASM), чтобы можно было использовать Box2D v3 на JavaScript. В. . .
Worker Threads и многопоточность в Node.js
Reangularity 03.06.2025
Если вы когда-нибудь посещали собеседования на позицию Node. js разработчика, почти наверняка слышали заезженную фразу: "Node. js - однопоточная платформа". Звучит как неоспоримый факт, который. . .
Event-Driven CQRS на C# с паттерном Outbox
stackOverflow 03.06.2025
В традиционной модели происходит примерно следующее: вы получаете команду, обрабатываете ее, сохраняете результат в базу данных и затем пытаетесь опубликовать событие в брокер сообщений. Но что если. . .
OwenLogic: перенос сетевых переменных в панель Weintek (EasyBuilder Pro)
ФедосеевПавел 03.06.2025
ВВЕДЕНИЕ ПЕРЕД ЭКСПЕРИМЕНТАМИ - СОЗДАЙТЕ РЕЗЕРВНЫЕ КОПИИ ПРОЕКТОВ На момент написания статьи (02 июня 2025 г. ) самыми актуальными версиями ПО являются: OwenLogic v. 2. 10. 366 EasyBuilder Pro. . .
Dev-c++5.11 Покорение вершины
russiannick 02.06.2025
С утра преследовала одна мысль - вот бы выучить С++. Сказано-сделано. Окончив смену, скачал в интернете бестселлер Дэвиса Dev-C++ для чайников. Книга оказалась интересной и я скачал среду, на примере. . .
Тестирование Pull Request в Kubernetes с GitHub Actions и GKE
Mr. Docker 02.06.2025
Мы все знаем, что тестирование на локальной машине или в изолированном CI-окружении — это не совсем то же самое, что тестирование в реальном кластере Kubernetes. Контекстно-зависимые ошибки, проблемы. . .
Оптимизация CMake для ускорения сборки
bytestream 02.06.2025
Вы когда-нибудь ловили себя на мысле, что пока ваш проект компилируется, можно успеть сварить кофе, прочитать главу книги или даже сбегать в соседний офис? Если да, то добро пожаловать в клуб. . .
JS String.prototype.localeCo­mpare()
mr_dramm 02.06.2025
скопировано из этой темы чтобы не потерялось. localeCompare без указания локали для сравнения строк под капотом использует Intl. Collator , который работает согласно Unicode Collation Algorithm. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2025, CyberForum.ru
OSZAR »