This application is all about managing tasks. To begin with, click the 'create new task list' at the bottom. This then opens a panel in which the list can be named, and items inserted into it.

If logged in, changes are saved automatically so when you revisit the page, your previous settings remain, including the name and state of each task.

Click here to use

An interactive motorsport calendar. It contains events for 2011, and displays the status of each event - whether past, present or future - and highlights this in the interface.

For F1 events, there's also the option to view an archive of races from the BBC website's Classic F1 series.

Click here to use

A game created in JavaScript for your entertainment. Containing retro style glowing graphics - assuming you're using anything better than evil IE8, otherwise you don't get the pretty glows and nice rounded corners. This is an update of the last JavaScript Game I made - I said I'd update it at some point, and here it is. Runs much smoother, although visually I preferred the lighter background looking back, but that's just an easy CSS change.

The idea is to guide the ball through the holes to reach the bottom. The arrow keys, mouse, or a touch screen can be used to control the ball. It technically works on phones as it's not Flash based and widths are set as percentages, but it depends on your screen resolution and graphics provider as to how well it will work.

It heavily uses the jQuery animate tool, as well as the jQuery Rotate plugin, and took around 3 hours to make. The rows are generated randomly with PHP, so the difficulty can also vary slightly between refreshes. A difficulty trigger is activated when the ball reaches the bottom of the screen - when this happens, it speeds everything up as it assumes it has been going too slowly for the player until this point.

High scores are kept locally and per session, but in future it would easily be possible to have them saved in a database. Try it for yourself, it demonstrates itself better than I can explain in words!

Click here to use

