I was REALLY struggling to find projects to use Angular with that matter. I’ve built a silly masonry.js photo gallery and some RESTful API front ends but I was doing all of that with straight PHP/jQuery before. Nothing was being made special by using Angular to do those things. It just… “wasn’t needed.” But I know Angular is the future. I know it is powerful. There has been this “thirst” within me to have a chance to work on something that would really let me get to know Angular and really build out a larger front end only application.
I wanted a project that had three things:
My fiance is an ESL (English as a Second Language) teacher. She showed me a game she plays with her students where she would make up a list of questions from the lesson. On a piece of paper she would make a grid with the questions and some “bombs” in the squares. She would recreate this grid in a large scale on her whiteboard but only put numbers in the squares. Using her key she created earlier she lets her students pick the numbers and reads them the question or goes, “kaBOOM!” when there is a bomb.
Once she told me about it I instantly knew that it was something I wanted to try and make. I really want to learn more about making browser based games and I really want to learn more about Angular. So I sat to work.
Well first things are first. I needed to scaffold the thing. For the first couple days I think all I did was make directories and folders filling them with the different assets I thought I was going to need. It felt like I was buying all the lumber and sketching out plans for my own fort kick ass.
I used the standard bootstrap with a bootswatch to get a solid CSS grounding to stand on. I threw in some Font-Awesome for good measure. I knew the game had to work on mobile devices. I don’t know why but it is carved into my soul to ALWAYS be programming for tablets and phones. I knew with those tools I would be able to do that easily.
I had never worked with sound like this before. I knew I needed something I could easily control and let users control. Something flexible that would play nice with Angular. Welcome howler.js to the kaBOOM! foundation.
Local Storage: I knew I wanted to use browser local storage to keep the game data. If things get popular I can’t pay to store all of this data and handle the traffic. Plus the app needed to be “self sustaining.” I used Angular Local Storage by Greg Pike for this.
UI Router: A no brainer. I had never used it before but so many people are swearing by it I knew I had to give it a shot. I don’t 100% understand all its majesty but I got it to do what I needed.
Loader: Trying to call ng-show all the time was becoming a pain. I was glad for the auto loader provided by Mr. Fancy Pants.