├── .gitignore ├── LICENSE.txt ├── README.md ├── css └── MemoryGame.css ├── images ├── card.svg ├── fruits │ ├── apple.jpg │ ├── fig.jpg │ ├── grape.jpg │ ├── kiwi.jpg │ ├── lemon.jpg │ ├── lime.jpg │ ├── mango.jpg │ ├── melon.jpg │ ├── orange.jpg │ ├── peach.jpg │ ├── pear.jpg │ ├── pinapple.jpg │ ├── plum.jpg │ ├── raspberry.jpg │ └── strawberry.jpg └── gear.png ├── index.html └── js ├── BrowserInterface.js ├── Card.js └── MemoryGame.js /.gitignore: -------------------------------------------------------------------------------- 1 | # IDEs 2 | .idea 3 | 4 | # OS files 5 | .DS_Store 6 | -------------------------------------------------------------------------------- /LICENSE.txt: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Maximo Mena 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Fruit Matcher 2 | HTML5, CSS3 and Javascript memory game. 3 | 4 | Play this game on http://mmenavas.github.io/memory-game 5 | -------------------------------------------------------------------------------- /css/MemoryGame.css: -------------------------------------------------------------------------------- 1 | html { 2 | width:100%; 3 | height:100%; 4 | } 5 | body { 6 | margin:0; 7 | padding:0; 8 | width:100%; 9 | height:100%; 10 | } 11 | 12 | .modal { 13 | position: fixed; 14 | height: 90%; 15 | right: 0; 16 | top: 0; 17 | z-index: 3; 18 | width: 100%; 19 | visibility: hidden; 20 | opacity:0; 21 | -webkit-transition:opacity 0.4s linear; 22 | -moz-transition:opacity 0.4s linear; 23 | -ms-transition:opacity 0.4s linear; 24 | -o-transition:opacity 0.4s linear; 25 | transition:opacity 0.4s linear; 26 | } 27 | .modal.show { 28 | visibility: visible; 29 | opacity:1; 30 | } 31 | 32 | .valign-table { 33 | display: table; 34 | table-layout: fixed; 35 | } 36 | .valign-cell { 37 | display: table-cell; 38 | vertical-align: middle; 39 | } 40 | 41 | #memory--app-container { 42 | background-color: #0061a8; 43 | width:100%; 44 | height:90%; 45 | } 46 | 47 | .memory--menu-bar { 48 | width:100%; 49 | background-color: #222; 50 | height:10%; 51 | display:table; 52 | } 53 | 54 | .memory--menu-bar .inner { 55 | display:table-cell; 56 | vertical-align:middle; 57 | } 58 | .memory--menu-bar .left { 59 | text-align: left; 60 | float:left; 61 | width:50%; 62 | } 63 | .memory--menu-bar .right { 64 | text-align: right; 65 | float:right; 66 | width:50%; 67 | } 68 | .memory--app-name { 69 | color:#ccc; 70 | font-size:26px; 71 | margin:0; 72 | padding:1px 4px; 73 | text-transform: uppercase; 74 | font-family: "Courier New"; 75 | letter-spacing: 2px; 76 | } 77 | @media screen and (max-width: 480px) { 78 | .memory--app-name { 79 | font-size:16px; 80 | } 81 | } 82 | 83 | #memory--settings-icon { 84 | height: 24px; 85 | display: block; 86 | padding:4px 8px; 87 | float: right; 88 | } 89 | 90 | #memory--end-game-modal .wrapper { 91 | background-color: rgba(0, 0, 0, .86); 92 | text-align: center; 93 | color:#ccc; 94 | padding:8px 0; 95 | } 96 | #memory--end-game-modal h2, 97 | #memory--end-game-modal h3 { 98 | margin:0; 99 | margin-bottom: 4px; 100 | } 101 | 102 | #memory--settings-modal { 103 | background-color: rgba(0, 0, 0, .86); 104 | z-index: 4; 105 | } 106 | #memory--settings-modal form { 107 | min-width:240px; 108 | width:50%; 109 | margin:0 auto; 110 | text-align: center; 111 | color:#ccc; 112 | } 113 | 114 | .memory--settings-label { 115 | margin:8px 0; 116 | } 117 | 118 | #memory--settings-grid, 119 | #memory--settings-reset { 120 | width:100%; 121 | margin-bottom:16px; 122 | font-size:18px; 123 | background:transparent; 124 | color:#ccc; 125 | height:50px; 126 | text-align: center; 127 | } 128 | 129 | #memory--settings-grid option { 130 | padding-top:5px; 131 | padding-bottom:5px; 132 | } 133 | 134 | #memory--settings-reset { 135 | border-radius:5px; 136 | border:2px solid #ccc; 137 | cursor: pointer; 138 | } 139 | 140 | #memory--cards { 141 | margin:0 auto; 142 | padding:0; 143 | height:100%; 144 | list-style-type: none; 145 | list-style-image: none; 146 | position:relative; 147 | } 148 | /* entire container, keeps perspective */ 149 | .flip-container { 150 | -webkit-perspective: 1000px; 151 | perspective: 1000px; 152 | float:left; 153 | } 154 | 155 | /* flip the pane when clicked */ 156 | .flip-container.clicked .front { 157 | -webkit-transform: rotateY(180deg); 158 | -moz-transform: rotateY(180deg); 159 | -ms-transform: rotateY(180deg); 160 | -o-transform: rotateY(180deg); 161 | transform: rotateY(180deg); 162 | } 163 | .flip-container.clicked .back { 164 | -webkit-transform: rotateY(0deg); 165 | -moz-transform: rotateY(0deg); 166 | -ms-transform: rotateY(0deg); 167 | -o-transform: rotateY(0deg); 168 | transform: rotateY(0deg); 169 | } 170 | 171 | /* flip speed goes here */ 172 | .flipper { 173 | width:90%; 174 | height:90%; 175 | margin:0% auto; 176 | -webkit-transition: 0.5s; 177 | -moz-transition: 0.5s; 178 | -ms-transition: 0.5s; 179 | -o-transition: 0.5s; 180 | transition: 0.5s; 181 | -webkit-transform-style: preserve-3d; 182 | -moz-transform-style: preserve-3d; 183 | transform-style: preserve-3d; 184 | position: relative; 185 | top:5%; 186 | bottom:5%; 187 | } 188 | 189 | /* hide back of pane during swap */ 190 | .front, .back { 191 | width:100%; 192 | height:100%; 193 | display: block; 194 | -webkit-backface-visibility: hidden; 195 | -moz-backface-visibility: hidden; 196 | backface-visibility: hidden; 197 | -webkit-transition: 0.5s; 198 | -moz-transition: 0.5s; 199 | -ms-transition: 0.5s; 200 | -o-transition: 0.5s; 201 | transition: 0.5s; 202 | -webkit-transform-style: preserve-3d; 203 | -moz-transform-style: preserve-3d; 204 | transform-style: preserve-3d; 205 | position: absolute; 206 | top: 0; 207 | left: 0; 208 | } 209 | 210 | /* front pane, placed above back */ 211 | .front { 212 | /* for firefox 31 */ 213 | -webkit-transform: rotateY(0deg); 214 | -moz-transform: rotateY(0deg); 215 | -ms-transform: rotateY(0deg); 216 | -o-transform: rotateY(0deg); 217 | transform: rotateY(0deg); 218 | background-color: #e12d00; 219 | border-radius: 5%; 220 | background-image: url(../images/card.svg); 221 | background-position:50% 50%; 222 | background-repeat: no-repeat; 223 | background-size: contain; 224 | 225 | } 226 | 227 | /* back, initially hidden pane */ 228 | .back { 229 | -webkit-transform: rotateY(-180deg); 230 | -moz-transform: rotateY(-180deg); 231 | -ms-transform: rotateY(-180deg); 232 | -o-transform: rotateY(-180deg); 233 | transform: rotateY(-180deg); 234 | background-color: #fff; 235 | border-radius: 5%; 236 | background-position:50% 50%; 237 | background-repeat: no-repeat; 238 | background-size: cover; 239 | } 240 | 241 | .back.card-1 { 242 | background-image: url(../images/fruits/apple.jpg); 243 | } 244 | .back.card-2 { 245 | background-image: url(../images/fruits/fig.jpg); 246 | } 247 | .back.card-3 { 248 | background-image: url(../images/fruits/grape.jpg); 249 | } 250 | .back.card-4 { 251 | background-image: url(../images/fruits/kiwi.jpg); 252 | } 253 | .back.card-5 { 254 | background-image: url(../images/fruits/lemon.jpg); 255 | } 256 | .back.card-6 { 257 | background-image: url(../images/fruits/lime.jpg); 258 | } 259 | .back.card-7 { 260 | background-image: url(../images/fruits/mango.jpg); 261 | } 262 | .back.card-8 { 263 | background-image: url(../images/fruits/melon.jpg); 264 | } 265 | .back.card-9 { 266 | background-image: url(../images/fruits/orange.jpg); 267 | } 268 | .back.card-10 { 269 | background-image: url(../images/fruits/peach.jpg); 270 | } 271 | .back.card-11 { 272 | background-image: url(../images/fruits/pear.jpg); 273 | } 274 | .back.card-12 { 275 | background-image: url(../images/fruits/pinapple.jpg); 276 | } 277 | .back.card-13 { 278 | background-image: url(../images/fruits/plum.jpg); 279 | } 280 | .back.card-14 { 281 | background-image: url(../images/fruits/raspberry.jpg); 282 | } 283 | .back.card-15 { 284 | background-image: url(../images/fruits/strawberry.jpg); 285 | } 286 | 287 | /** Matching Cards **/ 288 | /** 289 | * If you wish to have custom matching images, you can do so 290 | * by leveraging the 'matching' class which is added to one 291 | * of the matching cards. See the example below. 292 | * 293 | * .back.card-1 { 294 | * background-image: url(../images/fruits/apple_1.jpg); 295 | * } 296 | * 297 | * .back.matching.card-1 { 298 | * background-image: url(../images/fruits/apple_2.jpg); 299 | * } 300 | * 301 | */ 302 | -------------------------------------------------------------------------------- /images/card.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /images/fruits/apple.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mmenavas/memory-game/7da33da0286588f5a4770a8f6ddab7ea20f28090/images/fruits/apple.jpg -------------------------------------------------------------------------------- /images/fruits/fig.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mmenavas/memory-game/7da33da0286588f5a4770a8f6ddab7ea20f28090/images/fruits/fig.jpg -------------------------------------------------------------------------------- /images/fruits/grape.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mmenavas/memory-game/7da33da0286588f5a4770a8f6ddab7ea20f28090/images/fruits/grape.jpg -------------------------------------------------------------------------------- /images/fruits/kiwi.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mmenavas/memory-game/7da33da0286588f5a4770a8f6ddab7ea20f28090/images/fruits/kiwi.jpg -------------------------------------------------------------------------------- /images/fruits/lemon.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mmenavas/memory-game/7da33da0286588f5a4770a8f6ddab7ea20f28090/images/fruits/lemon.jpg -------------------------------------------------------------------------------- /images/fruits/lime.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mmenavas/memory-game/7da33da0286588f5a4770a8f6ddab7ea20f28090/images/fruits/lime.jpg -------------------------------------------------------------------------------- /images/fruits/mango.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mmenavas/memory-game/7da33da0286588f5a4770a8f6ddab7ea20f28090/images/fruits/mango.jpg -------------------------------------------------------------------------------- /images/fruits/melon.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mmenavas/memory-game/7da33da0286588f5a4770a8f6ddab7ea20f28090/images/fruits/melon.jpg -------------------------------------------------------------------------------- /images/fruits/orange.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mmenavas/memory-game/7da33da0286588f5a4770a8f6ddab7ea20f28090/images/fruits/orange.jpg -------------------------------------------------------------------------------- /images/fruits/peach.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mmenavas/memory-game/7da33da0286588f5a4770a8f6ddab7ea20f28090/images/fruits/peach.jpg -------------------------------------------------------------------------------- /images/fruits/pear.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mmenavas/memory-game/7da33da0286588f5a4770a8f6ddab7ea20f28090/images/fruits/pear.jpg -------------------------------------------------------------------------------- /images/fruits/pinapple.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mmenavas/memory-game/7da33da0286588f5a4770a8f6ddab7ea20f28090/images/fruits/pinapple.jpg -------------------------------------------------------------------------------- /images/fruits/plum.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mmenavas/memory-game/7da33da0286588f5a4770a8f6ddab7ea20f28090/images/fruits/plum.jpg -------------------------------------------------------------------------------- /images/fruits/raspberry.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mmenavas/memory-game/7da33da0286588f5a4770a8f6ddab7ea20f28090/images/fruits/raspberry.jpg -------------------------------------------------------------------------------- /images/fruits/strawberry.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mmenavas/memory-game/7da33da0286588f5a4770a8f6ddab7ea20f28090/images/fruits/strawberry.jpg -------------------------------------------------------------------------------- /images/gear.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mmenavas/memory-game/7da33da0286588f5a4770a8f6ddab7ea20f28090/images/gear.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Fruit Matcher 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 |
15 |

