javascript - JS Drag and Drop (Match) with letters -
i'm working drag , drop option , cannot make work letters (match works numbers). give hint how letters?
thank you.
© matt doylle
http://codepen.io/anon/pen/zpkqjo
<script type="text/javascript"> var correctcards = 0; $( init ); function init() { // hide success message $('#successmessage').hide(); $('#successmessage').css( { left: '580px', top: '250px', width: 0, height: 0 } ); // reset game correctcards = 0; $('#cardpile').html( '' ); $('#cardslots').html( '' ); // create pile of shuffled cards var numbers = [ 'a', 2, 3, 4, 5, 6, 7, 8, 9, 10 ]; numbers.sort( function() { return math.random() - .5 } ); ( var i=0; i<10; i++ ) { $('<div>' + numbers[i] + '</div>').data( 'string', numbers[i] ).attr( 'id', 'card'+numbers[i] ).appendto( '#cardpile' ).draggable( { containment: '#content', stack: '#cardpile div', cursor: 'move', revert: true } ); } // create card slots var words = [ 'a', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten' ]; ( var i=1; i<=10; i++ ) { $('<div>' + words[i-1] + '</div>').data( 'string', ).appendto( '#cardslots' ).droppable( { accept: '#cardpile div', hoverclass: 'hovered', drop: handlecarddrop } ); } } function handlecarddrop( event, ui ) { var slotstring = $(this).data( 'string' ); var cardstring = ui.draggable.data( 'string' ); // if card dropped correct slot, // change card colour, position directly // on top of slot, , prevent being dragged // again if ( slotstring == cardstring ) { ui.draggable.addclass( 'correct' ); ui.draggable.draggable( 'disable' ); $(this).droppable( 'disable' ); ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } ); ui.draggable.draggable( 'option', 'revert', false ); correctcards++; } // if cards have been placed correctly display message // , reset cards go if ( correctcards == 10 ) { $('#successmessage').show(); $('#successmessage').animate( { left: '380px', top: '200px', width: '400px', height: '100px', opacity: 1 } ); } } </script>
var correctcards = 0; $( init ); function init() { // hide success message $('#successmessage').hide(); $('#successmessage').css( { left: '580px', top: '250px', width: 0, height: 0 } ); // reset game correctcards = 0; $('#cardpile').html( '' ); $('#cardslots').html( '' ); // create pile of shuffled cards var numbers = [ 'a', 'b','c', 'd', 'e', 'f', 'g', 'h', 'i', 'j' ]; numbers.sort( function() { return math.random() - .5 } ); ( var i=0; i<10; i++ ) { $('<div>' + numbers[i] + '</div>').data( 'string', numbers[i] ).attr( 'id', 'card'+numbers[i] ).appendto( '#cardpile' ).draggable( { containment: '#content', stack: '#cardpile div', cursor: 'move', revert: true } ); } // create card slots var words = ['a', 'b','c', 'd', 'e', 'f', 'g', 'h', 'i', 'j' ]; ( var i=1; i<=10; i++ ) { p=[ 'z','a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j' ]; $('<div>' + words[i-1] + '</div>').data( 'string', p[i] ).appendto( '#cardslots' ).droppable( { accept: '#cardpile div', hoverclass: 'hovered', drop: handlecarddrop } ); } } function handlecarddrop( event, ui ) { var slotstring = $(this).data( 'string' ); var cardstring = ui.draggable.data( 'string' ); // if card dropped correct slot, // change card colour, position directly // on top of slot, , prevent being dragged // again if ( slotstring == cardstring ) { ui.draggable.addclass( 'correct' ); ui.draggable.draggable( 'disable' ); $(this).droppable( 'disable' ); ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } ); ui.draggable.draggable( 'option', 'revert', false ); correctcards++; } // if cards have been placed correctly display message // , reset cards go if ( correctcards == 10 ) { $('#successmessage').show(); $('#successmessage').animate( { left: '380px', top: '200px', width: '400px', height: '100px', opacity: 1 } ); } }/* add margin page , set default font , colour */ body { margin: 30px; font-family: "georgia", serif; line-height: 1.8em; color: #333; } /* give headings own font */ h1, h2, h3, h4 { font-family: "lucida sans unicode", "lucida grande", sans-serif; } /* main content area */ #content { margin: 80px 70px; text-align: center; -moz-user-select: none; -webkit-user-select: none; user-select: none; } /* header/footer boxes */ .widebox { clear: both; text-align: center; margin: 70px; padding: 10px; background: #ebedf2; border: 1px solid #333; } .widebox h1 { font-weight: bold; margin: 20px; color: #666; font-size: 1.5em; } /* slots final card positions */ #cardslots { margin: 50px auto 0 auto; background: #fff; } /* initial pile of unsorted cards */ #cardpile { margin: 0 auto; background: #ffd; } #cardslots, #cardpile { width: 910px; height: 120px; padding: 20px; border: 2px solid #333; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; -moz-box-shadow: 0 0 .3em rgba(0, 0, 0, .8); -webkit-box-shadow: 0 0 .3em rgba(0, 0, 0, .8); box-shadow: 0 0 .3em rgba(0, 0, 0, .8); } /* individual cards , slots */ #cardslots div, #cardpile div { float: left; width: 58px; height: 78px; padding: 10px; padding-top: 40px; padding-bottom: 0; border: 2px solid #333; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; margin: 0 0 0 10px; background: #fff; } #cardslots div:first-child, #cardpile div:first-child { margin-left: 0; } #cardslots div.hovered { background: #aaa; } #cardslots div { border-style: dashed; } #cardpile div { background: #666; color: #fff; font-size: 50px; text-shadow: 0 0 3px #000; } #cardpile div.ui-draggable-dragging { -moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8); -webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8); box-shadow: 0 0 .5em rgba(0, 0, 0, .8); } /* individually coloured cards */ #card1.correct { background: orange; } #card2.correct { background: orange; } #card3.correct { background: orange; } #card4.correct { background: orange; } #card5.correct { background: orange; } #card6.correct { background: orange; } #card7.correct { background: orange; } #card8.correct { background: orange; } #card9.correct { background: orange; } #card10.correct { background: orange; } /* "you did it!" message */ #successmessage { position: absolute; left: 580px; top: 250px; width: 0; height: 0; z-index: 100; background: #dfd; border: 2px solid #333; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; -moz-box-shadow: .3em .3em .5em rgba(0, 0, 0, .8); -webkit-box-shadow: .3em .3em .5em rgba(0, 0, 0, .8); box-shadow: .3em .3em .5em rgba(0, 0, 0, .8); padding: 20px; }<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script> <body> <div id="content"> <div id="cardslots"> </div> <div id="cardpile"> </div> <div id="successmessage"> <h2>you did it!</h2> <button onclick="init()">play again</button> </div> </div> </body>
Comments
Post a Comment