jQuery Card Game – Serenity

Firefly Matching Card Game – jQuery and jQuery UI

Prerequisites

This is an advanced jQuery video covering drag/drop and multiple features of jQuery

Summary

Covers how the matching card game is created with Javascript, jQuery, HTML, and CSS. Demonstrates a matching game.

Video

Reference Materials

 

Code is available at http://jsfiddle.net/reaglin/h4wwrdo5/ 

 

Draggable Documentation – http://api.jqueryui.com/draggable/ 

Droppable Documentation – http://api.jqueryui.com/droppable/ 

Creating Javascript Objects – http://www.w3schools.com/js/js_object_definition.asp 

Creating Javascript Arrays – http://www.w3schools.com/js/js_object_definition.asp 

jQuery data method – http://api.jquery.com/jquery.data/ 

jQuery appendTo method – http://api.jquery.com/appendto/ 

jQuery attr method – http://api.jquery.com/attr/ 

jsonData.json

 

Additional Information

 

The techniques shown here can be easily simplified to easily create any type of matching game or quiz.

 

COP 4813 Lectures