├── images ├── cj.png ├── kk.png ├── cyrus.png ├── flick.png ├── harvey.png ├── jack.png ├── jingle.png ├── kicks.png ├── label.png ├── leif.png ├── lottie.png ├── luna.png ├── mabel.png ├── pascal.png ├── redd.png ├── reese.png ├── wilbur.png ├── wisp.png ├── zipper.png ├── backside.jpg ├── blathers.png ├── brewster.png ├── celeste.png ├── daisymae.png ├── franklin.png ├── gulliver.png ├── isabelle.png ├── katrina.png ├── saharah.png ├── tomnook.png ├── background.jpg ├── playpause.png ├── timmytommy.png └── readme gameplay.JPG ├── sounds ├── Win.mp3 ├── Lose.mp3 ├── flip.mp3 └── Main Theme.mp3 ├── fonts └── rumoura.ttf ├── index.html ├── README.md ├── animalcrossing.css └── animalcrossing.js /images/cj.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/L-Christine/perscholas-Project-Memory-Game-Animal-Crossing/HEAD/images/cj.png -------------------------------------------------------------------------------- /images/kk.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/L-Christine/perscholas-Project-Memory-Game-Animal-Crossing/HEAD/images/kk.png -------------------------------------------------------------------------------- /sounds/Win.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/L-Christine/perscholas-Project-Memory-Game-Animal-Crossing/HEAD/sounds/Win.mp3 -------------------------------------------------------------------------------- /fonts/rumoura.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/L-Christine/perscholas-Project-Memory-Game-Animal-Crossing/HEAD/fonts/rumoura.ttf -------------------------------------------------------------------------------- /images/cyrus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/L-Christine/perscholas-Project-Memory-Game-Animal-Crossing/HEAD/images/cyrus.png -------------------------------------------------------------------------------- /images/flick.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/L-Christine/perscholas-Project-Memory-Game-Animal-Crossing/HEAD/images/flick.png -------------------------------------------------------------------------------- /images/harvey.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/L-Christine/perscholas-Project-Memory-Game-Animal-Crossing/HEAD/images/harvey.png -------------------------------------------------------------------------------- /images/jack.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/L-Christine/perscholas-Project-Memory-Game-Animal-Crossing/HEAD/images/jack.png -------------------------------------------------------------------------------- /images/jingle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/L-Christine/perscholas-Project-Memory-Game-Animal-Crossing/HEAD/images/jingle.png -------------------------------------------------------------------------------- /images/kicks.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/L-Christine/perscholas-Project-Memory-Game-Animal-Crossing/HEAD/images/kicks.png -------------------------------------------------------------------------------- /images/label.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/L-Christine/perscholas-Project-Memory-Game-Animal-Crossing/HEAD/images/label.png -------------------------------------------------------------------------------- /images/leif.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/L-Christine/perscholas-Project-Memory-Game-Animal-Crossing/HEAD/images/leif.png -------------------------------------------------------------------------------- /images/lottie.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/L-Christine/perscholas-Project-Memory-Game-Animal-Crossing/HEAD/images/lottie.png -------------------------------------------------------------------------------- /images/luna.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/L-Christine/perscholas-Project-Memory-Game-Animal-Crossing/HEAD/images/luna.png -------------------------------------------------------------------------------- /images/mabel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/L-Christine/perscholas-Project-Memory-Game-Animal-Crossing/HEAD/images/mabel.png -------------------------------------------------------------------------------- /images/pascal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/L-Christine/perscholas-Project-Memory-Game-Animal-Crossing/HEAD/images/pascal.png -------------------------------------------------------------------------------- /images/redd.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/L-Christine/perscholas-Project-Memory-Game-Animal-Crossing/HEAD/images/redd.png -------------------------------------------------------------------------------- /images/reese.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/L-Christine/perscholas-Project-Memory-Game-Animal-Crossing/HEAD/images/reese.png -------------------------------------------------------------------------------- /images/wilbur.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/L-Christine/perscholas-Project-Memory-Game-Animal-Crossing/HEAD/images/wilbur.png -------------------------------------------------------------------------------- /images/wisp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/L-Christine/perscholas-Project-Memory-Game-Animal-Crossing/HEAD/images/wisp.png -------------------------------------------------------------------------------- /images/zipper.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/L-Christine/perscholas-Project-Memory-Game-Animal-Crossing/HEAD/images/zipper.png -------------------------------------------------------------------------------- /sounds/Lose.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/L-Christine/perscholas-Project-Memory-Game-Animal-Crossing/HEAD/sounds/Lose.mp3 -------------------------------------------------------------------------------- /sounds/flip.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/L-Christine/perscholas-Project-Memory-Game-Animal-Crossing/HEAD/sounds/flip.mp3 -------------------------------------------------------------------------------- /images/backside.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/L-Christine/perscholas-Project-Memory-Game-Animal-Crossing/HEAD/images/backside.jpg -------------------------------------------------------------------------------- /images/blathers.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/L-Christine/perscholas-Project-Memory-Game-Animal-Crossing/HEAD/images/blathers.png -------------------------------------------------------------------------------- /images/brewster.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/L-Christine/perscholas-Project-Memory-Game-Animal-Crossing/HEAD/images/brewster.png -------------------------------------------------------------------------------- /images/celeste.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/L-Christine/perscholas-Project-Memory-Game-Animal-Crossing/HEAD/images/celeste.png -------------------------------------------------------------------------------- /images/daisymae.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/L-Christine/perscholas-Project-Memory-Game-Animal-Crossing/HEAD/images/daisymae.png -------------------------------------------------------------------------------- /images/franklin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/L-Christine/perscholas-Project-Memory-Game-Animal-Crossing/HEAD/images/franklin.png -------------------------------------------------------------------------------- /images/gulliver.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/L-Christine/perscholas-Project-Memory-Game-Animal-Crossing/HEAD/images/gulliver.png -------------------------------------------------------------------------------- /images/isabelle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/L-Christine/perscholas-Project-Memory-Game-Animal-Crossing/HEAD/images/isabelle.png -------------------------------------------------------------------------------- /images/katrina.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/L-Christine/perscholas-Project-Memory-Game-Animal-Crossing/HEAD/images/katrina.png -------------------------------------------------------------------------------- /images/saharah.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/L-Christine/perscholas-Project-Memory-Game-Animal-Crossing/HEAD/images/saharah.png -------------------------------------------------------------------------------- /images/tomnook.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/L-Christine/perscholas-Project-Memory-Game-Animal-Crossing/HEAD/images/tomnook.png -------------------------------------------------------------------------------- /images/background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/L-Christine/perscholas-Project-Memory-Game-Animal-Crossing/HEAD/images/background.jpg -------------------------------------------------------------------------------- /images/playpause.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/L-Christine/perscholas-Project-Memory-Game-Animal-Crossing/HEAD/images/playpause.png -------------------------------------------------------------------------------- /images/timmytommy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/L-Christine/perscholas-Project-Memory-Game-Animal-Crossing/HEAD/images/timmytommy.png -------------------------------------------------------------------------------- /sounds/Main Theme.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/L-Christine/perscholas-Project-Memory-Game-Animal-Crossing/HEAD/sounds/Main Theme.mp3 -------------------------------------------------------------------------------- /images/readme gameplay.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/L-Christine/perscholas-Project-Memory-Game-Animal-Crossing/HEAD/images/readme gameplay.JPG -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Animal Crossing Memory Game 10 | 11 | 12 | 13 |
14 |

