Introducing Bet Bet Roulette, a Windows Store game made with HTML5/JavaScript

I recently released my first ever game to the Windows Store marketplace: Bet Bet Roulette!

Bet Bet Roulette

Bet Bet Roulette is what I call a modern twist on the classic casino game of roulette. The current version has a very modest feature set, but I’m working on some big features that will really set this game apart from the other roulette games that try to directly recreate the casino experience and are sometimes dry and boring.

I’ve learned a ton and used a lot of new tools in the process of making this game, so when I’m not busy working on enhancements and other projects I hope to blog about some specific things worth sharing. For now, this post will serve as an introduction.

Why Windows Store?

Good question. The iOS market is certainly appealing, but it is overly saturated with games and I feared mine would get immediately lost in the mix of all the AAA titles on the platform. I don’t use any Android devices, so that didn’t really interest me either. Windows Store was a platform with less competition, inviting in a way (same goes for Windows Phone, which I have plans to support in the future).

On the technical side, the Windows Store platform would allow me to “natively” create a game in HTML5 and JavaScript, which reduces a lot of the friction of dealing with new toolsets. Sure, there’s Phonegap and other engines that can transpile JS and canvas into native code on all platforms, but that’s still an extra layer of complexity that I was hoping to avoid for iteration one.

Why HTML5 and JavaScript?

I wanted to hone my JavaScript skills and explore some areas of HTML5 that I hadn’t worked with before (canvas). This game certainly could have been made with many alternative technologies. A dedicated game engine like Unity might have given me some extra power and options, and even one of the many JS based frameworks would have provided several out-of-the-box features. In the end, I didn’t see a need for an engine at all.

Bet Bet Roulette

No game loop

Most games have a “game loop” in which the game is constantly running at 60 times a second. For each iteration, the game checks for any player inputs, responds accordingly, and then redraws the screen. There’s no loop in Bet Bet Roulette. This game is essentially just has a bunch of event handlers and some timers. It’s actually just as much a traditional event-driven web app as it is a “game”, as far as how it’s composed. Is this good or bad? I make no claims either way. I determined that it would be easier for me to build this particular game with an event-driven model.

The convenient result of creating a game using standard web dev technologies is that it let me run and debug the game in the browser. In fact, it wasn’t until I was about 75% done with the game that I even started to think about, and write code specific to the Windows Store platform.

Why Roulette?

I’ve always had a fondness for this casino game, despite the fact that it is mathematically foolish to bet real money on it. There’s something fun about placing bets with long odds and then hedging them, with well over 100 different bets to make. Practicality is the other huge factor. The great thing about roulette, or other casino games involving cards or chips, and other games based on words, or boards, etc., is that they don’t require a massive amount of artwork and animations to produce! If you are a typical programmer who lacks that artistic talent (or a friend with it) but you want to make a game, there are plenty of options for you still. There are a lot of places to find cheap or free artwork that can go a long way to creating a decent looking game.

And then what?

As I have time I hope to write some more about the game, the technologies I used and the things I learned along the way.

Until then, I’ve got to get back to working on a huge new feature that I’m really excited about. ;)

Bet Bet Roulette (Windows Store, betbetroulette.com website) is currently available for any device running Windows 8.1 (x86, x64, ARM) and it’s FREE. Try it out and let me know what you think!

Robomongo: a cross platform GUI for MongoDB

MongoDB is arguably the most popular “NoSQL”, document oriented database platform out there today. It’s also one of the six technologies you should learn this year (2013). Developers coming from a SQL background familiar with Microsoft SQL Server, MySql, or others are likely used to the mature GUI tools available to administrate their databases. Microsoft has SQL Server Management Studio. MySql has phpMyAdmin.

What does MongoDB have? A command shell.

Or so you’d think. The Mongo shell is fantastic and just about all you need to administer your Mongo database (especially if you’re a pro, or interacting with Mongo daily). But sometimes a nice GUI is helpful to visualize the data structures and let you see the big picture (how many databases do I have? What are the collections?) without having to remember all the commands to do so.

