I made a “do it yourself” trivia game called kaBOOM! I built it on top of Angular over the last couple weeks. I learned a lot and I want to share it with you.

Why make a game with Angular when there are so many game-centric JS libraries available?

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:

  1. It would let me build something with Angular that people would find useful.
  2. It would let me explore many DIFFERENT aspects of what Angular is capable of when you build something the “Angular” way.
  3. Fun!

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.

 Where to begin?

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.

Moving Parts

I decided on the popular Animate.css to handle most transitions and fancy interface moves. For sprite animation a jQuery plugin called jQuery.animateSprite.

Sound

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.

Angular add-Ons

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.

[play kaBOOM!]

Resources and Credits

4 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

Privacy Policy | Refund Policy | Contact