In the age of multiple platforms and smartphones there is one definite feature which is supported by all – a browser. Running with this idea is the latest innovation in browser gaming – the gaming engine.

Impact – HTML5 Canvas & JavaScript Game Engine

Impact is, it claims, the “most awesomest way to create even more HTML 5 games” and at first glance, you’d be hard pressed to argue against that. The slick website demonstrating the engine shows a game created using the engine running on browsers both on desktops and on mobile. It also comes with its own dedicated level editor so people who are more design orientated are looked after as well.

The engine’s greatest strength is its well written and nicely presented documentation – with examples of each class in action. All this for just $99 is a steal – however there are free alternatives out there…

LimeJS HTML5 Game Framework

Available via Github, LimeJS is entirely free and open source – allowing you to build fast and (more importantly) native-experience games for multiple platforms. It has a decent community around it, however it does seem to suffer from the “too many cooks” issue and the documentation is poorly presented – offering little more than is absolutely necessary. As a free alternative, however, you’d be hard-pressed to find anything better suited for HTML5 game development.

JawsJS

More of an individual’s attempt to work with HTML5 canvas, JawsJS definitely has some legs. It has since been extended beyond the canvas and the developer promises plenty of updates in the following few months. Definitely one to watch.

GameQuery

Perhaps the one that interests me the most, GameQuery attempts to create a gaming engine based around the already fantastic jQuery framework. The developers are specifically promising that it will be easy, quick and stick to the jQuery philosophy. As an avid jQuery fan myself, this one has me excited. Supporting solid gaming features such as collision detection and animation and promising that beginners can develop basic 2D games – this could do for game development what jQuery did for carousels.

The latest addition to my ever growing list of projects on Github is Blankit – a jQuery plugin for adding target=”_blank” to any matching elements. This was done to avoid the issue of creating a long, content heavy, page and having to go through and manually add target=”_blank” to each a element. This plugin was also contributed to by Seb Pollard, the technical ninja that he is.

Check it out: on github or try out the demo.

The plugin takes 3 options allowing you to customize it to suit your needs; same domain links can be included as can list elements, and previously set target attributes can be overridden.

How to use

Options

Check it out & tell me your thoughts. Don’t forget you can also fork it and use it however you want. There is also more information on the plugin at plugins.jquery.com

If you enjoyed this post, why not subscribe to my feed or check me out on Twitter.

Over the past few days, I’ve been throwing together a few examples of HTML5/CSS3 and what can be done. Right now, I’ve built demonstrations of :

• Shapes
• Animation
• Local Storage
• Mobile (using jQuery mobile)

As with most fancy HTML5/CSS3 stuff, the latest browsers are required so those of you with IE6/7 please consider upgrading your browser.

The code for these is available on Github so feel free to pull and use wherever/whenever.

When looking for a jQuery plugin, it can often get a bit tedious scrolling through page after page of scrollers, carousels and crop tools. At one point I ran into an article named “28 Useful JQuery Sliders You Need To Download”. Twenty-eight?! Blimey.

So, to prove to myself that there was more to jQuery than content scrollers, I did some Google’ing and found 6 really unique jQuery plugins/extensions that are worth taking a look at.

6 – Face Detection (http://facedetection.jaysalvat.com/)

Brilliant jQuery tool for scanning pictures for faces and returning the locations. Fantastic when applied with a user membership or avatar system, allowing you to extend or improve your cropping tool.

5 – jMapping (http://vigetlabs.github.com/jmapping/)

jQuery extension for easily adding Google Maps to any page with extensive customisation options. Also very good at degrading gracefully. If you’re rolling out a store locator this could be a better alternative than using any WordPress plugins which are somewhat limited without hacking.

4 – JSZip (http://jszip.stuartk.co.uk/)

Nothing ground breaking here, just a useful library allowing you to compress and zip up files for download using the jQuery framework.

3 – Colortip (http://bit.ly/9o5QS5)

Tool tips are a fantastic tool for adding usability to a site, which may perhaps be confusing without.

2 – Fancy Sliding Form (http://bit.ly/bnkYUG)

Any library that makes it easier to deal with complex forms is worth the time to look. This makes it a lot simpler to create a tidy, one page form.

1 – Lettering (http://letteringjs.com/)

If you’re sick of seeing the same old Tahoma & Arial’s throughout the web, then this might be the plug-in for you. Taking the idea of custom fonts with CSS, this library offers down to the letter control over your typography and some of the examples on their site are breathtaking.

With CSS3/JavaScript you can do all kinds of cool looking things:

• CSS3 Transformations
• CSS3 Polaroids
• Starry Night in CSS3 – Scrolling Backgrounds
• Analogue Clock
• 3D Cube
• DJ Deck in CSS3 and jQuery
• jPong – Pong build in jQuery

(most of these work best in the latest browsers (Chrome, Safari 5, Firefox))

As you can see, you don’t have to limit yourself to building interactive animations in Flash that won’t work on iPhone/iPad, or having to build a platform-locked application (like an app on the app store). But remember:

“Similar to Flash, just because you can do it, doesn’t mean you always should.” @kuatofkuat

Finally, the guys who created jQuery (our lovable Javascript library!) have only gone and created jQuery Mobile, which will allow you to build a website – once – and it will work and look good on all mobile devices.

Check it out at http://jquerymobile.com/ and the demos http://jquerymobile.com/demos/1.0a1/ (try on any mobile device)

Quick Tips is a series of posts designed to show some quick html, css and php tips that you may find useful in your every day work or personal projects.

The jQuery function allows for a second, lesser known about, parameter which tells the function to only search for the element within the context of the given element.

List item 1


List item 2

In this scenario the selector will navigate through the menu unordered list and select the list item with “List item 2″ in it, having never seen the other unordered list.

Instead of having to work its way through the entire DOM, containing perhaps several hundred of the same element, the function can search within the smaller search area and provide results faster and more accurate.


If you wish to submit a quick tip to this section please contact me..