How to Create a Drag-and-Drop Card Game Using JavaScript

Drag-drop game

Drag-drop game is an educational game for children to recognize letters, colors and shapes. But you know, with the help of the programming languages ​​CSS and JavaScript, we can easily apply this game in virtual form. This time we will try Drag-drop card game Recognize numbers. Later, players are asked to match the numbers with the script.

Then how do you do Drag-drop card game with JavaScript? Let’s just open up your computer and do some of the simple steps below.

Tutorials

1. Open the XAMPP control panel and activate Apache.

2. Open the text editor program installed on your computer, here I use the text editor Notepad ++. Enter the following HTML5 code.

    Drag Drop Card Game with JavaScript  

You did it!

Save the above HTLM5 code in the xampplite folder – htdocs – create a new folder named DragDropCard – save the code above with the name index.html.

3. To see the results of the script code above, you can open your browser and type http: // localhost / DragDropCard.

4. To make Game backgrounds, enter the following CSS code.

/* 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: 70px;  height: 78px;  padding: 10px;  padding-top: 20px;  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;}

Save CSS code in the xampplite folder – htdocs – select folder DragDropCard – Create a new folder named CSS – save the CSS code with the name style.css.

5. Reload the URL address: http: // localhost / DragDropCard. view from Game backgrounds, However Games cannot be played because the card did not appear.

6. To view the map in Games, Enter the following JavaScript code.

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++ ) {    $('
' + numbers[i] + '
').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++ ) { $('
' + words[i-1] + '
').data( 'number', i ).appendTo( '#cardSlots' ).droppable( { accept: '#cardPile div', hoverClass: 'hovered', drop: handleCardDrop } ); }}function handleCardDrop(event, ui) { //Grab the slot number and card number var slotNumber = $(this).data('number'); var cardNumber = ui.draggable.data('number'); //If the cards 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' }); //This prevents the card from being //pulled back to its initial position //once it has been dropped ui.draggable.draggable('option', 'revert', false); correctCards++; //increment keep track correct cards } //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: '150px', opacity: 1 }); }}

Save the JavaScript code in the xampplite folder – htdocs – select the folder DragDropCard – Create a new folder named JavaScript – save the CSS code with the name script.js.

7. Reload the URL address: http: // localhost / DragDropCard. First view of the game.

Select and hold a number, and then drag the number onto the letters.

Display when Games done.

8. Done, very interesting, isn’t it ?.

Hence the explanation of the tutorial ‘How to Make Drag-drop card game with JavaScript ‘. Much luck.






Leave a Reply

Your email address will not be published.