Viewing Program

Program Data

Program thumbnail for "{props.program.title}"

Title	KA Memory Match (Game)
ID	6525579605524480
Created	4 years ago, 1612186116191
Updated	4 years ago, 1612585419427
Code	<!DOCTYPE html> <!-- KA Memory Match Gray Wolf, February 2021 Want to be notified when I create a new program? Sub here: https://www.khanacademy.org/cs/gray-wolf/4876588413698048 ------------------------------------------------------- I was supposed to be working on my animation/game, but I tend to get side-tracked WAY too easily :/ I'll be spending this entire week dedicated to my main project ready for release next Monday :) ------------------------------------------------------- Game made using HTML, CSS (animations, 3D perspective, etc.) and plain JavaScript only. A fairly simple game concept - was mainly focused on the CSS animations including the 3D perspective / layered effect. ------------------------------------------------------- This game was initial based off a basic tutorial on YouTube: https://www.freecodecamp.org/news/learn-javascript-by-building-7-games-video-course Then I got a bit carried away and added a bunch more stuff including the 3D persepective, animations, multiple difficulties, menu, bunch of fixes, and other additions. ------------------------------------------------------- Also has some built-in logic to display a resize screen (if the initial dimensions aren't correct) so the user doesn't have to copy a URL to change the width/height. I might make a separate demo just focused on that so others can use it (only for HTML programs). ------------------------------------------------------- Credit to Steffan and Willard for suggesting a better random sorting algorithm for the game cards https://www.khanacademy.org/profile/Steffan153 https://www.khanacademy.org/profile/willllard Heart css background pattern from http://projects.verou.me/css3patterns/#hearts --> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>KA Memory Match (Game)</title> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Righteous&display=swap" rel="stylesheet"> <style> :root { --button-color: rgb(255, 192, 203); --buttonhover-color: rgba(231, 84, 109, 0.8); } , ::before, ::after { box-sizing: border-box; } body { font-family: 'Ubuntu', sans-serif; height: 100vh; background: radial-gradient(circle closest-side at 60% 43%, rgb(187, 0, 51) 26%, rgba(187, 0, 51, 0) 27%), radial-gradient(circle closest-side at 40% 43%, rgb(187, 0, 51) 26%, rgba(187, 0, 51, 0) 27%), radial-gradient(circle closest-side at 40% 22%, rgb(221, 51, 85) 45%, rgba(221, 51, 85, 0) 46%), radial-gradient(circle closest-side at 60% 22%, rgb(221, 51, 85) 45%, rgba(221, 51, 85, 0) 46%), radial-gradient(circle closest-side at 50% 35%, rgb(221, 51, 85) 30%, rgba(221, 51, 85, 0) 31%), radial-gradient(circle closest-side at 60% 43%, rgb(187, 0, 51) 26%, rgba(187, 0, 51, 0) 27%) 50px 50px, radial-gradient(circle closest-side at 40% 43%, rgb(187, 0, 51) 26%, rgba(187, 0, 51, 0) 27%) 50px 50px, radial-gradient(circle closest-side at 40% 22%, rgb(221, 51, 85) 45%, rgba(221, 51, 85, 0) 46%) 50px 50px, radial-gradient(circle closest-side at 60% 22%, rgb(221, 51, 85) 45%, rgba(221, 51, 85, 0) 46%) 50px 50px, radial-gradient(circle closest-side at 50% 35%, rgb(221, 51, 85) 30%, rgba(221, 51, 85, 0) 31%) 50px 50px; background-color: rgb(187, 0, 51); background-size:100px 100px; opacity: 0.8; overflow: hidden; } main { margin: auto; text-align: center; position: relative; width: 500px; perspective: 1000px; } main > h1 { font-family: 'Righteous', cursive; color: bisque; font-size: 2.5em; } #status { padding-bottom: 20px; } #card { opacity: 0; transform: translateY(-100%); perspective: 2000px; -webkit-animation: 1.5s slide-down 1s ease forwards; -moz-animation: 1.5s slide-down 1s ease forwards; -o-animation: 1.5s slide-down 1s ease forwards; animation: 1.5s slide-down 1s ease forwards; } #card-content { text-align: center; position: relative; transition: transform 3s; background: pink; transform-style: preserve-3d; margin: auto; transform: rotateY(.04turn) rotateX(.04turn) translateY(2.5rem) translateX(-2rem); border-radius: 0 2em 0 2em; } #card-content.over { transform: rotateY(.5turn); transition-delay: 2s; } .card-front, .card-back { transform-style: preserve-3d; backface-visibility: hidden; height: 100%; } .card-body, #grxid > img { transform: translateZ(4rem); } .card-front { display: flex; height: 100%; transform: translateZ(3rem); } .card-back { display: grid; position: absolute; top:0; left: 0; bottom: 0; right: 0; padding-top: 40px; transform: rotateY(.5turn); background: bisque; color: black; padding: 1em; border-radius: 2em 0 2em 0; } #grid { margin: auto; display: flex; flex-wrap: wrap; justify-content: space-between; width: 500px; background-color: bisque; transform: translateZ(5rem); padding: 1em; border-radius: 2em 0 2em 0; transform-style: preserve-3d; } #grid > img { margin: 0.5em 0; transition: all 0.4s ease; transform: translateZ(2rem); } #grid > img:hover { cursor: pointer; transform: translateZ(0rem); } #grid > img.spin { transform: translateZ(0rem); -webkit-animation: 1.5s spin alternate infinite; -moz-animation: 1.5s spin alternate infinite; -o-animation: 1.5s spin alternate infinite; animation: 1.5s spin alternate infinite; } #card-body-message { padding-bottom: 2em; } #buttons { display: flex; justify-content: center; align-items: center; } #current-difficulty { padding: 1em 0; font-size: 1.2em; } .button { display: flex; justify-content: center; align-items: center; padding: 10px 10px; background-color: var(--button-color); width: 130px; height: 60px; margin: 15px auto; font-size: 1.0em; transition: all 0.5s ease; transform: translateZ(5rem); border-radius: 2em 0 2em 0; } .button:hover { cursor: pointer; background-color: var(--buttonhover-color); border-radius: 0 2em 0 2em; } .button.selected { background-color: rgba(212, 48, 76, 0.8); color: rgb(255, 255, 255); } #buttons > div:active { background-color: rgba(212, 48, 76, 0.8); } #grid > img.match { -webkit-animation: 1s rot ease forwards; -moz-animation: 1s rot ease forwards; -o-animation: 1s rot ease forwards; animation: 1s rot ease forwards; } /resize styles for main resize button view/ #resize { position: absolute; top: 0; left: 0; width:100vw; height: 100vh; box-sizing: border-box; background-color: rgb(255, 255, 255); color: rgb(41, 40, 41); z-index: 1000; } #resize-container { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100vw; height: 100vh; } #resize-button { margin-top: 10px; padding: 20px; text-decoration: none; color: rgb(41, 40, 41); background-color: var(--button-color); font-size: 1.1em; transition: all 0.5s ease; border-radius: 2em 0 2em 0; } #resize-button:hover { cursor: pointer; background-color: var(--buttonhover-color); border-radius: 0 2em 0 2em; } @-webkit-keyframes slide-down { to { transform: translateY(0); opacity: 1; } } @-moz-keyframes slide-down { to { transform: translateY(0); opacity: 1; } } @-o-keyframes slide-down { to { transform: translateY(0); opacity: 1; } } @keyframes slide-down { to { transform: translateY(0); opacity: 1; } } @-webkit-keyframes rot { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @-moz-keyframes rot { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @-o-keyframes rot { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes rot { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @-webkit-keyframes spin { from { transform: rotate(0deg) scale(1.0); } to { transform: rotate(360deg) scale(0.8); } } @-moz-keyframes spin { from { transform: rotate(0deg) scale(1.0); } to { transform: rotate(360deg) scale(0.8); } } @-o-keyframes spin { from { transform: rotate(0deg) scale(1.0); } to { transform: rotate(360deg) scale(0.8); } } @keyframes spin { from { transform: rotate(0deg) scale(1.0); } to { transform: rotate(360deg) scale(0.8); } } </style> </head> <body> <section id="resize"> <div id="resize-container"> <h2>Welcome to KA Memory Match</h2> <p>This page is best viewed with a width of 750 and height of 800.</p> <a id="resize-button" href="https://www.khanacademy.org/computer-programming/ka-memory-match/6525579605524480?width=750&height=800"> Click to view at the correct size </a> </div> </section> <!--Resize Section--> <main id="main"> <h1>KA Memory Match</h1> <div id="status"> <h2 id="message">Test your memory skills!!</h2> </div> <div id="card"> <div id="card-content" class="over"> <div class="card-front"> <div id="grid"></div> </div> <div class="card-back"> <div class="card-body"> <h2 id="card-body-heading">Welcome</h2> <p id="card-body-message">Try to match the cards in the least amount of turns.</p> <p>Click the difficulty you want below then click on Start.</p> <div id="buttons"> <div id="easyButton" class="button difficulty-button selected" data-cards="16">Easy</div> <div id="mediumButton" class="button difficulty-button" data-cards="24">Medium</div> <div id="hardButton" class="button difficulty-button" data-cards="36">Hard</div> </div> <p id="current-difficulty">Difficulty: Easy</p> <div id="startButton" class="button">Start</div> </div> </div> </div> </div> </main> <!--Main section--> <script type="application/javascript"> //ensure the DOM has been fully loaded before running the script document.addEventListener("DOMContentLoaded", function() { //card array including name and img src const cardArrayAll = [ { name: 'duskpin-sapling', img: 'https://www.kasandbox.org/programming-images/avatars/duskpin-sapling.png' }, { name: 'leafers-sapling', img: 'https://www.kasandbox.org/programming-images/avatars/leafers-sapling.png' }, { name: 'piceratops-sapling', img: 'https://www.kasandbox.org/programming-images/avatars/piceratops-sapling.png' }, { name: 'starky-sapling', img: 'https://www.kasandbox.org/programming-images/avatars/starky-sapling.png' }, { name: 'leafers-tree', img: 'https://www.kasandbox.org/programming-images/avatars/leafers-tree.png' }, { name: 'marcimus', img: 'https://www.kasandbox.org/programming-images/avatars/marcimus.png' }, { name: 'marcimus-orange', img: 'https://www.kasandbox.org/programming-images/avatars/marcimus-orange.png' }, { name: 'marcimus-purple', img: 'https://www.kasandbox.org/programming-images/avatars/marcimus-purple.png' }, { name: 'marcimus-red', img: 'https://www.kasandbox.org/programming-images/avatars/marcimus-red.png' }, { name: 'mr-pants', img: 'https://www.kasandbox.org/programming-images/avatars/mr-pants.png' }, { name: 'mr-pants-green', img: 'https://www.kasandbox.org/programming-images/avatars/mr-pants-green.png' }, { name: 'mr-pants-orange', img: 'https://www.kasandbox.org/programming-images/avatars/mr-pants-orange.png' }, { name: 'mr-pants-pink', img: 'https://www.kasandbox.org/programming-images/avatars/mr-pants-pink.png' }, { name: 'robot_female_1', img: 'https://www.kasandbox.org/programming-images/avatars/robot_female_1.png' }, { name: 'robot_female_2', img: 'https://www.kasandbox.org/programming-images/avatars/robot_female_2.png' }, { name: 'robot_female_3', img: 'https://www.kasandbox.org/programming-images/avatars/robot_female_3.png' }, { name: 'robot_male_1', img: 'https://www.kasandbox.org/programming-images/avatars/robot_male_1.png' }, { name: 'robot_male_2', img: 'https://www.kasandbox.org/programming-images/avatars/robot_male_2.png' }, { name: 'robot_male_3', img: 'https://www.kasandbox.org/programming-images/avatars/robot_male_3.png' }, { name: 'Hopper-Happy', img: 'https://www.kasandbox.org/programming-images/creatures/Hopper-Happy.png' }, { name: 'spunky-sam', img: 'https://www.kasandbox.org/programming-images/avatars/spunky-sam.png' }, { name: 'spunky-sam-green', img: 'https://www.kasandbox.org/programming-images/avatars/spunky-sam-green.png' }, { name: 'spunky-sam-red', img: 'https://www.kasandbox.org/programming-images/avatars/spunky-sam-red.png' }, { name: 'OhNoes', img: 'https://www.kasandbox.org/programming-images/creatures/OhNoes.png' }, { name: 'Winston', img: 'https://www.kasandbox.org/programming-images/creatures/Winston.png' }, { name: 'old-spice-man', img: 'https://www.kasandbox.org/programming-images/avatars/old-spice-man.png' }, { name: 'old-spice-man-blue', img: 'https://www.kasandbox.org/programming-images/avatars/old-spice-man-blue.png' }, { name: 'orange-juice-squid', img: 'https://www.kasandbox.org/programming-images/avatars/orange-juice-squid.png' }, { name: 'mr-pink', img: 'https://www.kasandbox.org/programming-images/avatars/mr-pink.png' }, { name: 'purple-pi', img: 'https://www.kasandbox.org/programming-images/avatars/purple-pi.png' }, { name: 'Hopper-Cool', img: 'https://www.kasandbox.org/programming-images/creatures/Hopper-Cool.png' } ]; //card array that holds the current game cards let cardArray = []; //get grid createElement const grid = document.getElementById("grid"); //get message elements const message = document.getElementById('message'); //get card content element const cardContent = document.getElementById('card-content'); //get difficulty element const difficultyContent = document.getElementById('current-difficulty') //default image on card const defaultCardImg = "https://www.kasandbox.org/programming-images/avatars/leaf-grey.png"; //number of cards (based on difficulty) let numberOfCards = 16; //default to easy //card size based in numberOfCards (difficulty) let cardSize = 105; //holds the two cards that are chosen let cardsChosen = []; //holds the ids of the matched cards let matches = []; //holds the number of turns in a game let turns = 0; //create the board function createBoard() { //clear the game array ready for adding new cards cardArray.length = 0; //randomly sort the ALL cards array cardArrayAll.sort(() => 0.5 - Math.random()); //get the first n cards from all cards based on difficulty and add to game cards array //need two of each card, so two separate push commands are required for(let i = 0; i < numberOfCards / 2; i++) { cardArray.push({ name: cardArrayAll[i].name, img: cardArrayAll[i].img }); cardArray.push({ name: cardArrayAll[i].name, img: cardArrayAll[i].img }); } //randomly sort the game cards array now that we have our list of cards cardArray.sort((a, b) => { a.rand = a.rand \|\| Math.random() b.rand = b.rand \|\| Math.random() return a.rand - b.rand; }); //loop through the cards array for(let i = 0; i < cardArray.length; i++) { //create new element for each card let card = document.createElement('img'); //set default (initial) block image card.setAttribute('src', defaultCardImg); //set width of image card.setAttribute('width', cardSize+'px'); card.setAttribute('height', cardSize+'px'); //capture id for each card card.setAttribute('data-id', i); //set click event for each card to call flipCard function card.addEventListener('click', flipCard); //add card element to the grid grid.appendChild(card); } } //checks if the two cards match function checkForMatch() { //get all the cards in the grid let cards = document.querySelectorAll('#grid > img'); //get the ids of the two cards that are currently chosen const card1 = cardsChosen[0].id; const card2 = cardsChosen[1].id; //compare the two cards using their name if(cardsChosen[0].name === cardsChosen[1].name) { //if they match then add the ids to the matches array matches.push(card1); matches.push(card2); //spin the two cards that match cards[card1].classList.add('match'); cards[card2].classList.add('match'); } else { //if they don't match //reset the images for each card to the default block image cards[card1].setAttribute('src', defaultCardImg); cards[card2].setAttribute('src', defaultCardImg); } //add to the number of turns turns++; //clear the chosen cards array cardsChosen.length = 0; //update the number of matches/turns displayed on the screen message.textContent = 'Matches: ' + (matches.length / 2) + ', Turns: ' + turns; //if the number of matches is equal to the number of images if(matches.length === cards.length) { //update the message display on the screen message.textContent = 'You found them all!'; //add spin class to all cards so the spin animation runs //and remove match class to remove the current forwards animations cards.forEach(card => { card.classList.remove('match'); card.classList.add('spin'); }) //add class to perform the grid flip animation cardContent.classList.add('over'); //update the content document.getElementById('card-body-heading').textContent = "Congratulations!!"; document.getElementById('card-body-message').textContent = "You completed the game in " + turns + " turns."; } } //handles the flipping over of the cards function flipCard() { //perform some initial checks to confirm valid card //only allow two cards to be selected at a once if(cardsChosen.length === 2) { return; } //get the id of the current card let id = this.getAttribute('data-id'); //only if the cards haven't already been matched if(matches.includes(id)) { return; } //ensure that you can't select the same card twice if(cardsChosen.length === 1 && cardsChosen[0].id === id) { return; } //add the card to the chosen cards array (name and id) cardsChosen.push({ name: cardArray[id].name, id: id }); //change the image displayed to the actual card image this.setAttribute('src', cardArray[id].img); //if two cards are chosen then check for a match after 1 second delay if(cardsChosen.length === 2) { setTimeout(checkForMatch, 1000); } } function resetGame() { //reset number of matches and turns matches.length = 0, turns = 0; //update the number of matches/turns displayed on the screen message.textContent = 'Matches: 0, Turns: 0'; //clear all the existing images from the grid while (grid.firstChild) { grid.removeChild(grid.firstChild); } //reset the board createBoard(); //turn the board back over to see the cards cardContent.classList.remove('over'); } function setDifficulty() { //set the number of cards to be used numberOfCards = this.getAttribute('data-cards'); switch(numberOfCards) { case "16": cardSize = 105; difficultyContent.textContent = "Difficulty: Easy"; break; case "24": cardSize = 80; difficultyContent.textContent = "Difficulty: Medium"; break; case "36": cardSize = 70; difficultyContent.textContent = "Difficulty: Hard"; break; } //set the current button as selected for CSS styling let buttons = document.querySelectorAll('.difficulty-button'); buttons.forEach(button => { button.classList.remove('selected'); }) this.classList.add('selected'); } //add click event for the start button document.getElementById('startButton').addEventListener('click', resetGame); //add click event for the difficulty buttons document.getElementById('easyButton').addEventListener('click', setDifficulty); document.getElementById('mediumButton').addEventListener('click', setDifficulty); document.getElementById('hardButton').addEventListener('click', setDifficulty); //create the initial board with the cards createBoard(); //Handle size of canvas for the site let resizeElement = document.getElementById("resize"); let mainElement = document.getElementById("main"); if(window.innerWidth === 750 && window.innerHeight === 800) { resizeElement.style.display = "none"; mainElement.style.display = "block"; } else { resizeElement.style.display = "block"; mainElement.style.display = "none"; } function preloadImages() { let preloadLink = undefined; cardArrayAll.forEach(card => { preloadLink = document.createElement("link"); preloadLink.href = card.img; preloadLink.rel = "preload"; preloadLink.as = "image"; document.head.appendChild(preloadLink); }) } preloadImages(); }); </script> </body> </html>
Folds
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgN2yrt_LCww
Votes	196
Spin-Offs	6
Type	WEBPAGE
Width	400
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Gray Wolf 🐺
Author Name	grantjenkins
Author ID	kaid_639291037700385781852565
Author Profile Access	COACH

Archive Data

Added	10 months ago, 1739458894944
Updated	10 months ago, 1739458901053
Source Deleted	unknown