Last active
June 30, 2016 14:57
-
-
Save rob0t7/131075c82c4e4f5bfc2814f7630413fa to your computer and use it in GitHub Desktop.
CSS Game
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css"> | |
| <link rel="stylesheet" href="main.css"> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
| <script src="main.js"></script> | |
| </head> | |
| <body> | |
| <section class="card-game"> | |
| <div class="card" data-color="red"></div> | |
| <div class="card" data-color="blue"></div> | |
| <div class="card" data-color="green"></div> | |
| <div class="card" data-color="orange"></div> | |
| <div class="card" data-color="pink"></div> | |
| <div class="card" data-color="silver"></div> | |
| <div class="card" data-color="red"></div> | |
| <div class="card" data-color="blue"></div> | |
| <div class="card" data-color="green"></div> | |
| <div class="card" data-color="orange"></div> | |
| <div class="card" data-color="pink"></div> | |
| <div class="card" data-color="silver"></div> | |
| </section> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| background-color: lightgrey; | |
| } | |
| section.card-game { | |
| width: 415px; | |
| margin: 20px auto; | |
| border: 2px solid black; | |
| border-radius: 10px; | |
| background-color: white; | |
| padding: 10px; | |
| } | |
| div.card { | |
| width: 100px; | |
| height: 100px; | |
| background-color: gray; | |
| border-radius: 10px; | |
| display: inline-block; | |
| transition: all 1s linear; | |
| /* position: relative; */ | |
| /* left: 0px; */ | |
| } | |
| div.card:hover { | |
| left: 50px; | |
| } | |
| div.card.matched { | |
| opacity: 0; | |
| } | |
| div.card.active.red { | |
| background-color: red; | |
| } | |
| div.card.active.green { | |
| background-color: green; | |
| } | |
| div.card.active.pink { | |
| background-color: pink; | |
| } | |
| div.card.active.silver { | |
| background-color: silver; | |
| } | |
| div.card.active.orange { | |
| background-color: orange; | |
| } | |
| div.card.active.blue { | |
| background-color: blue; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Lecture | |
| $(function() { | |
| function checkCardMatch(card1, card2) { | |
| if(card1.data('color') === card2.data('color')) { | |
| card1.addClass('matched'); | |
| card2.addClass('matched'); | |
| } else { | |
| card1.removeClass('active'); | |
| card2.removeClass('active'); | |
| } | |
| previousCard = undefined; | |
| } | |
| var previousCard = undefined; | |
| $('.card').on('click', function(e) { | |
| var $card = $(this); | |
| var color = $card.data('color'); | |
| $card.addClass('active').addClass(color); | |
| if(previousCard) { | |
| if ($card.hasClass('active')) { | |
| return; | |
| } | |
| setTimeout(function() { | |
| checkCardMatch($card, previousCard); | |
| }, 1000); | |
| } else { | |
| previousCard = $card; | |
| } | |
| }); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment