Start
Images
Texts
Video
Music
Chess
ARMAGEDDON POP
Music Philosophy Art Math Chess Programming and much more ...
April
22
Tuesday
2025
2025 04 22
Memory - the code
HTML: <code> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Memory of Shame™</title> <style> body { font-family: 'Segoe UI', sans-serif; background: #111; color: #eee; display: flex; flex-direction: column; align-items: center; padding: 20px; } h1 { margin-bottom: 10px; color: #f33; text-shadow: 2px 2px #000; } #game-board { display: grid; grid-template-columns: repeat(6, 80px); grid-gap: 10px; margin: 20px 0; } .card { width: 80px; height: 100px; background-color: #222; border: 2px solid #444; background-size: cover; background-position: center; cursor: pointer; transition: all 0.3s ease; } .card.matched { border-color: limegreen; opacity: 0.5; } #mockDisplay { margin: 20px; font-style: italic; font-size: 1.1em; max-width: 600px; text-align: center; color: #f99; } #status { margin-top: 10px; } input[type="text"] { width: 50px; text-align: center; background: #333; color: white; border: 1px solid #666; } #success, #finalMock { margin-top: 20px; font-weight: bold; color: #0f0; display: none; } #secondsDisplay { display: inline-block; width: 40px; text-align: center; } #soundToggle { margin-top: 10px; font-size: 0.9em; } </style> </head> <body> <h1>Memory of Shame™</h1> <div id="status"> Fails: <input type="text" id="failDisplay" readonly value="0" /> • Time: <span id="secondsDisplay">0</span> s <input type="hidden" id="seconds" /> </div> <div id="soundToggle"> <label><input type="checkbox" id="enableSound"> Enable audio mockery 🎙️</label> </div> <div id="game-board"></div> <div id="mockDisplay">Welcome, brave failure-in-progress.</div> <div id="success">You've finished... somehow.</div> <div id="finalMock"></div> <script src="js/memory-of-shame.js"></script> </body> </html> </code> JavaScript: <code> let cards = [ 'card1.png', 'card1.png', 'card2.png', 'card2.png', 'card3.png', 'card3.png', 'card4.png', 'card4.png', 'card5.png', 'card5.png', 'card6.png', 'card6.png', 'card7.png', 'card7.png', 'card8.png', 'card8.png', 'card9.png', 'card9.png' ]; // Preload images cards.forEach(card => { const img = new Image(); img.src = card; }); const gameBoard = document.getElementById('game-board'); const failDisplay = document.getElementById('failDisplay'); const winDisplay = document.getElementById('success'); const mockDisplay = document.getElementById('mockDisplay'); const finalMock = document.getElementById('finalMock'); let cardOne = null, cardTwo = null; let cardOneElement = null, cardTwoElement = null; let fail = 0; let hit = 0; let startTime, timerStarted = false; let timerInterval; let soundEnabled = false; document.getElementById('enableSound').addEventListener('change', function () { soundEnabled = this.checked; speechSynthesis.cancel(); // trigger voices to load }); let voices = []; function loadVoices() { voices = speechSynthesis.getVoices(); if (voices.length === 0) { speechSynthesis.onvoiceschanged = () => { voices = speechSynthesis.getVoices(); }; } } loadVoices(); function speakWithStyle(text, style = 'fail') { if (!soundEnabled) return; speechSynthesis.cancel(); const utterance = new SpeechSynthesisUtterance(text); let selectedVoice; if (style === 'fail') { selectedVoice = voices.find(voice => voice.name.includes("Daniel") || voice.name.includes("Google UK English Male") || voice.lang === "en-GB" ); utterance.pitch = 0.6; utterance.rate = 0.85; } else if (style === 'success') { selectedVoice = voices.find(voice => voice.name.includes("Samantha") || voice.name.includes("Google US English") || voice.lang === "en-US" ); utterance.pitch = 1.7; utterance.rate = 1.2; } if (selectedVoice) { utterance.voice = selectedVoice; } utterance.volume = 1.0; speechSynthesis.speak(utterance); } function shuffle(array) { for (let i = array.length - 1; i > 0; i--) { let j = Math.floor(Math.random() * (i + 1)); [array[i], array[j]] = [array[j], array[i]]; } return array; } let shuffledCards = shuffle(cards); let mock = [ "Pathetic.", "Is that the best you can do? Apparently, yes.", "Pull yourself together!", "Even a blind chicken finds a grain now and then—but not you.", "Why must I suffer through this?", "The point of the game is to find a match, not to fail repeatedly.", "Useless. Absolutely useless.", "There's a 'For Rent' sign in your head.", "Shouldn't you be focusing on your studies instead?", "Are you completely brain-dead?", "This game clearly isn't for you.", "You could at least try. Could you?", "Wrong, wrong, wrong again. As expected.", "Come on, squeeze those two brain cells together. Maybe then you'll find a match.", "My toaster has better memory than this.", "You just set a new record for incompetence.", "Even a goldfish would outperform you.", "Matching cards isn't quantum physics. Or is it, for you?", "You’re redefining the word 'failure'.", "I've seen potatoes with more pattern recognition.", "Honestly, I’m impressed—at how bad this is.", "There’s still time to pick another hobby.", "Have you considered unplugging and going outside?", "No worries, some people are just naturally awful at memory games.", "Wow. Just wow. In the worst possible way." ]; function stopTimer() { clearInterval(timerInterval); let endTime = new Date(); let timeDiff = endTime - startTime; let totalSeconds = Math.round(timeDiff / 1000); finalMock.textContent += `You completed the game in ${totalSeconds} seconds, and failed ${fail} times — which is quite honestly... impressive, in the worst possible way. They say a goldfish has a memory span of 2 minutes. It probably would’ve scored better than you.`; document.getElementById('seconds').value = totalSeconds; winDisplay.style.display = "block"; speakWithStyle(finalMock.textContent, 'fail'); } function startTimer() { startTime = new Date(); timerStarted = true; timerInterval = setInterval(updateTimer, 1000); } function updateTimer() { let currentTime = new Date(); let timeDiff = currentTime - startTime; let secondsElapsed = Math.floor(timeDiff / 1000); document.getElementById('secondsDisplay').textContent = secondsElapsed; } function getRandomMock() { let randomIndex = Math.floor(Math.random() * mock.length); return mock[randomIndex]; } // Build game board shuffledCards.forEach(card => { let cardElement = document.createElement('div'); cardElement.classList.add('card'); cardElement.dataset.cardValue = card; gameBoard.appendChild(cardElement); cardElement.addEventListener('click', function () { if (!timerStarted) startTimer(); if (cardOne && cardTwo) return; cardElement.style.backgroundImage = `url('${card}')`; cardElement.style.opacity = '1.0'; if (!cardOne) { cardOne = card; cardOneElement = cardElement; } else if (cardElement !== cardOneElement) { cardTwo = card; cardTwoElement = cardElement; if (cardOne === cardTwo) { cardOneElement.classList.add('matched'); cardTwoElement.classList.add('matched'); mockDisplay.textContent = "Wow, look at you go!"; speakWithStyle(mockDisplay.textContent, 'success'); cardOne = null; cardTwo = null; cardOneElement = null; cardTwoElement = null; hit++; if (hit === 9) { stopTimer(); finalMock.style.display = "block"; } } else { setTimeout(() => { if (cardOneElement !== cardTwoElement) { fail++; failDisplay.value = fail; } cardOneElement.style.backgroundImage = ''; cardTwoElement.style.backgroundImage = ''; cardOne = null; cardTwo = null; cardOneElement = null; cardTwoElement = null; let randomMock = getRandomMock(); mockDisplay.textContent = randomMock; speakWithStyle(randomMock, 'fail'); }, 1000); } } }); });