Создание игры — это весело

Обо мне

Вот уже более 20 лет я пробую что-то в программном обеспечении, особенно в области веб-разработки.
Я разработал множество инструментов и плагинов, используя JavaScript для браузеров, а также модули NodeJS.

Почему игра памяти?

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

Я давно слежу за новостями о WebComponents. Инкапсулированное поведение веб-компонентов на самом деле невероятно. Независимая, несвязанная разработка и упрощение реализации являются наиболее привлекательными ключевыми словами о веб-компонентах.
Поскольку он до сих пор не поддерживается во многих браузерах, у меня не было возможности использовать их в реальных проектах. Существует множество фреймворков, которые упрощают разработку веб-компонентов и содержат необходимые полифиллы, поэтому охват браузера очень высок.

Игра Памяти должна быть,

— Родной: без каких-либо фреймворков или полифилов,
— Автономный Подается на общедоступном CDN. Кто когда-либо захочет разместить эту игру на своей веб-странице, просто должен разместить 2 строки кода.
— Независимая платформа: Также может быть включен в веб-приложения, разработанные с помощью Cordova и т. д.

Насколько настраиваема игра «Память»?

• Используйте свои собственные изображения: определите собственный сервер изображений. Просто разветвите мой другой проект с открытым исходным кодом сервер изображений
• Многоязычный: простой набор lang атрибут элемента.
• Установить размеры: установить matrix атрибут мин. от 2×2 до макс. 10×10
• Полноэкранный режим: установлен view атрибут для перехода в полноэкранный режим

Стек технологий

Простой проект WebPack с единой точкой входа.
Чистый JavaScript, скомпилированный с помощью Babel.

Процесс построения игры памяти

Хотели бы вы использовать на своей веб-странице,
<mini-memory matrix="2x2"></mini-memory> и связать мини-библиотеку памяти из CDN.
Это пакет npm, который можно просто включить в свои собственные сборки.
npm -i mini-memory --save

Советы и советы

Попробуйте на себе:
Живая ДЕМО:

ЖКТ

  git clone 

НПМ

npm i mini-memory --save

WebComponents.org:

Заключительные мысли и следующие шаги

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