No GUI officially comes with Mongo, so unsurprisingly, there are several MongoDB Admin UIs from which to choose from. But this list on the MongoDB website doesn’t really adequately rank and explain the pros and cons of each. The first one I was about to use turned out to have been inactive for several years. Lame.

So what Admin GUI should you use with MongoDB?

Robomongo

Robomongo is cross-platform and open-source. It has the full* power of the MongoDB shell, autocompletion, multiple output formats, and more. It’s just what you’d expect.

Robomongo

There are several tools worth exploring, but if you’re looking for the MongoDB equivalent to Sql Server Management Studio, Robomongo might be your best choice. I’m going to stick to the shell where possible, but Robomongo is my go-to for when I want to visually explore Mongo.

*Robomongo embeds the SpiderMonkey JavaScript engine – the same one MongoDB used to use until 2.4, when they switched over to the V8 engine. Technically, at the time of this writing this means Robomongo does not actually embed the same engine as MongoDB, despite it’s claims.

 

The amazing GreenSock Animation Platform

If you are creating animations with pure CSS or still using the outdated and slow jQuery animation methods, quite simply: you’re doing it wrong.

Get GreenSock.

Check out this Pen!

GreenSock has been around for a while, producing tweening and animation tools for ActionScript and the Flash platform. Since Flash is dead, they’ve moved to JavaScript and HTML/CSS. Their latest platform is easily the one of the best and most comprehensive ways to enable wicked cool animations: from the simple tweening of an attribute of an element, to a full-blown timeline of numerous animation events.

Their API is simple, and for most cases the licensing is free (there are paid-membership levels that offer extra plugins, and for certain commercial applications, you must be a paid member).

It’s important to note that while the GASP platform can ‘natively’ tween/animate HTML elements much the same way jQuery does, at its core, GASP can be used to tween any numerical element. This means you can use GASP to tween and animate arbitrary JavaScript objects, so you can have full control of the actual rendering. GASP can be used with HTML5 canvas or SVG, and has optional plugins for KineticJS, EaselJS and Raphael.

You can check out several samples/examples of the GASP capabilities on GreenSock’s CodePen page.

Fusing WebGL, CSS 3D and HTML

I remember being blown away when I saw Steven Wittens’ website of yesteryear, but now he’s got a new version that I’ve been sharing with my team.

http://acko.net/blog/zero-to-sixty-in-one-second/


acko.net

Like his previous site, the header rotates in 3d as you scroll down the page, but now it’s using WebGL and has a whole animation sequence. Scrolling further down the page you see not just your typical parallax scrolling effects in terms of position, but where the elements are changing perspective in three dimensions.

You definitely need to check out Steven’s site if you haven’t before.

HTML5 placeholder text focus

Chrome, Safari and Firefox currently treat the HTML5 placeholder attribute the same way. The placeholder text value is displayed over an input element when

  • There is no content in the input element
  • Regardless of whether the element has focus or not

Try for yourself, above.

Internet Explorer 10, however, treats the placeholder a bit differently. If the input element has focus, even if it does not have text, then the placeholder is hidden.

I happen to think keeping the placeholder present when the element has focus is better, though I confess I do know that some people find this confusing and in turn fruitlessly attempt to select and delete the placeholder text before making their input. I’ve used two jQuery plugins to achieve consistent browser behavior

but  these don’t use the placeholder attribute at all. Instead they overlay a text element on top of the input element. Seems like a hack.

The spec

Turns out that IE10 is the one actually adhering to the HTML5 spec. The emphasis added is mine.

User agents should present this hint to the user, after having stripped line breaks from it, when the element’s value is the empty string and the control is not focused, i.e., by displaying it inside a blank unfocused control and hiding it otherwise.

If you read the spec and note the potential confusion and accessibility issues with the placeholder attribute, it’s hard to argue. Maybe it is best that placeholder text be hidden as soon the input has focus.

For the time being my recommendation would be to discontinue further use of Javascript plugins and other “hacks” to mimic placeholder functionality. Just use the native placeholder attribute and let the browser decide how to handle it. If your client suggests placeholder text should still be visible on focus (for IE too), kindly point out that the spec suggests otherwise. Then implement one of the above mentioned Javascript plugins to satisfy their need.