Jaspaul.com: Javascript drag and drop game

home » tutorial » Javascript drag and drop game

Tutorial on free Drag and drop match game - (pure XHTML & W3C standards)

Jaspaul's drag and drop game

Release date: Version 2 - 16/11/2007
Author: Jaspaul Aggarwal

The 'Card drag and drop match' game is upgraded version of the ever so popular interactive puzzle used at AOL to create interactive games such as the 'think you know your wags' page. The latest version developed by me, makes the game even cleaner, easier without sacrificing strict validation rules of any Web2.0 XHTML site.

If you like this script or have any feedback, I would love to hear from you. Please do post a comment at the bottom of the page and let me know below the site yo used it on and how you find it.

For your users

Your user will get added interactivity and amusement from your site. The enjoyable game tests the knowledge of the user to see if they can match the pictures and pair them up.

The game can be interesting and bring your articles, stories, homepage or bloggs to life. Maybe you can even just have it sitting on a simple stand alone page.

For you (the web owner/developer)

The quickest and easiest way to create a game for your site with minimum fuss. Whats more, the game has the following advantages:

Pure W3C/SEO Standards: My passion for web developing means I have high targets, one of which means all my work has to comply with all World wide web standards and validate in XHTML. This means the game is developed so the only coding that is visible in the page is clean HTML. Thats right, the entire Javascript and CSS gets stored in external files which are then cached on the site visitor's computer.
Compatibility: Coded in pure xhtml, javascript and css. That means no need for heavy flash installation and files and further compatibility with devices such as mobiles, palm tops, dialup workstations, consoles etc.
Accessibility: Minimum coding and use of alt tags mean the game is accessible and easy to use for all users
Automated: Yep. I have coded the script so it does all the main hard work and you don't have to. The script will cleverly run through your html, setup rest of the game and even randomise the pictures every time a user visits the page.
Easy: This has been developed so that the website owner can add this game in a easy manor any website. Just 6 simple steps from the tutorial below, and away you go!!

Example of drag and drop game

I was very Angry
I was soo Happy
Shame I feel Sad

Easy tutorial & instructions

Add the following javascript files and stylesheet into the head of the html page. Please feel free to customise as freely as you like:

<script src="http://www.jaspaul.pwp.blueyonder.co.uk/script/scriptaculous/prototype.js" type="text/javascript"></script>
<script src="http://www.jaspaul.pwp.blueyonder.co.uk/script/scriptaculous/scriptaculous.js" type="text/javascript"></script>
<style media="screen" type="text/css">
<!--
#jas_draggame * { font-family:arial; font-size:12px; }
#jas_draggame #jcards1 { background-color:#FFF; padding:5px; clear:both; list-style: none; margin-left:0; list-style-position:inside; }
#jas_draggame #jcards1 li { background-color:#3E1DE6; border:2px outset #666; margin:5px; padding:0px; width:104px; height:104px; max-width:104px; max-height:104px; float:left; }
#jas_draggame #jcards1 li img { cursor:pointer; }
#jas_draggame #jcards2, #jas_draggame #jcards3 { list-style:none; margin:0px; padding:0px; list-style-position:inside; display:block; clear:both; float:none; margin-left:4px; }
#jas_draggame #jcards2 li {
width:104px; padding:104px 0px 0px 0px; border:2px solid #666; float:left; margin:5px; background-repeat:no-repeat; background-position:bottom left; background-color:#3E1DE6; }
#jas_draggame #jcards3 li {
border:solid #8DAAB8 1px; margin:6px; padding:0px; text-align:center;
float:left; visibility:hidden; }
#jas_draggame #jcards3 p {margin:0px; display:block; }
#jas_draggame #jcards3 p strong { display:block; }
#jas_draggame #jcards2 li img, #jas_draggame #jcards1 li img, #jas_draggame #jcards3 li img { width:104px; height:104px; vertical-align:bottom; }
#jas_draggame .spacer {clear:both;}
-->
</style>

Create a 'div' html block, with the id 'jas_draggame'
```
<div id="jas_draggame">

</div>
```

Inside this 'div' block, create a list with the id 'jcards1'. Assign as many pictures as you wish, as long each picture is wraped within a 'li' tag:

<ul id="jcards1">
<li><img src="http://www.jaspaul.pwp.blueyonder.co.uk/images/drag/53t.png" alt="Guess my reaction?" title="Guess my reaction?" /></li>
<li><img src="http://www.jaspaul.pwp.blueyonder.co.uk/images/drag/54t.png" alt="Guess my reaction?" title="Guess my reaction?" /></li>
<li><img src="http://www.jaspaul.pwp.blueyonder.co.uk/images/drag/55t.png" alt="Guess my reaction?" title="Guess my reaction?" /></li>
<li><img src="http://www.jaspaul.pwp.blueyonder.co.uk/images/drag/56t.png" alt="Guess my reaction?" title="Guess my reaction?" /></li>
<li><img src="http://www.jaspaul.pwp.blueyonder.co.uk/images/drag/57t.png" alt="Guess my reaction?" title="Guess my reaction?" /></li>
</ul>

Create another list but with the id 'jcards2'. You must add the same quantity of pictures as before and they should match up in the correct order to the previous set of pictures you had just added:

<ul id="jcards2">
<li><img src="http://www.jaspaul.pwp.blueyonder.co.uk/images/drag/65t.png" alt="angry" /></li>
<li><img src="http://www.jaspaul.pwp.blueyonder.co.uk/images/drag/66t.png" alt="happy" /></li>
<li><img src="http://www.jaspaul.pwp.blueyonder.co.uk/images/drag/67t.png" alt="sad" /></li>
<li><img src="http://www.jaspaul.pwp.blueyonder.co.uk/images/drag/68t.png" alt="serious" /></li>
<li><img src="http://www.jaspaul.pwp.blueyonder.co.uk/images/drag/69t.png" alt="pear" /></li>
</ul>

Create a third and final list with the id 'jcards3'. This list represents the ending if the winner has found the correct pair for the pictures. Again, just as before, you must put in teh exact same quantity of pictures and they should match the order of the pictures you have just added:

<ul id="jcards3">
<li><img src="http://www.jaspaul.pwp.blueyonder.co.uk/images/drag/58t.png" alt="angry face" /> <p>I was very <strong>Angry</strong></p></li>
<li><img src="http://www.jaspaul.pwp.blueyonder.co.uk/images/drag/59t.png" alt="happy face" /> <p>I was soo <strong>Happy</strong></p></li>
<li><img src="http://www.jaspaul.pwp.blueyonder.co.uk/images/drag/60t.png" alt="sad face" /> <p>Shame I feel <strong>Sad</strong></p></li>
<li><img src="http://www.jaspaul.pwp.blueyonder.co.uk/images/drag/61t.png" alt="serious face" /> <p>I am very <strong>Serious</strong></p></li>
<li><img src="http://www.jaspaul.pwp.blueyonder.co.uk/images/drag/62t.png" alt="winking face" /> <p>I was giving a <strong>Wink</strong></p></li>
</ul>

Lastly, add the following javascript which will randomise the pictures and setup the game

<script src="http://www.jaspaul.com/file_download/17/drag_script.js" type="text/javascript"></script>

This is great. I work as a teacher for a infant school and have set this up as a game to match shapes. The kids love it and it a excellent way to learn.

Keep up the good work!!

by Priyan Mahmood | Dec 6, 12:50 PM

Name
E-mail
http://
Message