Emotion Sprint<\/title>\n <style>\n body {\n font-family: 'Segoe UI', sans-serif;\n background: #f0f8ff;\n margin: 0;\n padding: 0;\n text-align: center;\n color: #333;\n }\n header {\n background-color: #4a90e2;\n color: white;\n padding: 1rem;\n }\n .game-container {\n max-width: 600px;\n margin: 2rem auto;\n padding: 1rem;\n background: white;\n border-radius: 10px;\n box-shadow: 0 0 10px rgba(0,0,0,0.1);\n }\n .stats {\n display: flex;\n justify-content: space-around;\n margin-bottom: 1rem;\n }\n .grid {\n display: grid;\n grid-template-columns: repeat(4, 80px);\n gap: 10px;\n justify-content: center;\n }\n .card {\n width: 80px;\n height: 80px;\n background-color: #4caf50;\n color: white;\n font-size: 2rem;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 8px;\n cursor: pointer;\n user-select: none;\n }\n .card.flipped {\n background-color: #fff;\n color: #4caf50;\n border: 2px solid #4caf50;\n }\n button {\n margin-top: 1rem;\n padding: 0.5rem 1rem;\n font-size: 1rem;\n background-color: #4a90e2;\n color: white;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n }\n button:hover {\n background-color: #357ab8;\n }\n <\/style>\n<\/head>\n<body>\n <header>\n <h1>Emotion Sprint<\/h1>\n <p>Match the emojis before time runs out!<\/p>\n <\/header>\n\n <div class=\"game-container\">\n <div class=\"stats\">\n <div>\u23f1\ufe0f Time: <span id=\"timer\">60<\/span>s<\/div>\n <div>\ud83c\udfaf Score: <span id=\"score\">0<\/span><\/div>\n <\/div>\n <div class=\"grid\" id=\"grid\"><\/div>\n <button onclick=\"startGame()\">\ud83d\udd01 Restart Game<\/button>\n <\/div>\n\n <script>\n const emojis = ['\ud83d\ude0a','\ud83d\ude22','\ud83d\ude21','\ud83d\ude31','\ud83d\ude0d','\ud83d\ude34','\ud83d\ude0e','\ud83e\udd2f'];\n let cards = [];\n let firstCard = null;\n let lockBoard = false;\n let score = 0;\n let timeLeft = 60;\n let timerInterval;\n\n function shuffle(array) {\n return array.sort(() => 0.5 - Math.random());\n }\n\n function createBoard() {\n const grid = document.getElementById('grid');\n grid.innerHTML = '';\n const shuffled = shuffle([...emojis, ...emojis]);\n shuffled.forEach((emoji, index) => {\n const card = document.createElement('div');\n card.classList.add('card');\n card.dataset.emoji = emoji;\n card.dataset.index = index;\n card.innerText = '';\n card.addEventListener('click', () => flipCard(card));\n grid.appendChild(card);\n });\n }\n\n function flipCard(card) {\n if (lockBoard || card.classList.contains('flipped')) return;\n\n card.classList.add('flipped');\n card.innerText = card.dataset.emoji;\n\n if (!firstCard) {\n firstCard = card;\n return;\n }\n\n if (firstCard.dataset.emoji === card.dataset.emoji) {\n score += 10;\n document.getElementById('score').innerText = score;\n firstCard = null;\n } else {\n lockBoard = true;\n setTimeout(() => {\n firstCard.classList.remove('flipped');\n card.classList.remove('flipped');\n firstCard.innerText = '';\n card.innerText = '';\n firstCard = null;\n lockBoard = false;\n }, 800);\n }\n }\n\n function startTimer() {\n clearInterval(timerInterval);\n timeLeft = 60;\n document.getElementById('timer').innerText = timeLeft;\n timerInterval = setInterval(() => {\n timeLeft--;\n document.getElementById('timer').innerText = timeLeft;\n if (timeLeft <= 0) {\n clearInterval(timerInterval);\n alert('\u23f0 Time\u2019s up! Your score: ' + score);\n }\n }, 1000);\n }\n\n function startGame() {\n score = 0;\n document.getElementById('score').innerText = score;\n createBoard();\n startTimer();\n }\n\n \/\/ Start the game on load\n window.onload = startGame;\n <\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Emotion Sprint Emotion Sprint Match the emojis before time runs out! \u23f1\ufe0f Time: 60s \ud83c\udfaf Score: 0 \ud83d\udd01 Restart Game<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"footnotes":""},"class_list":["post-4063","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/pages\/4063","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/comments?post=4063"}],"version-history":[{"count":2,"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/pages\/4063\/revisions"}],"predecessor-version":[{"id":4065,"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/pages\/4063\/revisions\/4065"}],"wp:attachment":[{"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/media?parent=4063"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":4063,"date":"2025-06-15T03:40:15","date_gmt":"2025-06-15T08:40:15","guid":{"rendered":"https:\/\/madlysane.com\/?page_id=4063"},"modified":"2025-06-15T03:40:15","modified_gmt":"2025-06-15T08:40:15","slug":"emotion-sprint","status":"publish","type":"page","link":"https:\/\/madlysane.site\/en\/emotion-sprint\/","title":{"rendered":"Emotion Sprint"},"content":{"rendered":"\n\n\n\n \n \n Emotion Sprint<\/title>\n <style>\n body {\n font-family: 'Segoe UI', sans-serif;\n background: #f0f8ff;\n margin: 0;\n padding: 0;\n text-align: center;\n color: #333;\n }\n header {\n background-color: #4a90e2;\n color: white;\n padding: 1rem;\n }\n .game-container {\n max-width: 600px;\n margin: 2rem auto;\n padding: 1rem;\n background: white;\n border-radius: 10px;\n box-shadow: 0 0 10px rgba(0,0,0,0.1);\n }\n .stats {\n display: flex;\n justify-content: space-around;\n margin-bottom: 1rem;\n }\n .grid {\n display: grid;\n grid-template-columns: repeat(4, 80px);\n gap: 10px;\n justify-content: center;\n }\n .card {\n width: 80px;\n height: 80px;\n background-color: #4caf50;\n color: white;\n font-size: 2rem;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 8px;\n cursor: pointer;\n user-select: none;\n }\n .card.flipped {\n background-color: #fff;\n color: #4caf50;\n border: 2px solid #4caf50;\n }\n button {\n margin-top: 1rem;\n padding: 0.5rem 1rem;\n font-size: 1rem;\n background-color: #4a90e2;\n color: white;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n }\n button:hover {\n background-color: #357ab8;\n }\n <\/style>\n<\/head>\n<body>\n <header>\n <h1>Emotion Sprint<\/h1>\n <p>Match the emojis before time runs out!<\/p>\n <\/header>\n\n <div class=\"game-container\">\n <div class=\"stats\">\n <div>\u23f1\ufe0f Time: <span id=\"timer\">60<\/span>s<\/div>\n <div>\ud83c\udfaf Score: <span id=\"score\">0<\/span><\/div>\n <\/div>\n <div class=\"grid\" id=\"grid\"><\/div>\n <button onclick=\"startGame()\">\ud83d\udd01 Restart Game<\/button>\n <\/div>\n\n <script>\n const emojis = ['\ud83d\ude0a','\ud83d\ude22','\ud83d\ude21','\ud83d\ude31','\ud83d\ude0d','\ud83d\ude34','\ud83d\ude0e','\ud83e\udd2f'];\n let cards = [];\n let firstCard = null;\n let lockBoard = false;\n let score = 0;\n let timeLeft = 60;\n let timerInterval;\n\n function shuffle(array) {\n return array.sort(() => 0.5 - Math.random());\n }\n\n function createBoard() {\n const grid = document.getElementById('grid');\n grid.innerHTML = '';\n const shuffled = shuffle([...emojis, ...emojis]);\n shuffled.forEach((emoji, index) => {\n const card = document.createElement('div');\n card.classList.add('card');\n card.dataset.emoji = emoji;\n card.dataset.index = index;\n card.innerText = '';\n card.addEventListener('click', () => flipCard(card));\n grid.appendChild(card);\n });\n }\n\n function flipCard(card) {\n if (lockBoard || card.classList.contains('flipped')) return;\n\n card.classList.add('flipped');\n card.innerText = card.dataset.emoji;\n\n if (!firstCard) {\n firstCard = card;\n return;\n }\n\n if (firstCard.dataset.emoji === card.dataset.emoji) {\n score += 10;\n document.getElementById('score').innerText = score;\n firstCard = null;\n } else {\n lockBoard = true;\n setTimeout(() => {\n firstCard.classList.remove('flipped');\n card.classList.remove('flipped');\n firstCard.innerText = '';\n card.innerText = '';\n firstCard = null;\n lockBoard = false;\n }, 800);\n }\n }\n\n function startTimer() {\n clearInterval(timerInterval);\n timeLeft = 60;\n document.getElementById('timer').innerText = timeLeft;\n timerInterval = setInterval(() => {\n timeLeft--;\n document.getElementById('timer').innerText = timeLeft;\n if (timeLeft <= 0) {\n clearInterval(timerInterval);\n alert('\u23f0 Time\u2019s up! Your score: ' + score);\n }\n }, 1000);\n }\n\n function startGame() {\n score = 0;\n document.getElementById('score').innerText = score;\n createBoard();\n startTimer();\n }\n\n \/\/ Start the game on load\n window.onload = startGame;\n <\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Emotion Sprint Emotion Sprint Match the emojis before time runs out! \u23f1\ufe0f Time: 60s \ud83c\udfaf Score: 0 \ud83d\udd01 Restart Game<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"footnotes":""},"class_list":["post-4063","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/pages\/4063","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/comments?post=4063"}],"version-history":[{"count":2,"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/pages\/4063\/revisions"}],"predecessor-version":[{"id":4065,"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/pages\/4063\/revisions\/4065"}],"wp:attachment":[{"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/media?parent=4063"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}