├── README.md ├── index.html ├── main.js ├── spanishMemoryGame.png └── style.css /README.md: -------------------------------------------------------------------------------- 1 | # Spanish Colors Memory Game 2 | This memory game was a timed, morning challenge. The idea was to build a 10 card memory game, that allows a user to select 2 cards and check if they match. If the cards match, they stay flipped. If not, they flip back over. The memory game is over when all cards are matched and flipped back. 3 | 4 | **Demo the game here:** https://karina001.github.io/spanishColorsMemoryGame/ 5 | 6 | ![alt tag](https://github.com/karina001/spanishColorsMemoryGame/blob/master/spanishMemoryGame.png) 7 | 8 | ## How It's Made: 9 | 10 | **Tech used:** HTML, CSS, JavaScript 11 | 12 | To build the card game, I started off with an HTML container and within that HTML container, I added the cards. Next, I applied a few styles on the cards and modified properties such as width, height, color, etc. There were a couple of functions that also had to be established. For example, the random shuffle algorithm was a simple but fun aspect of this game. The algorithm involves a variable that loops through the length of an array and generates a random number to shuffle the cards. Another important function was to check if the cards matched. I did this by using the data-* attribute to verify if the value of an HTML element or card, was equal to the value of another card. 13 | 14 | ## Optimizations 15 | If I had more time I would go back and add better styling to the cards or perhaps incorporate gamification techniques to encourage the user to continue playing the game. I would also like to allow the user to switch the theme of the game in real time. For example, the ability to switch from Spanish colors to images of famous soccer players. I'd also like to add a shuffle button so that the user has total control over the shuffle function instead of having it run automatically. 16 | 17 | ## Lessons Learned: 18 | I gained some decent CSS practice by completing this exercise. 19 | 20 | ## Examples: 21 | Take a look at other examples in my portfolio: 22 | 23 | **Caesar Cipher Shift Encoder:** https://github.com/karina001/ceasarCipher 24 | 25 | **WuTangClan Name Generator:** https://github.com/karina001/WuTangNameGenerator 26 | 27 | **Speech Recognition App:** https://github.com/karina001/speechRecognitionApp 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |

Spanish Colors Memory Game

11 |

Find the matching cards. Choose wisely :)

12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /main.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function() { 2 | var app = { 3 | cards: ['rosa', 'rosa', 'violeta', 'violeta', 'azul', 'azul', 'verde', 'verde', 'café', 'café', 'anaranjado', 'anaranjado'], 4 | init: function() { 5 | app.shuffle(); 6 | }, 7 | shuffle: function() { 8 | var random = 0; 9 | var temp = 0; 10 | for (i = 1; i < app.cards.length; i++) { 11 | random = Math.round(Math.random() * i); 12 | temp = app.cards[i]; 13 | app.cards[i] = app.cards[random]; 14 | app.cards[random] = temp; 15 | } 16 | app.assignCards(); 17 | console.log('Shuffled Card Array: ' + app.cards); 18 | }, 19 | assignCards: function() { 20 | $('.card').each(function(index) { 21 | $(this).attr('data-card-value', app.cards[index]); 22 | }); 23 | app.clickHandlers(); 24 | }, 25 | clickHandlers: function() { 26 | $('.card').on('click', function() { 27 | $(this).html('

' + $(this).data('cardValue') + '

').addClass('selected'); 28 | app.checkMatch(); 29 | }); 30 | }, 31 | checkMatch: function() { 32 | if ($('.selected').length === 2) { 33 | if ($('.selected').first().data('cardValue') == $('.selected').last().data('cardValue')) { 34 | $('.selected').each(function() { 35 | $(this).animate({ 36 | opacity: 0 37 | }).removeClass('unmatched'); 38 | }); 39 | $('.selected').each(function() { 40 | $(this).removeClass('selected'); 41 | }); 42 | app.checkWin(); 43 | } else { 44 | setTimeout(function() { 45 | $('.selected').each(function() { 46 | $(this).html('').removeClass('selected'); 47 | }); 48 | }, 1000); 49 | } 50 | } 51 | }, 52 | checkWin: function() { 53 | if ($('.unmatched').length === 0) { 54 | $('.container').html('

You Won!

'); 55 | } 56 | } 57 | }; 58 | app.init(); 59 | }); 60 | -------------------------------------------------------------------------------- /spanishMemoryGame.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/girl4tech/spanishColorsMemoryGame/9afa70f2b668fed6070bad73a1a3cb9ba216bc23/spanishMemoryGame.png -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | body{ 6 | font-family: 'Patrick Hand', sans-serif; 7 | } 8 | h1{ 9 | font-size:45px; 10 | margin-left:8%; 11 | color: #552BD9; 12 | } 13 | h4{ 14 | font-size:25px; 15 | margin-left:8%; 16 | color: #B735BD; 17 | } 18 | .container { 19 | width: 1080px; 20 | margin: 0 auto; 21 | } 22 | 23 | 24 | .card { 25 | float: left; 26 | margin: 10px; 27 | height: 200px; 28 | width: 150px; 29 | background: #FBC5E1; 30 | text-align: center; 31 | border-radius: 5px; 32 | box-shadow: 10px 10px 10px #ccc; 33 | } 34 | 35 | .card:hover { 36 | cursor: pointer; 37 | border: 3px solid blue; 38 | } 39 | 40 | .card p { 41 | font-size: 48px; 42 | color: blue; 43 | } 44 | --------------------------------------------------------------------------------