I created a Drag and Drop spelling game built using HTML, CSS, JavaScipt and interact.js! It was quite an intense process but I was focused on building something for my 3 year old daughter to play and learn words.
Tech used: HTML, CSS, JavaScript, Interactjs.io
I took inspiration from other online and iPad games to create something that was beneficial for my daughter and myself. I wanted to expand my knowledge of touch screen interactivity and that was the main focus here. There are a few libraries that I searched and read about, but I landed on interactjs.io and it met my needs, so I stuck with that. The game is aimed at 3-5 year olds learning basic spelling words. The game is meant to be played on an iPad (or similar device).
I want to speed up some of the processes and take away some of the glitches on the initial home screen. Althought I like the flying bee animations for children, they seem to take up a lot of memory and slows down the user experience. That type of speed and optimization is necessary, especially when targeting younger audiences. Also, it would be great to expand the game to longer words and levels.
- storage options
- login / signup
- add levesl
- optimize game speed and delivery
I learned a lot about Javascript in this project. It was the first large scale app that I made, and once I got into so many lines of code I really started to understand how the structure of an app is important. I also started to understand how variables need to be named and contained within certain functions/paramaters of code. Also, it became evident that clear markup and comments can help my understand my thought process when I revisit the code later.
Examples: Take a look at these couple examples that I have in my own portfolio:
Movie Mania: github repo
ESJ Editing Services: github repo
Investing Dashboard: github repo