Thunderjack! HTML5 Game Update: A Little More Polish

Hey there.

I made some more adjustments to the Thunderjack! card game.

The updates include:

  • Sound effects
  • The Thunderjack! effect (lightning + thunder sound + screen flash + screen tremor)
  • Added a preloader
  • Cleaned up text visuals (use of BitmapText)
  • Cleaned up loading (some assets were being loaded twice from various Phaser state files per Phaser Editor. After studying the editor a bit, I may write an article about setting up assets in pack files, and a basic understanding as to how Phaser accomplishes this. )

I’ll be making one more change to the game: How to minify the JavaScript code. Currently, all the JS files are being loaded individually. Although most are small (less than 10 KB), there are quite a few files, and it causes the web browser to make many HTTP requests to the server.

By having files “minified”, it combines several JS files into a single one (and can optionally compress and/or mangle the files’ contents), reducing load times, and number of requests. I’ve been looking at tools like UglifyJS, which is also caused me to look at tools like Node.js ( https://nodejs.org/en/ ) and npm … Looks like I’m going down the damn rabbit hole whether I want to or not! 😏

And I’m not done with card games, especially consider how many I’ve made for a client, Squarejack Gaming.

Also, not only will I get into not more traditional type of card games, but also other non-gambling relatively simple ones, like Concentration (Match). Even a battle card game may be in the works later down the road.

And I’ll really be going deep when I start adding multi-player aspect to these games. Lots of exciting things ahead!

So, go ahead and give have some fun playing Thunderkjack!. 👍🏿

Finally, if you’d like me to code your next card game, please get in touch with me at cartrell@gameplaycoder.com.

That’s all for now. Talk to you later, guys. Take care.

– C. out.

Brickout: Polish Update

Hey there.

Polish can easily be overlooked when developing a game. It’s that last 10 percent or so where you smooth out the rough edges, focus on the intricacies of mechanics or functionality, and sharpen up audio, visuals and feedback. Polish is what can turn a bad game into a good game, and a good one into a great one, all else being equal.

No, not that kind of polish.

A bit of progress has been made to add polish to Brickout. Let’s demonstrate what’s done so far.

Added particle effects to broken bricks.

Getting into Phaser’s particle system wasn’t too difficult. I created a simple graphic that represents a broken piece of the brick, and used that as the particle. Every brick has its particles that match its own color.

Extra Impact to Bomb Explosions

When a bomb explodes, it now produces a screen flash and tremor.

This one was a lot of fun to add. The flash made use of Phaser’s graphic primitive functionality. In this case, I used a colored rectangle that fills the entire screen.

The tremor was super-easy. Interestingly enough, there is a “shake” method on Phaser’s Camera object that you can call, and specify the intensity and duration of the tremor. In previous games I’ve made for clients, I’ve always had to do this manually, and I was expecting to do that here. Thankfully (or unfortunately, if you’re a crazy coder (:  ), that’s a task I’m relieved of for this game. (:

There is also a “shattering” sound that is played if the bomb happens to clear any bricks within its blast area.

Saver Blocks Gradually Appear Instead of All at Once

When the saver bridge is forming itself, it now does so once brick at a time. So, you’re not out of the woods yet, and you can still lose a ball while the bridge is forming!

Also added particles to broken saver bricks as well.

Adding Labels to Identify the Item Collected

When you collect gems, an animated label will briefly appear. For some items, such as the bomb or saver bridge, this is not necessary.

Alright! Let’s see this shit in action!  😀

Now, more work to do!

– C. out.

Polishing Up Brickout

Hey what’s up!

The gameplay is pretty much done. Now it’s time to start polishing up the mechanics and effects. The next steps are:

– Adding particles to broken bricks (This means learning how to use Phaser’s particle system. Cool!)
– Adding a screen flash to bomb explosions. In addition to the a screen tremor, let’s add some impact to those bombs. (User of Phaser’s Graphics – draw primitives, specifically, the rectangle)
– Saver blocks appear gradually instead of all at once (Use of Phaser’s Timer system)
– Adding labels that say what power up item was just collected
– Adding particles to broken saver blocks
– When bricks are cleared with Color Match or Color Blast:
a) gradually destroy the blocks instead of all at once
b) add a screen tremor effect
c) add sound effect (different from the normal brick breaking)
– When serving the ball into play, give the player more control over where it goes. I plan on “sliding” the ball across the paddle, thus giving the player the opportunity to “aim” the ball. Check out this video:

– Adding game over when all lives (balls) are lost.

That should do it. After this, I’ll add a few more levels, and play around with balancing the items (rates of occurrence, duration and intensity of effects, and such [for game balance/feedback purposes]), do a bit more play-testing, then that should be it.

Almost there guys! Thanks for staying tuned, and comment if you’ve any questions on anything.

And for the record, yes, the game will be freely available to play on the site, as well as the source code being released.

Take care,

– C. out.