How I Learned to Appreciate JavaScript By Smacking Justin Bieber

How I Learned to Appreciate JavaScript By Smacking Justin Bieber

It may come as a surprise, but until a few days ago, I completely hated JavaScript. Yes, JavaScript is increasingly important to most developers, but that didn’t mean I had to like it. Through the process of writing my first-ever JavaScript game–and coming in second place at MIDEM Hack 2014–I have at least come to appreciate the language.

Below, I’ll talk about my first ever HTML5 Canvas and Javascript game, which includes using LeapMotionin-browser to hit falling Justin Bieber heads. I’ll also cover the awesome MIDEM Hack where I created this game.

A Weekend in Cannes

The MIDEM Hack is an annual event in Cannes, organised by my fellow SendGrid evangelist Martyn Davies. Music Hackathons are my favourite hackathons, but this was actually my first MIDEM Hack and I have to say, it was a great event. Although not quite the scale of the US College hackathons of 1,400 people; MIDEM Hack held just 30 passionate hackers in a top-floor room in the Palais des Festivals et des Congrès in the beautiful harbour town of Cannes in the south of France.

The weekend hack began on Saturday, with a brief introduction hosted in the Innovation Factory. Shortly after, the hacking began and the creative juices started to flow. After throwing three ideas into Cannes Harbour, I settled on creating a Leap Motion powered HTML5 Canvas, Javascript game later titled: “Read Evaluate Print Loop’s Jazzy Groove Remix a.k.a Bang the Biebs.”

Bang The Biebs

The goals of the game are simple; use the Leap Motion to “bang” as many Bieber heads as you can, without touching the “Deadheads’”(the oversized, red-coloured Bieber heads). If you accidentally hit 5 Deadheads in a row, you will be subject to the dreaded “Oops” screen. You can actually see me giving the live demo of Bang the Biebs embedded below. There is a cheeky surprise wrecking ball Easter Egg in the game that I am very happy to say went down incredibly well at demo time!

All in all, I’m glad I threw my other ideas out the window and went with “Bang the Biebs.” Not just because it was a good JavaScript learning experience, but also because I got to make good use of my LeapMotion. I used LeapJS, an excellent library available to bring the powers of LeapMotion into the browser. This library, alongside some jQuery and 400 lines of JavaScript are the foundations of “Bang the Biebs.”

If you own a LeapMotion, I urge you to put it to use. It’s a LOT of fun, and the possibilities are vast! I also urge you to try the game for yourself! Try getting as far as you can by hitting as many Biebs’ heads as possible, but also see what happens when you hit 5 Deadheads in a row. A just punishment, I’m sure you will agree!

JavaScript: Not That Bad

Shockingly, being my first JavaScript game, I actually came in second at the hack. I still stand by the idea that hacks that leave a lasting impression; be it through humour or sheer visual impact, are more likely to win! Although it was awesome to place at the event, MIDEM Hack was more of a learning experience for me. I wrote more JavaScript than I ever have before and have a newfound respect for the HTML5 canvas!

“Robin, I thought you hated JavaScript!?” A question that up until three days ago, I would have answered with a harsh “Damn right I do!” is now answered in a rather different way. The truth is, I like Javascript. The only reason I “hated” it was because, like many things, I’ve never given it the light of day. I’ve never given it a chance. The small amounts I’d written before were always encapsulated in pre-established poignance that I, for some stupid reason, had developed.