Thursday, 4 September 2014

CARD GAMES WITH DRAG AND DROP WITH JQUERY AND HTML

CARD GAMES WITH DRAG AND DROP WITH JQUERY AND HTML



-------------------------------------------------------------------------------------------------------------
COPY AND PASTE BELOW CODE:
READ MORE:
http://fbgadgets.blogspot.co.uk/2014/09/DragAndDropHtmlGame.html
http://fbgadgets.blogspot.co.uk/2014/09/drag-and-drop-html-game_4.html
http://fbgadgets.blogspot.co.uk/2014/09/DragAndDropHtmlGameImages.html
http://fbgadgets.blogspot.co.uk/2014/09/DragAndDropHtmlGame.html
http://fbgadgets.blogspot.co.uk/2014/09/drag-and-drop-with-jquery-and-html.html
http://fbgadgets.blogspot.co.uk/2014/09/drag-and-drop-images-above-box-to-below.html
http://fbgadgets.blogspot.co.uk/2014/09/drag-and-drop-images-above-box-to-below_5.html
-------------------------------------------------------------------------------------------------------------


<!doctype html>
<html lang="en">
<head>

<title>A jQuery Drag-and-Drop Number Cards Game</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

<style>
/* Add some margin to the page and set a default font and colour */
body {
margin:30px;
font-family:"Georgia",serif;
line-height:1.8em;
color: #333;
}
/* Give headings their 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 for final card positions */
#cardSlots {
margin:50px auto 0 auto;
background: #ddf;
}
/* The 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 and 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:red;
}
#card2.correct {
background:brown;
}
#card3.correct {
background:orange;
}
#card4.correct {
background:yellow;
}
#card5.correct {
background:green;
}
#card6.correct {
background:cyan;
}
#card7.correct {
background:blue;
}
#card8.correct {
background:indigo;
}
#card9.correct {
background:purple;
}
#card10.correct {
background: violet;
}
/* "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;
}
</style>


<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>

<script type="text/javascript">

var correctCards = 0;
$( init );

function init() {

  // Hide the success message
  $('#successMessage').hide();
  $('#successMessage').css( {
    left: '580px',
    top: '250px',
    width: 0,
    height: 0
  } );

  // Reset the game
  correctCards = 0;
  $('#cardPile').html( '' );
  $('#cardSlots').html( '' );

  // Create the pile of shuffled cards
  var numbers = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];
  numbers.sort( function() { return Math.random() - .5 } );

  for ( var i=0; i<10; i++ ) {
    $('<div>' + numbers[i] + '</div>').data( 'number', numbers[i] ).attr( 'id', 'card'+numbers[i] ).appendTo( '#cardPile' ).draggable( {
      containment: '#content',
      stack: '#cardPile div',
      cursor: 'move',
      revert: true
    } );
  }

  // Create the card slots
  var words = [ 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten' ];
  for ( var i=1; i<=10; i++ ) {
    $('<div>' + words[i-1] + '</div>').data( 'number', i ).appendTo( '#cardSlots' ).droppable( {
      accept: '#cardPile div',
      hoverClass: 'hovered',
      drop: handleCardDrop
    } );
  }

}

function handleCardDrop( event, ui ) {
  var slotNumber = $(this).data( 'number' );
  var cardNumber = ui.draggable.data( 'number' );

  // If the card was dropped to the correct slot,
  // change the card colour, position it directly
  // on top of the slot, and prevent it being dragged
  // again

  if ( slotNumber == cardNumber ) {
    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 all the cards have been placed correctly then display a message
  // and reset the cards for another go

  if ( correctCards == 10 ) {
    $('#successMessage').show();
    $('#successMessage').animate( {
      left: '380px',
      top: '200px',
      width: '400px',
      height: '100px',
      opacity: 1
    } );
  }

}

</script>

</head>

<body>

<div class="wideBox">
<h1>Drag-and-Drop with jQuery: Your Essential Guide</h1>
<h2>A Number Cards Game</h2>
</div>

<div id="content">
<div id="cardPile"> </div>
<div id="cardSlots"> </div>
<div id="successMessage">
<h2>You did it!</h2>
<button onclick="init()">Play Again</button>
</div>
</div>

</body>
</html>

-----------------------------------------------------------------------------------------------------------------------
HOW ADD IMAGES IN THIS GAME JUST REPLACE JAVA CODE
http://stackoverflow.com/questions/20978897/jquery-drag-and-drop-how-to-add-image-into-variable
-------------------------------------------------------------------------------------------------------------------- var numbers = [ 1, 2, 3, 4, 5, 6 ];
var imgs = [ '/images/1.gif','/images/2.gif','/images/3.gif','/images/4.gif','/images/5.gif','/images/6.gif' ];

 numbers.sort( function() { return Math.random() - .5 } );

 for ( var i=0; i<6; i++ ) {
$('<div><img  src="' + imgs[numbers[i] - 1] + '" alt="alt"/></div>').data( 'number', numbers[i] ).attr( 'id',         
   'card'+numbers[i] ).appendTo( '#cardPile' ).draggable( {
  containment: '#content',
  stack: '#cardPile div',
  cursor: 'move',
  revert: true
 } );

}
------------------------------------------------------------------------------------------------------------------------
HOW ADD IMAGES IN THIS GAME JUST REPLACE JAVA CODE
http://stackoverflow.com/questions/20978897/jquery-drag-and-drop-how-to-add-image-into-variable
--------------------------------------------------------------------------------------------------------------------


<!doctype html>
<html lang="en">
<head>

<title>A jQuery Drag-and-Drop Number Cards Game</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style>
/* Add some margin to the page and set a default font and colour */
body {
margin:30px;
font-family:"Georgia",serif;
line-height:1.8em;
color: #333;
}
/* Give headings their 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 for final card positions */
#cardSlots {
margin:50px auto 0 auto;
background: #ddf;
}
/* The 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 and 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:red;
}
#card2.correct {
background:brown;
}
#card3.correct {
background:orange;
}
#card4.correct {
background:yellow;
}
#card5.correct {
background:green;
}
#card6.correct {
background:cyan;
}
#card7.correct {
background:blue;
}
#card8.correct {
background:indigo;
}
#card9.correct {
background:purple;
}
#card10.correct {
background: violet;
}
/* "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;
}
</style>

<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>
<script type="text/javascript">

var correctCards = 0;
$( init );

function init() {

  // Hide the success message
  $('#successMessage').hide();
  $('#successMessage').css( {
    left: '580px',
    top: '250px',
    width: 0,
    height: 0
  } );

  // Reset the game
  correctCards = 0;
  $('#cardPile').html( '' );
  $('#cardSlots').html( '' );

  // Create the pile of shuffled cards
 var numbers = [ 1, 2, 3, 4, 5, 6 ];
var imgs = [ 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPcEWSJ3Nu4Qr6VsIhzW_mEJ1XNzv5U_TN-vBMTn0p-hodEF3VjPeN3rns7cO2-ShDyOfiZK_riivZbmH6yCfmQYB6ao5ASyLoKQagRw9Z11qibmuBNph012Iob9-_IKWMpTlAJ4J2PxsP/s1600/book1.gif','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVH_vBkxjeGeOr_JAzPB8OnzbahzTCqbwnTLT7jG7zZSe-GJVWJ4bRVVYB5oBQ8RydaRqGmATMZV6e5bgLtq86MvKFQkR-OvKNisOLLPq9FtiQBGWlVGhVdX95GWPGcMkGwUKJ3QPpGmOK/s1600/book2.gif','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBCed8Rzfkv_Fi7Nt71iHhU6ZxNUyNHWuN5ZiwLr1tHzz-yctSNmZvyeQ7Rx0DLAk1mL809WqZgBrjWsNB_LzG_ciSDzCzbvKXO2RGKV-eOS4oUMJkmmRJitI24DQJHoNcTyS3Z1ChvWQB/s1600/book3.gif','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibD8A2kMAlh2QaMbD9edthhBWJtcmBemstfi00IHRrNPJe3oO_urpTvVG_cTOWaq7FnT3QSTceqtgCKKxK3i3_dbVcyhelkg6FtabfD_QH0o3ZwauPjtJKAp3RS4LSdlmavppocyKLa74r/s1600/book4.gif','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjCj3e5G-DiA5KRRDIyDH0D5EQStZFK3mL1RgFG7huE_BsTNni0hXVHDWvph8OjXqz64zoCt34AIt1ej_IhLds_sm4q03Dry1kAoXyUCsGuu-pZ-nudMiRH1Htp_YuchBXMqBt81ufWASA/s1600/book5.gif','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUGaafq53HE0HQ-LqXkXmC8H6X4XU0WzNIQb2Lmm-G6YlJ4qPbm-hhJvNtBgk8rm9FxI0EkgzJONnpHmdOz0Njufkw_hbhM06nHVYbqNBbULcGq_olE2UcI7DZD2ON7doOLsWrMYeyuiKO/s1600/book6.gif' ];

 numbers.sort( function() { return Math.random() - .5 } );

 for ( var i=0; i<6; i++ ) {
$('<div><img  src="' + imgs[numbers[i] - 1] + '" alt="alt"/></div>').data( 'number', numbers[i] ).attr( 'id',         
   'card'+numbers[i] ).appendTo( '#cardPile' ).draggable( {
  containment: '#content',
  stack: '#cardPile div',
  cursor: 'move',
  revert: true
 } );
}

  // Create the card slots
  var words = [ 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten' ];
  for ( var i=1; i<=10; i++ ) {
    $('<div>' + words[i-1] + '</div>').data( 'number', i ).appendTo( '#cardSlots' ).droppable( {
      accept: '#cardPile div',
      hoverClass: 'hovered',
      drop: handleCardDrop
    } );
  }

}

function handleCardDrop( event, ui ) {
  var slotNumber = $(this).data( 'number' );
  var cardNumber = ui.draggable.data( 'number' );

  // If the card was dropped to the correct slot,
  // change the card colour, position it directly
  // on top of the slot, and prevent it being dragged
  // again

  if ( slotNumber == cardNumber ) {
    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 all the cards have been placed correctly then display a message
  // and reset the cards for another go

  if ( correctCards == 10 ) {
    $('#successMessage').show();
    $('#successMessage').animate( {
      left: '380px',
      top: '200px',
      width: '400px',
      height: '100px',
      opacity: 1
    } );
  }

}

</script>

</head>
<body>

<div class="wideBox">
<h1>Drag-and-Drop with jQuery: Your Essential Guide</h1>
<h2>A Number Cards Game</h2>
</div>

<div id="content">
<div id="cardPile">

</div>
<div id="cardSlots"> </div>
<div id="successMessage">
<h2>You did it!</h2>
<button onclick="init()">Play Again</button>
</div>
</div>

</body>
</html>











Related Post for CARD GAMES WITH DRAG AND DROP WITH JQUERY AND HTML

  • JS IMAGE SCROLLER -------------------------------------------------------------------------------------------------------------- JS IMAGE SCROLLER CODE image scroller https://amazingcarousel.com…
  • BLOCK JAVA SCRIPT BY GOOGLE CHROME -------------------------------------------------------------------------------------------------------------------------------------- java file block in google chrome h…
  • Bread Crumb Navigation Menu Guardian Style --------------------------------------------------------------------------------- CODE BELOW ---------------------------------------------------------------------------------…
  • CSS SLIDER WITHOUT JS ----------------------------------------------------------------------------------------------------------- ReadMore: http://cssslider.com/non-jquery-carousel-7.html SAVE …
  • AUTO CSS JS SLIDER WITH ARROW BULLET ------------------------------------------------------------------------------------------------------- BX SLIDER CODE: READ MORE: BX SLIDER IN BLOGGER TEMPALTE - You…
  • IMAGE UPLOAD WITH JAVA WITHOUT PHP CODE ------------------------------------------------------------------------------------------------------ COPY AND PASTE BELOW CODE IN NOTE PAD AND SAVE IN HTML FILE -----------…
  • CSS SYNTAX HIGHLIGHT CHANGE IN NOTEPAD++ SYNTAX HIGHLIGHTER ------------------------------------------------------------------------------------------------------------------- SYNTAX HIGHLIGHTER LINKS -----------------------------------…
  • NOTEPAD++ REMOVE UNWANTED LINES ------------------------------------------------------------------------------------------------------------------------------------------------------------ STEP NO : 1 1- CT…
  • SCREEN TO GIF ------------------------------------------------------------------------------------------------------------------ Read More:  3:30 PDF HTML IMAGE CONVERTER HD…
  • DROP DOWN MENU EXAMPLES --------------------------------------------------------------------------------------- USE THIS CODE short code css menu Different Color for Menu Tabs ----------------------…
  • NOTE PAD ++ SYNTAX HIGHLIGHTER FOR BLOGGER POST --------------------------------------------------------------------------------------------------------------------- NOTE PAD ++ SYNTAX HIGHLIGHTER FOR BLOGGER POST https://…
Posted by on Thursday, 4 September 2014 at 13:16
Labels: , , , , , , , , , , , , , , , , , , ,

0 comments:

Post a Comment

:) :)) ;(( :-) =)) ;( ;-( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ $-) (b) (f) x-) (k) (h) (c) cheer
Click to see the code!
To insert emoticon you must added at least one space before the code.

Subscribe to: Post Comments (Atom)
FB Gadgets | Template Designed by Fatakat PhotosCoolBThemes.com
Code by : paid web directory

https://www.google.co.uk/search?q=site%3Ablogspot.com+fbgadgets