Difficulty level:

16 | 22 | 23 |
24 |
25 |
26 |
27 |
28 |
29 |

30 |

31 |
32 |
33 |
34 |
35 | 37 |
38 |
39 |
40 |

Fruit Matcher

41 |
42 |
43 |
44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /js/BrowserInterface.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Author: Maximo Mena 3 | * GitHub: mmenavas 4 | * Twitter: @menamaximo 5 | * Project: Memory Workout 6 | * Description: The game interface 7 | */ 8 | 9 | /** 10 | * @TODO Refactor code. 11 | */ 12 | (function($) { 13 | 14 | /************ Start hard coded settings ******************/ 15 | 16 | // How long a non matching card is displayed once clicked. 17 | var nonMatchingCardTime = 1000; 18 | 19 | // Shuffle card images: How many different images are available to shuffle 20 | // from? 21 | var imagesAvailable = 15; 22 | 23 | /************ End hard coded settings ******************/ 24 | 25 | // Handle clicking on settings icon 26 | var settings = document.getElementById('memory--settings-icon'); 27 | var modal = document.getElementById('memory--settings-modal'); 28 | var handleOpenSettings = function (event) { 29 | event.preventDefault(); 30 | modal.classList.toggle('show'); 31 | }; 32 | settings.addEventListener('click', handleOpenSettings); 33 | 34 | // Handle settings form submission 35 | var reset = document.getElementById('memory--settings-reset'); 36 | var handleSettingsSubmission = function (event) { 37 | event.preventDefault(); 38 | 39 | var selectWidget = document.getElementById("memory--settings-grid").valueOf(); 40 | var grid = selectWidget.options[selectWidget.selectedIndex].value; 41 | var gridValues = grid.split('x'); 42 | var cards = $.initialize(Number(gridValues[0]), Number(gridValues[1]), imagesAvailable); 43 | 44 | if (cards) { 45 | document.getElementById('memory--settings-modal').classList.remove('show'); 46 | document.getElementById('memory--end-game-modal').classList.remove('show'); 47 | document.getElementById('memory--end-game-message').innerText = ""; 48 | document.getElementById('memory--end-game-score').innerText = ""; 49 | buildLayout($.cards, $.settings.rows, $.settings.columns); 50 | } 51 | 52 | }; 53 | reset.addEventListener('click', handleSettingsSubmission); 54 | 55 | // Handle clicking on card 56 | var handleFlipCard = function (event) { 57 | 58 | event.preventDefault(); 59 | 60 | var status = $.play(this.index); 61 | console.log(status); 62 | 63 | if (status.code != 0 ) { 64 | this.classList.toggle('clicked'); 65 | } 66 | 67 | if (status.code == 3 ) { 68 | setTimeout(function () { 69 | var childNodes = document.getElementById('memory--cards').childNodes; 70 | childNodes[status.args[0]].classList.remove('clicked'); 71 | childNodes[status.args[1]].classList.remove('clicked'); 72 | }.bind(status), nonMatchingCardTime); 73 | } 74 | else if (status.code == 4) { 75 | var score = parseInt((($.attempts - $.mistakes) / $.attempts) * 100, 10); 76 | var message = getEndGameMessage(score); 77 | 78 | document.getElementById('memory--end-game-message').textContent = message; 79 | document.getElementById('memory--end-game-score').textContent = 80 | 'Score: ' + score + ' / 100'; 81 | 82 | document.getElementById("memory--end-game-modal").classList.toggle('show'); 83 | } 84 | 85 | }; 86 | 87 | var getEndGameMessage = function(score) { 88 | var message = ""; 89 | 90 | if (score == 100) { 91 | message = "Amazing job!" 92 | } 93 | else if (score >= 70 ) { 94 | message = "Great job!" 95 | } 96 | else if (score >= 50) { 97 | message = "Great job!" 98 | } 99 | else { 100 | message = "You can do better."; 101 | } 102 | 103 | return message; 104 | } 105 | 106 | // Build grid of cards 107 | var buildLayout = function (cards, rows, columns) { 108 | if (!cards.length) { 109 | return; 110 | } 111 | 112 | var memoryCards = document.getElementById("memory--cards"); 113 | var index = 0; 114 | 115 | var cardMaxWidth = document.getElementById('memory--app-container').offsetWidth / columns; 116 | var cardHeightForMaxWidth = cardMaxWidth * (3 / 4); 117 | 118 | var cardMaxHeight = document.getElementById('memory--app-container').offsetHeight / rows; 119 | var cardWidthForMaxHeight = cardMaxHeight * (4 / 3); 120 | 121 | // Clean up. Remove all child nodes and card clicking event listeners. 122 | while (memoryCards.firstChild) { 123 | memoryCards.firstChild.removeEventListener('click', handleFlipCard); 124 | memoryCards.removeChild(memoryCards.firstChild); 125 | } 126 | 127 | for (var i = 0; i < rows; i++) { 128 | for (var j = 0; j < columns; j++) { 129 | // Use cloneNode(true) otherwise only one node is appended 130 | memoryCards.appendChild(buildCardNode(index, cards[index], 131 | (100 / columns) + "%", (100 / rows) + "%")); 132 | index++; 133 | } 134 | } 135 | 136 | // Resize cards to fit in viewport 137 | if (cardMaxHeight > cardHeightForMaxWidth) { 138 | // Update height 139 | memoryCards.style.height = (cardHeightForMaxWidth * rows) + "px"; 140 | memoryCards.style.width = document.getElementById('memory--app-container').offsetWidth + "px"; 141 | memoryCards.style.top = ((cardMaxHeight * rows - (cardHeightForMaxWidth * rows)) / 2) + "px"; 142 | } 143 | else { 144 | // Update Width 145 | memoryCards.style.width = (cardWidthForMaxHeight * columns) + "px"; 146 | memoryCards.style.height = document.getElementById('memory--app-container').offsetHeight + "px"; 147 | memoryCards.style.top = 0; 148 | } 149 | 150 | }; 151 | 152 | // Update on resize 153 | window.addEventListener('resize', function() { 154 | buildLayout($.cards, $.settings.rows, $.settings.columns); 155 | }, true); 156 | 157 | // Build single card 158 | var buildCardNode = function (index, card, width, height) { 159 | var flipContainer = document.createElement("li"); 160 | var flipper = document.createElement("div"); 161 | var front = document.createElement("a"); 162 | var back = document.createElement("a"); 163 | 164 | flipContainer.index = index; 165 | flipContainer.style.width = width; 166 | flipContainer.style.height = height; 167 | flipContainer.classList.add("flip-container"); 168 | if (card.isRevealed) { 169 | flipContainer.classList.add("clicked"); 170 | } 171 | 172 | flipper.classList.add("flipper"); 173 | front.classList.add("front"); 174 | front.setAttribute("href", "#"); 175 | back.classList.add("back"); 176 | back.classList.add("card-" + card.value); 177 | if (card.isMatchingCard) { 178 | back.classList.add("matching"); 179 | } 180 | back.setAttribute("href", "#"); 181 | 182 | flipper.appendChild(front); 183 | flipper.appendChild(back); 184 | flipContainer.appendChild(flipper); 185 | 186 | flipContainer.addEventListener('click', handleFlipCard); 187 | 188 | return flipContainer; 189 | }; 190 | 191 | })(MemoryGame); 192 | -------------------------------------------------------------------------------- /js/Card.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 3 | * Author: Maximo Mena 4 | * GitHub: mmenavas 5 | * Twitter: @menamaximo 6 | * Project: Memory Workout 7 | * Description: A JS, HTML and CSS based memory game. 8 | * The goal is to match pairs of cards in the least 9 | * number of matching attempts. 10 | */ 11 | 12 | /** 13 | * @namespace Card object 14 | */ 15 | MemoryGame.Card = function(value, isMatchingCard) { 16 | this.value = value; 17 | this.isRevealed = false; 18 | if (isMatchingCard) { 19 | this.isMatchingCard = true; 20 | } 21 | 22 | this.reveal = function() { 23 | this.isRevealed = true; 24 | } 25 | 26 | this.conceal = function() { 27 | this.isRevealed = false; 28 | } 29 | }; 30 | -------------------------------------------------------------------------------- /js/MemoryGame.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Author: Maximo Mena 3 | * GitHub: mmenavas 4 | * Twitter: @menamaximo 5 | * Project: Memory Workout 6 | * Description: This is a memory game written in pure JavaScript. 7 | * The goal is to match pairs of cards in the least 8 | * number of matching attempts. 9 | */ 10 | 11 | /** 12 | * @TODO 13 | * - Implement support for multiple players. 14 | */ 15 | 16 | /** 17 | * @namespace The main application object 18 | */ 19 | var MemoryGame = { 20 | 21 | settings: { 22 | rows: 2, 23 | columns: 3, 24 | images: 3, // Number of images 25 | }, 26 | 27 | // Properties that indicate state 28 | cards: [], // Array of MemoryGame.Card objects 29 | attempts: 0, // How many pairs of cards were flipped before completing game 30 | mistakes: 0, // How many pairs of cards were flipped before completing game 31 | isGameOver: false, 32 | 33 | /** 34 | * Modify default settings to start a new game. 35 | * Both parameters need integers greater than one, and 36 | * at least one them needs to be an even number. 37 | * 38 | * @param {number} columns 39 | * @param {number} rows 40 | * @param {number} number of card images 41 | * @return {array} shuffled cards 42 | */ 43 | initialize : function(rows, columns, images) { 44 | var validOptions = true; 45 | 46 | // Validate arguments 47 | if (!(typeof columns === 'number' && (columns % 1) === 0 && columns > 1) || 48 | !(typeof rows === 'number' && (rows % 1) === 0) && rows > 1) { 49 | validOptions = false; 50 | throw { 51 | name: "invalidInteger", 52 | message: "Both rows and columns need to be integers greater than 1." 53 | }; 54 | } 55 | 56 | if ((columns * rows) % 2 !== 0) { 57 | validOptions = false; 58 | throw { 59 | name: "oddNumber", 60 | message: "Either rows or columns needs to be an even number." 61 | }; 62 | } 63 | 64 | if (validOptions) { 65 | this.settings.rows = rows; 66 | this.settings.columns = columns; 67 | this.settings.images = images; 68 | this.attempts = 0; 69 | this.mistakes = 0; 70 | this.isGameOver = false; 71 | this.createCards().shuffleCards(); 72 | } 73 | 74 | return this.cards; 75 | }, 76 | 77 | /** 78 | * Create an array of sorted cards 79 | * 80 | * @return Reference to self object 81 | */ 82 | createCards: function() { 83 | var cards = []; 84 | var values = []; 85 | var count = 0; 86 | var maxValue = (this.settings.columns * this.settings.rows) / 2; 87 | while (count < maxValue) { 88 | // Next random card value 89 | var value = this.getRandomCardValue(values); 90 | // Card A 91 | cards[2 * count] = new this.Card(value); 92 | // Card B (matching card) 93 | cards[2 * count + 1] = new this.Card(value, true); 94 | count++; 95 | } 96 | 97 | this.cards = cards; 98 | 99 | return this; 100 | }, 101 | 102 | /** 103 | * Get a random value between 1 and this.settings.images that is not 104 | * already in 'values'. 105 | * 106 | * @param {array} values List of random values already in use. 107 | * @return {number} 108 | */ 109 | getRandomCardValue: function(values) { 110 | var valid = false; 111 | var randomValue = 0; 112 | 113 | while (!valid) { 114 | randomValue = Math.floor(Math.random() * this.settings.images) + 1; 115 | var found = false; 116 | for (var index = 0; index < values.length; index++) { 117 | if (randomValue === values[index]) { 118 | found = true; 119 | break; 120 | } 121 | } 122 | if (!found) { 123 | valid = true; 124 | values.push(randomValue); // Purposely modify the array parameter. 125 | } 126 | } 127 | 128 | return randomValue; 129 | }, 130 | 131 | /** 132 | * Rearrange elements in cards array 133 | * 134 | * @return Reference to self object 135 | */ 136 | shuffleCards: function() { 137 | var cards = this.cards; 138 | var shuffledCards = []; 139 | var randomIndex = 0; 140 | 141 | // Shuffle cards 142 | while (shuffledCards.length < cards.length) { 143 | 144 | // Random value between 0 and cards.length 145 | randomIndex = Math.floor(Math.random() * cards.length); 146 | 147 | // If element isn't false, add element to shuffled deck 148 | if(cards[randomIndex]) { 149 | 150 | // Add new element to shuffle deck 151 | shuffledCards.push(cards[randomIndex]); 152 | 153 | // Set element to false to avoid being reused 154 | cards[randomIndex] = false; 155 | } 156 | 157 | } 158 | 159 | this.cards = shuffledCards; 160 | 161 | return this; 162 | }, 163 | 164 | /** 165 | * A player gets to flip two cards. This function returns information 166 | * about what happens when a card is selected 167 | * 168 | * @param {number} Index of card selected by player 169 | * @return {object} {code: number, message: string, args: array or number} 170 | */ 171 | play: (function() { 172 | var cardSelection = []; 173 | var revealedCards = 0; 174 | var revealedValues = []; 175 | 176 | return function(index) { 177 | var status = {}; 178 | var value = this.cards[index].value; 179 | 180 | if (!this.cards[index].isRevealed) { 181 | this.cards[index].reveal(); 182 | cardSelection.push(index); 183 | if (cardSelection.length == 2) { 184 | this.attempts++; 185 | if (this.cards[cardSelection[0]].value != 186 | this.cards[cardSelection[1]].value) { 187 | // No match 188 | this.cards[cardSelection[0]].conceal(); 189 | this.cards[cardSelection[1]].conceal(); 190 | /** 191 | * Algorithm to determine a mistake. 192 | * Check if the pair of at least 193 | * one card has been revealed before 194 | * 195 | * indexOf return -1 if value is not found 196 | */ 197 | var isMistake = false; 198 | 199 | if (revealedValues.indexOf(this.cards[cardSelection[0]].value) === -1) { 200 | revealedValues.push(this.cards[cardSelection[0]].value); 201 | } 202 | else { 203 | isMistake = true; 204 | } 205 | 206 | if (revealedValues.indexOf(this.cards[cardSelection[1]].value) === -1) { 207 | revealedValues.push(this.cards[cardSelection[1]].value); 208 | } 209 | 210 | if (isMistake) { 211 | this.mistakes++; 212 | } 213 | 214 | revealedValues.push(this.cards[cardSelection[0]].value); 215 | 216 | status.code = 3, 217 | status.message = 'No Match. Conceal cards.'; 218 | status.args = cardSelection; 219 | } 220 | else { 221 | revealedCards += 2; 222 | if (revealedCards == this.cards.length) { 223 | // Game over 224 | this.isGameOver = true; 225 | revealedCards = 0; 226 | revealedValues = []; 227 | status.code = 4, 228 | status.message = 'GAME OVER! Attempts: ' + this.attempts + 229 | ', Mistakes: ' + this.mistakes; 230 | } 231 | else { 232 | status.code = 2, 233 | status.message = 'Match.'; 234 | } 235 | } 236 | cardSelection = []; 237 | } 238 | else { 239 | status.code = 1, 240 | status.message = 'Flip first card.'; 241 | } 242 | } 243 | else { 244 | status.code = 0, 245 | status.message = 'Card is already facing up.'; 246 | } 247 | 248 | return status; 249 | 250 | }; 251 | })() 252 | 253 | }; 254 | --------------------------------------------------------------------------------