Curved and Sloped Tiles in JavaScript Platform Games

Demo: http://nicolahibbert.com/demo/javascript-tile-map-editor/ If you’ve been reading along recently, you’ll know that HTML5 Breakout is at a stage where I’m not entirely embarrassed by it, and I’m making a start on my next JavaScript game. I’ve had an idea for a 2d…

HTML5 Canvas Breakout Game

Edit: 23/08/12 Check out the newest version: Brickout! Some time last year, I started learning the HTML5 Canvas API. One of the most popular tutorials for this was (and still is) Bill Mill’s Canvas Tutorial, where you build up a basic version of Breakout step by step.…

Portfolio Redesign

The redesign of my portfolio has finally gone live, I hope you like it! I wanted something a bit cleaner looking than the old site – I fiddled around for ages in Photoshop, but I’m a really harsh judge of my own work (I never feel like it’s good…

LiteAccordion: A Horizontal Accordion Plugin for jQuery

Options These are the default settings for the liteAccordion plugin: containerWidth : 960, // fixed (px) containerHeight : 320, // fixed (px) headerWidth: 48, // fixed (px) activateOn : 'click', // click or mouseover firstSlide : 1, // displays slide (n) on page load slideSpeed : 800, // slide animation speed onTriggerSlide : function() {}, // callback on sl…

Form Widgets with jQuery UI

Hello!  In this tutorial we’re going to (finally!) finish the HTML5 contact form we’ve been developing.  Just a quick recap – in part one we went over the HTML markup and discussed the new types of input element;  in part two we prettied the form up a little using…

jQuery Form Validation

In this tutorial, we’ll continue developing the HTML5 form that we’ve been working on.  We’re going to import jQuery and the jQuery Validate plugin into our page, so that we can validate any data entered into the form.  In the next part, we’ll work on propping…

Images and CSS3 Gradients

Webkit has a range of css3 properties for working with alpha transparent masks (see webkit.org). Firefox doesn’t support these yet, but if you want to implement a basic linear or radial (non-alpha) gradient mask, you can fake it by blending a gradient with the background colour of your…