Codementor Events

Building a game is fun

Published Mar 11, 2019Last updated Mar 13, 2019
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

  git clone https://github.com/softberry/memory-game.git

NPM

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.

Discover and read more posts from Emre Sakarya
get started