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

2 Comments

Finding resources for inspiration as an aesthetically challenged web developer is pretty easy. There are a billion resources out there. You can browse Dribble, Theme Forest or the Web Awwwards but a comprehensive list of good usable ones is hard to find. Finding things that you can drop into your project right away is what we are after here.

In this series of posts I’d like to share some of the different resources that I’ve used to get me through the mental road blocks that come with seeing the Matrix in code rather than in living color.

Let’s start with something easy that you can use RIGHT now.

pig

UI Kits

Let me paint you the mental picture of yourself. You have written your master app. Your perfectly coded magnum opus to the gods of the internet is efficient, elegantly coded and has perfectly crafted modular functionality for every aspect of user interaction. The only problem right now is that it looks like wire frames, white space and blue links. Time to put some lipstick on that pig and get some markup that you can drop into your views.

Pixelkit Bootstrap UI Kits

[Download]

Flat UI by Designmodo and Square UI by Designmodo

[Download Flat UI] | [Download Square UI]

flat-ui-free-6001 Square-UI-Free

Other Resources

Leave a Comment

smoothie

This was the smoothest theme update from end to end that I’ve ever had. We had no hiccups in review and no major problems.* Maybe I’ll get the hang of this after all.

Down to business.

Twitter Bootstrap was updated to v3.1.1 on February 13th and 3.1 on the 30th of January so I wanted to make sure we got all the latest and greatest included in our theme here. The js, LESS, and default bootstrap.css files were all updated. There were also some typos in my translation strings on a couple files. Thank you to WP user Dyskette for taking the time to point it out.

I’ve also updated the child theme with the updated LESS files.

What’s next?

Bootstrap 3.1 brought us the SASS port so I’m trying to figure out the best way to incorporate that into what we are trying to do here. I’m not sure if I should just make an “add-on” download type of thing or actually include it with the theme itself. Right now the thinking is that including both the SASS and the LESS is going to create too much bloat. In the end I might create an entirely new theme that uses the SASS way. I haven’t decided yet but I feel it is important to make this available.

The Bootstrap Component Plugin

I’ve also been kicking around the idea of creating a companion plugin that is full of shortcodes and template tags to help people use the Bootstrap javascript and css components easier within their content. I haven’t started anything but it has been on mind for a long while.

If you have translation files I want them!

I’d like to start compiling a list of translation resources. So if  you have taken the time to translate the theme please send them to me danny (at) devdm.com so that we can help the rest of the world and make them available for download.

Child Theme Gallery

I’ve used this theme in a few different production projects now so I’d like to create a “child theme” gallery. I’d like to show people what is possible using DevDmBootstrap3 as a starting point for projects. If you have a project you have made that I could showcase please let me know danny (at) devdm.com.

* So far…

Leave a Comment

A bit of a cross post here from the DevDmBootstrap3 website.

A version of DevDmBoostrap3 is now available on the WordPress Themes Directory to be easily installed by users from all around the WORLD! Cool.

To make this happen I had to change/remove a few features and I had to update some markup/function names.  Most of these changes were great improvements as far as markup and security was concerned (and I have pushed these changes to the repo) however we did lose some things along the way.

These are the features that were removed for the WordPress Theme’s directory version:

These things were deemed to be “plugin territory” and didn’t align with the standardization practices they are shooting for over there on the directory.

DevDmBootstrap3 on the WordPress themes Directory

 

screenshot

(I also had to change the screenshot)

“I need to upgrade the DevDm Blog to use the new version of DevDmBootstrap.” – Danny

 

Leave a Comment

The Github Repository is up and I’m confident people can start giving the new DevDmBootstrap3 a try to see if it will work for them.

Remember, this is a WordPress theme for developers who are already familiar with the way Twitter Bootstrap is doing things. I’ve moved over and adjusted all the documentation from our 2.3.2 version of the Theme.

View Demo / Documentation

Download the zips from the repo and let me know if you create something awesome. I’d love to hear about it.

screenshot

Leave a Comment

Privacy Policy | Refund Policy | Contact