A quick app to read RSS feeds from external sources and display them on the page. Three sample feeds are included as demos, along with the ability to add a fourth (which isn't saved).

When clicked, links are expanded to reveal the additional content contained in the feed, as well as a link to the original article. Any images in the feed are displayed directly in the page with styling to prevent them taking over the screen.

Click here to use

A web-based "instant" messaging system - not quite instant because there's a 1.5 second delay while checking for data, since browsers don't have push facilities to be told to retrieve data from the server.

This app requires registration, and from there you can add friends to talk to (assuming they're already registered). An upload function is available to share photos and files, which are then displayed in the page, as well as recent messages. The option to view the past week or day's worth of chat with one particular friend is available, along with email notifications.

It works by sending a request to the server to detect whether an update to a chat has been posted. If it has, the data is then retrieved and instantly animated into the chat window. It's really much more clever than I can put into words - give it a try!

Click here to use

I've just uploaded this simple javascript game: Play here.

The idea is that you move the ball through the gates before the screen closes in on you. Been done many times before, but I wanted to see if I could do it using JavaScript rather than the usual way of creating web browser based games - by using Flash.

Because there's no 'on collision' event that I'm aware of (although I have just discovered gameQuery, which may have helped me, but I haven't looked into it yet), I had to simulate collisions. Each row is the same height and the random row lengths pre-processed by the server and therefore accessible by the JavaScript. This meant that I could calculate an x and a y coordinate of the holes - and so if the ball's current position matches a hole, it starts the drop animation to the next level, and moves on to the next hole.

For motion, it's mostly performed using the animate() jQuery command. To be able to apply separate vertical and horizontal motion to the ball, the image for the ball was placed inside a 'playerX' div, which in turn was placed inside a 'playerY' div. This meant that I could apply a drop animation without losing the horizontal momentum already gathered. Initially, it didn't play well as it stopped its horizontal motion on a fall, which wasn't very smooth.

A detection function to test if the ball is on top of a hole runs every 50 milliseconds, so producing a frame rate of 20fps depending on browser (although the game scroll and player motion should be smoother than this as they're not tied to the hole detection function). Within this function however, I added a jQueryRotate plugin, which was very useful. Depending on whether the ball is moving left or right, it updates the rotation value every 50 milliseconds.

Finally, a scoring system was added along with the ability to post high scores. There are many ways of cheating to log an impossible score, but I wasn't overly concerned about this as it wasn't the main principle of the task.

Anyway, have a play.

I've been working on this extension to my website for the last few days, and it's ready to be viewed and played around with. It's an online version of Blackjack, created with PHP, Javascript and MySQL, and can be played as single or multiplayer - to test out the multiplayer, just open another browser window and be another player. The aim is to get a hand as close to 21 without going over, and to beat the dealer (not the other players - each individual player just plays against the dealer).

Aces count as one or eleven, whichever is better for you - this is taken account of in the game and adds the higher value as long as it won't make you go over 21. A 2 is worth 2, 3 worth 3, etc, and face cards are worth ten.

It requires cookies and obviously Javascript to be enabled. The Javascript is the main workings of the game, calling a PHP function to check the SQL database when updates have been made, then refreshing section of the screen in an Ajax style way, allowing other sections (such as the chat) to continue independently without interruption. An auto kick function is added, so that if any player leaves without clicking the leave button, the game doesn't just cripple to an indefinite halt - players can then return when they're back.

One of the most difficult challenges was working out how to accommodate new players, and also those that leave without destroying the game. I decided to add a value to the database when a new player joins, and have them wait until the next deal, then update them into the game. A player leaving caused more problems, but I resolved this by first adding the timer so they have to leave if they don't actually click the leave button, then if they do click to leave, it takes the player's cards with them. Initially, it meant that a leaving player transferred their cards onto the next player, which would be a bit harsh if they were a bad hand. So this player is still 'in' the game even after leaving, even though their cards and score aren't visible, a message is noted that a player has left, and they are then removed at the next round.

I then added a chat function, since the server was already calling a PHP script every couple of seconds, it may as well check the file size of the saved chat, then update if it's larger. A javascript function to then force the div to automatically scroll to the bottom (and so the updated messages) is also called when loading new data. The line required, for anyone that may find this useful (it took me quite a bit of Googling, hopefully you'll fare better), was:

Where chat_div is your div ID.

It doesn't include all of the rules of Blackjack just yet - but enough to form a functioning game. Features such as splitting a hand, betting and keeping track of high scores will come in the future.

Try it out, and let me know what you think, and if you find any errors. I'm aware of quite a few ways to cheat, but I left some of the ways I thought of in there as they were handy debuggers - I'll remove them when I come to finish everything off.

www.adamgleeson.co.uk/blackjack

This post is now out of date, but I've kept it in for future reference.

I've now redesigned my portfolio page, and as a result there's no space for this little feature, so I'm going to write about it instead and give the example.

It's a handy way of having extra interaction on the web page, by allowing a nice little animation every time a link is clicked. I was using a jQuery plugin to load content dynamically, and it gave me the idea that because the rest of the page outside of the target div is static, it would be good to have a small animation. So each time the page swapped from one section to another, this little guy pressed the button.

The Javascript used is pretty much the same as that found at Permadi. Just copy that code and stick it in some 'script' tags:



This allows the browser to communicate with Flash. Next, it needs to be told what to tell Flash once the command is given. In my case, my Flash file was looping between frames 60 and 111, once the initial part of the animation (lasting 60 frames) had finished, so I wanted a 'gotoAndPlay(112) command:



Note that I have called the Flash file 'robot', and this needs to be defined above. To display the



This method of displaying Flash is probably quite out of date, but it works and doesn't produce errors as far as I know.

Finally, add a button, just a standard 'a' link and include the onClick action:



And that's it! Your Flash movie should now gotoAndPlay frame 112. You just have to be careful to design your animation so that if someone goes crazy and keeps clicking, it still looks OK. And if it's in a loop as mine is, that it doesn't matter from which frame of the animation it jumps from. You should add in an extra bit to the Flash telling it to trigger a certain animation once it reaches the happy frame though. Now if only Flash worked on Apple devices...

Credit for the code goes to Permadi.com.

Click me!