Animal Crossing Memory Game

15 |

16 |
17 |
18 | 19 |
20 |
21 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Memory Game 2 | This is my first project for Per Scholas. 3 | 4 | Game: A memory game in matching card format. Total of 50 cards. 5 | 6 | Theme: Animal Crossing 7 | ## Description 8 | This is a simple memory game where the player is given 40 attempts to match 25 sets of cards with the identical images. 9 | 10 | The player can flip two cards at a time. If player finds matching set of cards, the attempt will not be consumed. But, if two cards flipped are not matching, one attempt will be consumed. 11 | 12 | If the player finds all cards, a winner's message will pop-up. If there are no more attempts left before finding all cards, a game-over message will pop-up. 13 | 14 | - The box on the left will show a message of how many chances are left throughout the play. 15 | - The play/pause button will play the main theme of the animal crossing. A player may pause the song by clicking the button. 16 | - The reset button will reset the number of chances and flip cards back to their starting position. The order of the cards will be randomized. 17 | 18 | ## Images 19 | Main Game Screen 20 | 21 | ## Tech Stack 22 | -Javascript 23 | -HTML 24 | -CSS 25 | 26 | ## Upcoming features 27 | 28 | -Easy/Hard Modes -------------------------------------------------------------------------------- /animalcrossing.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'rumoura'; 3 | src: url('./fonts/rumoura.ttf'); 4 | } 5 | html{ 6 | padding: 0; 7 | margin: 0; 8 | height: 100vh; 9 | width: 100vw; 10 | background-image: url('./images/background.jpg'); 11 | background-size: cover; 12 | } 13 | 14 | body{ 15 | font-family: 'rumoura', sans-serif; 16 | color: #f1d605f5; 17 | text-shadow: 2px 4px #896f08cb; 18 | flex-direction: column; 19 | /* display: flex; */ 20 | display: grid; 21 | grid-template-columns: 1fr 4fr; 22 | grid-template-rows: 100px auto 50px; 23 | grid-template-areas: 'header header''side main'; 24 | /* justify-content: space-between; */ 25 | align-items: center; 26 | } 27 | 28 | header{ 29 | grid-area: header; 30 | font-size: 2rem; 31 | text-align: center; 32 | } 33 | 34 | main{ 35 | grid-area: main; 36 | } 37 | 38 | aside{ 39 | grid-area: side; 40 | font-size: 2rem; 41 | text-align: center; 42 | background-color: rgba(88, 31, 10, 0.586); 43 | padding: 5px; 44 | margin: 5px; 45 | } 46 | 47 | span{ 48 | font-size: 4rem; 49 | } 50 | 51 | button{ 52 | font-family: 'rumoura', sans-serif; 53 | font-size: 20px; 54 | color: #f1d605f5; 55 | text-shadow: 2px 2px #94790d; 56 | background-color: rgba(182, 82, 49, 0.688); 57 | border: solid rgba(88, 31, 10, 0.586); 58 | padding: 10px, 10px, 10px, 10px; 59 | width: 5em; 60 | height: 3em; 61 | 62 | } 63 | 64 | button:hover{ 65 | background-color: rgb(161, 238, 114); 66 | } 67 | 68 | #musicBtn{ 69 | width: 2em; 70 | height: 2em; 71 | } 72 | 73 | section{ 74 | display: grid; 75 | grid-template-columns: repeat(10, auto); 76 | grid-gap: 10px; 77 | perspective: 800px; 78 | justify-content: center; 79 | } 80 | 81 | img{ 82 | width: 115px; 83 | height: 161px; 84 | } 85 | .card{ 86 | position: relative; 87 | transform-style: preserve-3d; 88 | transition: all 2s cubic-bezier(0.175, 0.885, 0.32, 1.275); 89 | box-shadow: rgba(0,0,0,0.2) 0px 5px 15px; 90 | /*shadow @ x, shadow @ y, blurriness*/ 91 | width: 115px; 92 | height: 161px; 93 | 94 | } 95 | 96 | .front, 97 | .back{ 98 | backface-visibility: hidden; 99 | position: absolute; 100 | pointer-events: none; 101 | } 102 | 103 | .front { 104 | transform: rotateY(-180deg); 105 | } 106 | 107 | .toggle{ 108 | transform: rotateY(180deg); 109 | } -------------------------------------------------------------------------------- /animalcrossing.js: -------------------------------------------------------------------------------- 1 | document.addEventListener('DOMContentLoaded', () =>{ 2 | 3 | const section = document.querySelector('section') 4 | const attemptCount = document.querySelector('#attemptCount') 5 | 6 | let attempt = 40; //can be changed 7 | attemptCount.textContent = attempt 8 | 9 | //====array: card data 10 | const cardArray = [ 11 | {name: 'blathers', img: './images/blathers.png'}, 12 | {name: 'brewster', img: './images/brewster.png'}, 13 | {name: 'celeste', img: './images/celeste.png'}, 14 | {name: 'cj', img: './images/cj.png'}, 15 | {name: 'cyrus', img: './images/cyrus.png'}, 16 | {name: 'daisymae', img: './images/daisymae.png'}, 17 | {name: 'flick', img: './images/flick.png'}, 18 | {name: 'gulliver', img: './images/gulliver.png'}, 19 | {name: 'harvey', img: './images/harvey.png'}, 20 | {name: 'isabelle', img: './images/isabelle.png'}, 21 | {name: 'katrina', img: './images/katrina.png'}, 22 | {name: 'kk', img: './images/kk.png'}, 23 | {name: 'label', img: './images/label.png'}, 24 | {name: 'leif', img: './images/leif.png'}, 25 | {name: 'lottie', img: './images/lottie.png'}, 26 | {name: 'luna', img: './images/luna.png'}, 27 | {name: 'mabel', img: './images/mabel.png'}, 28 | {name: 'pascal', img: './images/pascal.png'}, 29 | {name: 'redd', img: './images/redd.png'}, 30 | {name: 'reese', img: './images/reese.png'}, 31 | {name: 'saharah', img: './images/saharah.png'}, 32 | {name: 'timmytommy', img: './images/timmytommy.png'}, 33 | {name: 'tomnook', img: './images/tomnook.png'}, 34 | {name: 'wilbur', img: './images/wilbur.png'}, 35 | {name: 'wisp', img: './images/wisp.png'}, 36 | //another identical set 37 | {name: 'blathers', img: './images/blathers.png'}, 38 | {name: 'brewster', img: './images/brewster.png'}, 39 | {name: 'celeste', img: './images/celeste.png'}, 40 | {name: 'cj', img: './images/cj.png'}, 41 | {name: 'cyrus', img: './images/cyrus.png'}, 42 | {name: 'daisymae', img: './images/daisymae.png'}, 43 | {name: 'flick', img: './images/flick.png'}, 44 | {name: 'gulliver', img: './images/gulliver.png'}, 45 | {name: 'harvey', img: './images/harvey.png'}, 46 | {name: 'isabelle', img: './images/isabelle.png'}, 47 | {name: 'katrina', img: './images/katrina.png'}, 48 | {name: 'kk', img: './images/kk.png'}, 49 | {name: 'label', img: './images/label.png'}, 50 | {name: 'leif', img: './images/leif.png'}, 51 | {name: 'lottie', img: './images/lottie.png'}, 52 | {name: 'luna', img: './images/luna.png'}, 53 | {name: 'mabel', img: './images/mabel.png'}, 54 | {name: 'pascal', img: './images/pascal.png'}, 55 | {name: 'redd', img: './images/redd.png'}, 56 | {name: 'reese', img: './images/reese.png'}, 57 | {name: 'saharah', img: './images/saharah.png'}, 58 | {name: 'timmytommy', img: './images/timmytommy.png'}, 59 | {name: 'tomnook', img: './images/tomnook.png'}, 60 | {name: 'wilbur', img: './images/wilbur.png'}, 61 | {name: 'wisp', img: './images/wisp.png'} 62 | ] 63 | 64 | //====function: randomize & sort 65 | const randSort = () => { 66 | cardArray.sort(() => 0.5-Math.random()) 67 | return cardArray 68 | } 69 | 70 | //====function: game start & set cards on the board 71 | const playGame = () => { 72 | randSort() 73 | //create element, attach class 74 | cardArray.forEach((item) => { 75 | const card = document.createElement('div') 76 | card.classList.add('card') 77 | 78 | const front = document.createElement('img') 79 | front.classList.add('front') 80 | 81 | const back = document.createElement('img') 82 | back.src ='./images/backside.jpg' 83 | back.classList.add('back') 84 | 85 | //attach img file to the cards 86 | front.src = item.img 87 | 88 | //add img name to card div 89 | card.setAttribute('name', item.name) 90 | 91 | //attach the cards to the section + attach front & back to the card 92 | section.appendChild(card) 93 | card.appendChild(front) 94 | card.appendChild(back) 95 | 96 | card.addEventListener('click', (e) =>{ 97 | card.classList.toggle('toggle') 98 | checkCards(e) 99 | }) 100 | }) 101 | } 102 | 103 | //====function: check if two cards are matching 104 | const checkCards = (e) => { 105 | const click = e.target //click -> capture target==cards clicked 106 | flipSound.play() 107 | click.classList.add('flipped') //click -> add 'flipped' to the class 108 | const flip = document.querySelectorAll('.flipped') //save flipped cards into flip variable 109 | const toggle = document.querySelectorAll('.toggle') 110 | 111 | //compare & match after clicking two cards 112 | if (flip.length === 2) { 113 | if(flip[0].getAttribute('name') === flip[1].getAttribute('name')){ 114 | flip.forEach((card) => { 115 | card.classList.remove('flipped') //remove 'flipped' from the class 116 | card.style.pointerEvents = 'none' //make flipped matching cards unclickable 117 | }) 118 | } else { 119 | flip.forEach((card) => { 120 | card.classList.remove('flipped') //remove 'flipped' from the class 121 | 122 | setTimeout(() => card.classList.remove('toggle'), 1000) //cancel 'toggle' after # ms when cards are not matching 123 | }) 124 | 125 | attempt-- //for each wrong set, take 1 off 126 | attemptCount.textContent = attempt 127 | 128 | //LOSE if theres no more attempts 129 | if (attempt === 0){ 130 | loseSound.play() 131 | setTimeout(() => window.alert('Game Over!'), 1000) 132 | section.style.pointerEvents = 'none' 133 | } 134 | } 135 | } 136 | //WIN if toggled cards === total num of cards 137 | if (toggle.length === 50) { 138 | winSound.play() 139 | setTimeout(() => window.alert('You Won!'), 1000) 140 | section.style.pointerEvents = 'none' 141 | } 142 | } 143 | 144 | //====function: reset the game 145 | const reset = () => { 146 | let cardArray = randSort() //shuffle 147 | let fronts = document.querySelectorAll('.front') 148 | let cards = document.querySelectorAll('.card') 149 | 150 | section.style.pointerEvents = 'none' //make cards unclickable until game resets 151 | 152 | //==random & sort again 153 | cardArray.forEach((item, i) => { 154 | cards[i].classList.remove('toggle') //undo flip 155 | cards[i].style.pointerEvents = 'all' //make matching sets from a previous game clickable again 156 | fronts[i].src = item.img //update image 157 | cards[i].setAttribute('name', item.name) //update name 158 | section.style.pointerEvents = 'all' //clickable again after reset 159 | }) 160 | 161 | //==reset # of attempt 162 | attempt = 40 163 | attemptCount.textContent = attempt 164 | } 165 | 166 | //====audio files 167 | const flipSound= new Audio('./sounds/flip.mp3') 168 | flipSound.volume = 0.1 169 | const winSound= new Audio('./sounds/Win.mp3') 170 | const loseSound= new Audio('./sounds/Lose.mp3') 171 | const mainSound= new Audio('./sounds/Main Theme.mp3') 172 | mainSound.loop= true 173 | 174 | //====function: music play/pause 175 | const music = () => { 176 | mainSound.paused ? mainSound.play() : mainSound.pause() 177 | } 178 | 179 | //====button 180 | const resetBtn = document.querySelector('#resetBtn') 181 | resetBtn.addEventListener('click', reset) 182 | 183 | const musicBtn = document.querySelector('#musicBtn') 184 | musicBtn.addEventListener('click', music) 185 | 186 | //====test 187 | playGame() 188 | 189 | }) 190 | --------------------------------------------------------------------------------