Building a game is fun
About me
It has been more than 20 years I have been trying out things in software, especially web development area.
I have developed many tools and plugins using JavaScript for browsers as well as NodeJS modules.
Why Memory Game?
I would like to try out Web Components but I also would like to make something that many people can easily implement their web pages or their web apps. Memory game is a classic game maybe all of us like to play it. But it is also a fully functional test case to try Web Components out.
I have been following news about WebComponents for a long time. Encapsulated behaviour of WebComponents is actually fabulous. Independent, decoupled development, and simplification of implementation are the most attractive keywords about Web Components.
As it's still not supported natively in many browsers, I did not have a chance to use them in real projects. There are many Frameworks, makes developments of WebComponents easy and contains required polyfills so browser coverage is very high.
Memory Game should be,
- Native: without any framework or polyfills,
- Standalone Served on public CDN.Who ever want to place this game in their webpage, juts need to a place 2 lines of code.
- Platform Independent: Can also be included in Web Apps developed with cordova etc.
How customizable is Memory Game?
- Use your own images: define a custom image server. Simply fork my other Open Source Project image-server
- Multi language: Simple set
lang
attribute of the element. - Set dimensios: set
matrix
attribute min. 2x2 to max 10x10 - Fullscreen: set
view
attribute for run into fullscreen mode
Tech stack
A Simple WebPack project with a single entry point.
Pure JavaScript compiled with Babel.
The process of building Memory Game
Would you like to use in your WebPage,
<mini-memory matrix="2x2"></mini-memory>
and link mini-memory library from CDN.
It's a npm package which can be simply included to your own builds.
npm -i mini-memory --save
Tips and advice
Try it out on yourself :
Live DEMO: https://www.emresakarya.com/mini-memory/
git clone https://github.com/softberry/memory-game.git
npm i mini-memory --save
WebComponents.org: https://www.webcomponents.org/element/mini-memory
Final thoughts and next steps
I would like to extend this game to make it available more people by adding more customisation, and optional polyfills.
I would be very happy to hear your comments or suggestions about how to make it more fun.