Production Journal:
The Process of Creating a jQuery Drag-and-Drop Game

By Jessica M. Wilson

Any code in this journal will be written in yellow.

In this game, the player is presented with ten cat images and ten cards. Each card has a statement and only one cat can be matched to each card.

Before I began coding, I researched the various types of cat fur colors and patterns. That is how I came to the grand total of eleven (11) cats, though twelve (12) were possible (the only pattern not included is the tabico (or tabby-calico)). I may include it in a later iteration of this game.

I then made a quick sketch of a stylized cat in Adobe Photoshop and used that as a reference to create a vector outline in Adobe Illustrator. Beneath the outline, on separate layers, I created each fur pattern by using an overall fill and then drawing the patches, stripes, and spots using the pen tool. The tabbies were the toughest to make.











The player is to drag the cat onto the card with the matching details. Once the cat is dropped, it cannot be dragged again, and the name of the cat pattern/color is revealed.

First step: Consider how drag and drop is accomplished using jQuery. This project required that I download jQuery and jQuery-ui and link to them in the html document.

Initially I only tested two instances of drag-and-drop, using #cat1" and "#cat2" as .draggable elements and "#target 1" and "#target 2" as .droppable elements.

The first few steps were simple: make the cats draggable and make them snap to the available boxes.

The problems that followed:
1. The cats could be exchanged between boxes
2. The cats could be dragged again
3. The cats could snap to anywhere inside the targets
4. The cats were set to their default z-index, so they could be dragged over or underneath the other cat images, depending on their position in the html

Solutions:
1. Each .droppable element was made to accept only one .draggable element (e.g., "#target1" only accepts "#cat1")
2. When the .draggable element is matched with a .droppable, the drop: function is set to disable the .draggable element (e.g., ui.draggable.draggable({disabled: true});)
3. Inside the drop: function is another line of code that sets the cat image to snap to the center of the .droppable element (e.g., ui.draggable.position( { of: $(this), my: 'center', at: 'middle' } );)
4. Inside the .draggable element, the zIndex property was specified to 100, so each item that is dragged will always appear on top of everything else

Next couple of steps: create labels for each cat; hide them upon load and show after drop

The code to hide the labels is simple. I simply call each element by ID and use .hide(); (e.g., $("#name1, #name2").hide();).

Showing the labels again is just as simple using the drop: function (e.g., under the "#target1" drop: function... $("#name1").show();).

Problems:
1. The labels are visible upon load, hiding after about a half-second or longer--they are legible if the page is continuously refreshed

Solutions:
1. Labels are initially hidden using a ".hide" class and "display: none" in the css. Upon load, jQuery hides the elements (using $(".names").hide(); and also using $(".names").removeClass(".hide"))

Finally, I would like to utilize a counter in the code so that once a specified variable reaches ten (10), an if statement could be used to trigger a success message when the player has matched all ten cats to their respective cards.

For example: if (counter = 10){ alert("That's right!"); }

Problems:
1. Inserting var and a for loop have proven unsuccessful
2. I do not know what to tell the system to count
3. I do not know how to initiate the counting process--I assume it will be a drop: function

Solutions:
1. The variable (n) was placed at the top of the document (below $(function(){) as var n = 0;. A for loop was not necessary
2. The system was told to count any dropped object with the class ".cats"
3. Initiating the counting process was, as I assumed, a drop: function. Using an if statement, the system would count any droppable with the ".cats" class

E.g., (inside the drop: function (event, ui) { if($(ui.draggable).hasClass("cats")){ $( this ) n++; }

Now that the primary code is working and the game is fully functional... One problem persists. Once the player drops the final cat, though the code executes and the label is shown, there is no delay, so the player does not see the label for the last cat they dropped.

Solutions:
- I implemented a "submit" button that shows on the same condition as the bonus items did before
(if n == 10){ $("#submit").show(); }

- Bonus items were moved to their own page and are shown upon clicking the "submit" button, which redirects to win.html

A "Play Again" button has been added to the bonus page. On click, the button returns the player to index.html to play again.

HTML execution is this: <div id="replay"><a href="index.html"><button>Play Again</button></a></div>

---

What I would like to do next is expand the code in this game so that the mechanism isn't a simple "guessing game" in which the incorrect option is reverted. I would like to implement a "right" and "wrong" answer mechanism. If the player has so much as a single wrong answer, the submit button (which should still appear on completion) would lead the player to a page that tells them to "Try Again."

This will likely be accomplished by adding a new class after the cat is dropped on the target, using an if/else statement to determine whether the new ".right" class is added and, perhaps, the original ".cats" class is removed.

Implementing this, so far, has not been so straightforward. Either the code will need to count the length of determined classes (so, $(.right).length);) or use two variables (var r = 0;, var n = 0;) in which r is the new".right" class and "n" is still the ".cats" class.

I will update this journal as solutions to the new implementation are found.