// Arrange Act Assert

Jag Reehal on Agile Development, ASP.NET MVC, Silverlight and all manner of good stuff

Having fun with jQuery UI

Posted on | November 10, 2009 | No Comments

As my nephew is coming round to visit in a couple of weeks, I want to create a game he could play.

The aim of the game is to match pictures to a word. The demo shown below uses the jQuery UI library which makes the dragging and dropping possible. If you want to know more check out the excellent draggable and droppable demos.

As this is just a demo the animals are hard coded so if you hit play again you will see the same animals.


Can you match the picture to the word?

Drag the picture to the box on the right



Cow



The demo uses the jQuery and jQuery UI libraries (hosted by Google) and the javascript shown below

$(function() {
    var result = $('#incorrectResult');
    var correctResult = $('#correctResult');

    $(".draggable").draggable({
        containment: '#gameContainer',
        revert: 'invalid',
        start: function(event, ui) {
            result.fadeOut(1000);
        },
        stop: function(event, ui) {
            if (!$(this).hasClass('correct')) {
                result.html("Try again that's a " + $(this).attr("id"));
                result.fadeIn(1000);
            }
        }
    });

    $("#droppable").droppable({
        accept: '.correct',
        drop: function(event, ui) {
            $(".draggable").draggable('disable');
            correctResult.fadeIn(1000);
            correctResult.prepend('Well done! You found the ' + ui.draggable.attr('id') + ' ');
        }
    });

    $("#playAgain").click(function() {
        location.reload(true);
    });
});

The html used to create the game looks like this

<div id="gameContainer">
    <div id="gameTitle">Can you match the picture to the word?</div>
    <p id="instructions">Drag the picture to the box on the right</p>
    <div id="items">
        <img class="draggable correct" id="Cow" src="http://www.arrangeactassert.com/wp-content/themes/resources/picturewordgame/cow.png" /><br />
        <img class="draggable" id="Pig" src="http://www.arrangeactassert.com/wp-content/themes/resources/picturewordgame/pig.png" /><br />
        <img class="draggable" id="Sheep" src="http://www.arrangeactassert.com/wp-content/themes/resources/picturewordgame/sheep.png" />
    </div>
    <div id="droppable">
        <p id="itemName">Cow</p>
    </div>
    <div id="results">
        <div id="correctResult">
            <input id="playAgain" type="button" value="Click here to play again" />
        </div>
        <div id="incorrectResult" />
    </div>
</div>

Yes the html and javascript won’t win any awards, the fact it works in a blog post is good enough for me ;)

What’s next?

To begin with I will create a version of the game using ASP.NET MVC, jQuery and jQuery UI. This will look like demo shown in this post with additional functionality to randomise the pictures.

Then I will create a version of the game using Silverlight.

Once this is complete I will refactor both solutions to share as much code as possible. I’m assuming RIA services is the tool of choice but we will see.

After that maybe (way in the future) I might attempt to write this game for the Android platform and take advantage of touch screen mobile phones. I have never developed an application before so this should be an interesting challenge.

Category: jQuery, jQuery UI

Comments

Leave a Reply