Color Matching Game<\/title>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@tensorflow\/tfjs@3.18.0\/dist\/tf.min.js\"><\/script>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@tensorflow-models\/mobilenet@1.0.0\"><\/script>\n <style>\n body {\n font-family: 'Comic Sans MS', cursive, sans-serif;\n text-align: center;\n background-color: #f9f7f0;\n padding: 20px;\n }\n h1 {\n color: #ff8a5c;\n margin-bottom: 10px;\n }\n .subtitle {\n color: #5eaaa8;\n margin-top: 0;\n margin-bottom: 20px;\n }\n .game-area {\n display: flex;\n flex-direction: column;\n align-items: center;\n max-width: 600px;\n margin: 0 auto;\n }\n .target-colors {\n display: flex;\n justify-content: center;\n flex-wrap: wrap;\n margin-bottom: 20px;\n }\n .color-box {\n width: 80px;\n height: 80px;\n margin: 10px;\n border: 4px solid #333;\n border-radius: 10px;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: bold;\n color: white;\n text-shadow: 1px 1px 2px #000;\n }\n .objects {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n margin-bottom: 20px;\n }\n .object {\n width: 100px;\n height: 100px;\n margin: 10px;\n border: 4px solid #ddd;\n border-radius: 15px;\n background-color: white;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n cursor: grab;\n transition: all 0.3s;\n }\n .object img {\n max-width: 80px;\n max-height: 60px;\n }\n .object p {\n margin: 5px 0 0;\n font-size: 14px;\n color: #333;\n }\n .controls {\n margin: 20px 0;\n }\n button {\n background-color: #5eaaa8;\n color: white;\n border: none;\n padding: 12px 24px;\n font-size: 18px;\n border-radius: 30px;\n cursor: pointer;\n margin: 0 10px;\n transition: all 0.3s;\n }\n button:hover {\n background-color: #3d7a78;\n transform: scale(1.05);\n }\n .message {\n font-size: 24px;\n margin: 20px 0;\n min-height: 30px;\n color: #ff8a5c;\n font-weight: bold;\n }\n .highlight {\n animation: pulse 1s infinite;\n }\n @keyframes pulse {\n 0% { transform: scale(1); box-shadow: 0 0 0 rgba(0,0,0,0.1); }\n 50% { transform: scale(1.05); box-shadow: 0 0 15px rgba(0,0,0,0.2); }\n 100% { transform: scale(1); box-shadow: 0 0 0 rgba(0,0,0,0.1); }\n }\n .correct {\n border: 4px solid #2ecc71 !important;\n background-color: rgba(46, 204, 113, 0.2) !important;\n }\n .webcam-container {\n margin: 20px 0;\n display: none;\n }\n #webcam {\n width: 300px;\n height: 225px;\n border-radius: 15px;\n border: 4px solid #5eaaa8;\n }\n #snap-btn {\n background-color: #ff8a5c;\n margin-top: 10px;\n }\n #snap-btn:hover {\n background-color: #e67a4c;\n }\n <\/style>\n<\/head>\n<body>\n <h1>Color Matching Game<\/h1>\n <p class=\"subtitle\">Drag objects to matching color boxes!<\/p>\n \n <div class=\"message\">Find something <span id=\"target-color-text\">red<\/span>!<\/div>\n \n <div class=\"target-colors\">\n <div class=\"color-box\" style=\"background-color: red;\" data-color=\"red\">Red<\/div>\n <div class=\"color-box\" style=\"background-color: blue;\" data-color=\"blue\">Blue<\/div>\n <div class=\"color-box\" style=\"background-color: green;\" data-color=\"green\">Green<\/div>\n <div class=\"color-box\" style=\"background-color: yellow;\" data-color=\"yellow\">Yellow<\/div>\n <div class=\"color-box\" style=\"background-color: orange;\" data-color=\"orange\">Orange<\/div>\n <div class=\"color-box\" style=\"background-color: purple;\" data-color=\"purple\">Purple<\/div>\n <\/div>\n \n <div class=\"objects\">\n <div class=\"object\" draggable=\"true\" data-color=\"red\">\n <img decoding=\"async\" src=\"https:\/\/cdn-icons-png.flaticon.com\/512\/3212\/3212608.png\" alt=\"Apple\">\n <p>Apple<\/p>\n <\/div>\n <div class=\"object\" draggable=\"true\" data-color=\"blue\">\n <img decoding=\"async\" src=\"https:\/\/cdn-icons-png.flaticon.com\/512\/3212\/3212567.png\" alt=\"Whale\">\n <p>Whale<\/p>\n <\/div>\n <div class=\"object\" draggable=\"true\" data-color=\"green\">\n <img decoding=\"async\" src=\"https:\/\/cdn-icons-png.flaticon.com\/512\/2828\/2828917.png\" alt=\"Frog\">\n <p>Frog<\/p>\n <\/div>\n <div class=\"object\" draggable=\"true\" data-color=\"yellow\">\n <img decoding=\"async\" src=\"https:\/\/cdn-icons-png.flaticon.com\/512\/616\/616516.png\" alt=\"Banana\">\n <p>Banana<\/p>\n <\/div>\n <div class=\"object\" draggable=\"true\" data-color=\"orange\">\n <img decoding=\"async\" src=\"https:\/\/cdn-icons-png.flaticon.com\/512\/3081\/3081840.png\" alt=\"Orange\">\n <p>Orange<\/p>\n <\/div>\n <div class=\"object\" draggable=\"true\" data-color=\"purple\">\n <img decoding=\"async\" src=\"https:\/\/cdn-icons-png.flaticon.com\/512\/2742\/2742674.png\" alt=\"Grapes\">\n <p>Grapes<\/p>\n <\/div>\n <\/div>\n \n <div class=\"controls\">\n <button id=\"new-color-btn\">New Color<\/button>\n <button id=\"camera-btn\">Use Camera<\/button>\n <\/div>\n \n <div class=\"webcam-container\">\n <video id=\"webcam\" autoplay playsinline><\/video>\n <button id=\"snap-btn\">Take Picture<\/button>\n <canvas id=\"canvas\" style=\"display:none;\"><\/canvas>\n <\/div>\n\n <script>\n \/\/ Game state\n let currentTargetColor = 'red';\n let model;\n let webcamStream;\n \n \/\/ DOM elements\n const targetColorText = document.getElementById('target-color-text');\n const colorBoxes = document.querySelectorAll('.color-box');\n const objects = document.querySelectorAll('.object');\n const newColorBtn = document.getElementById('new-color-btn');\n const cameraBtn = document.getElementById('camera-btn');\n const webcamContainer = document.querySelector('.webcam-container');\n const webcam = document.getElementById('webcam');\n const snapBtn = document.getElementById('snap-btn');\n const canvas = document.getElementById('canvas');\n const messageEl = document.querySelector('.message');\n \n \/\/ Initialize the game\n async function init() {\n \/\/ Load the MobileNet model for color detection from camera\n model = await mobilenet.load();\n \n \/\/ Set up drag and drop\n setupDragAndDrop();\n \n \/\/ Set up button handlers\n newColorBtn.addEventListener('click', setRandomTargetColor);\n cameraBtn.addEventListener('click', toggleCamera);\n snapBtn.addEventListener('click', captureAndAnalyze);\n \n \/\/ Highlight the current target color\n highlightTargetColor();\n }\n \n \/\/ Set up drag and drop functionality\n function setupDragAndDrop() {\n objects.forEach(object => {\n object.addEventListener('dragstart', (e) => {\n e.dataTransfer.setData('text\/plain', object.getAttribute('data-color'));\n setTimeout(() => {\n object.style.opacity = '0.4';\n }, 0);\n });\n \n object.addEventListener('dragend', () => {\n object.style.opacity = '1';\n });\n });\n \n colorBoxes.forEach(box => {\n box.addEventListener('dragover', (e) => {\n e.preventDefault();\n });\n \n box.addEventListener('drop', (e) => {\n e.preventDefault();\n const color = e.dataTransfer.getData('text\/plain');\n const boxColor = box.getAttribute('data-color');\n \n if (color === boxColor) {\n \/\/ Correct match\n box.classList.add('correct');\n setTimeout(() => {\n box.classList.remove('correct');\n }, 1000);\n \n if (color === currentTargetColor) {\n messageEl.textContent = \"Great job! You found the \" + currentTargetColor + \" one!\";\n setTimeout(() => {\n setRandomTargetColor();\n }, 1500);\n }\n }\n });\n });\n }\n \n \/\/ Set a random target color\n function setRandomTargetColor() {\n const colors = ['red', 'blue', 'green', 'yellow', 'orange', 'purple'];\n const randomIndex = Math.floor(Math.random() * colors.length);\n currentTargetColor = colors[randomIndex];\n targetColorText.textContent = currentTargetColor;\n targetColorText.style.color = currentTargetColor;\n highlightTargetColor();\n messageEl.textContent = \"Find something \" + currentTargetColor + \"!\";\n }\n \n \/\/ Highlight the current target color box\n function highlightTargetColor() {\n colorBoxes.forEach(box => {\n box.classList.remove('highlight');\n if (box.getAttribute('data-color') === currentTargetColor) {\n box.classList.add('highlight');\n }\n });\n }\n \n \/\/ Toggle camera mode\n async function toggleCamera() {\n if (webcamContainer.style.display === 'none' || !webcamContainer.style.display) {\n try {\n webcamStream = await navigator.mediaDevices.getUserMedia({ video: true });\n webcam.srcObject = webcamStream;\n webcamContainer.style.display = 'block';\n cameraBtn.textContent = 'Hide Camera';\n messageEl.textContent = \"Take a picture of something \" + currentTargetColor + \"!\";\n } catch (err) {\n alert(\"Could not access the camera. Please make sure you've allowed camera access.\");\n console.error(err);\n }\n } else {\n if (webcamStream) {\n webcamStream.getTracks().forEach(track => track.stop());\n }\n webcamContainer.style.display = 'none';\n cameraBtn.textContent = 'Use Camera';\n messageEl.textContent = \"Find something \" + currentTargetColor + \"!\";\n }\n }\n \n \/\/ Capture and analyze an image from the camera\n async function captureAndAnalyze() {\n \/\/ Set canvas dimensions to match video\n canvas.width = webcam.videoWidth;\n canvas.height = webcam.videoHeight;\n \n \/\/ Draw video frame to canvas\n const ctx = canvas.getContext('2d');\n ctx.drawImage(webcam, 0, 0, canvas.width, canvas.height);\n \n \/\/ Get dominant color from the image (simplified approach)\n const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);\n const dominantColor = getDominantColor(imageData);\n const colorName = rgbToColorName(dominantColor);\n \n \/\/ Check if it matches the target color\n if (colorName === currentTargetColor) {\n messageEl.textContent = \"Great job! You found \" + currentTargetColor + \"!\";\n setTimeout(() => {\n setRandomTargetColor();\n }, 1500);\n } else {\n messageEl.textContent = \"That looks more like \" + colorName + \". Try again!\";\n }\n }\n \n \/\/ Simplified dominant color detection (for demo purposes)\n function getDominantColor(imageData) {\n const data = imageData.data;\n let r = 0, g = 0, b = 0;\n let count = 0;\n \n \/\/ Sample some pixels (not all for performance)\n for (let i = 0; i < data.length; i += 16) {\n r += data[i];\n g += data[i + 1];\n b += data[i + 2];\n count++;\n }\n \n return {\n r: Math.round(r \/ count),\n g: Math.round(g \/ count),\n b: Math.round(b \/ count)\n };\n }\n \n \/\/ Very simple RGB to color name mapping\n function rgbToColorName(rgb) {\n const colors = {\n red: { r: 255, g: 0, b: 0 },\n blue: { r: 0, g: 0, b: 255 },\n green: { r: 0, g: 255, b: 0 },\n yellow: { r: 255, g: 255, b: 0 },\n orange: { r: 255, g: 165, b: 0 },\n purple: { r: 128, g: 0, b: 128 }\n };\n \n let closestColor = 'red';\n let minDistance = Infinity;\n \n for (const [name, value] of Object.entries(colors)) {\n const distance = Math.sqrt(\n Math.pow(rgb.r - value.r, 2) +\n Math.pow(rgb.g - value.g, 2) +\n Math.pow(rgb.b - value.b, 2)\n );\n \n if (distance < minDistance) {\n minDistance = distance;\n closestColor = name;\n }\n }\n \n return closestColor;\n }\n \n \/\/ Initialize the game when page loads\n window.addEventListener('load', init);\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Color Matching Game Color Matching Game Drag objects to matching color boxes! Find something red! Red Blue Green Yellow Orange Purple Apple Whale Frog Banana Orange Grapes New Color Use Camera Take Picture<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":"","_links_to":"","_links_to_target":""},"class_list":["post-4641","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/aiingo.com\/index.php\/wp-json\/wp\/v2\/pages\/4641","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/aiingo.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/aiingo.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/aiingo.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/aiingo.com\/index.php\/wp-json\/wp\/v2\/comments?post=4641"}],"version-history":[{"count":1,"href":"https:\/\/aiingo.com\/index.php\/wp-json\/wp\/v2\/pages\/4641\/revisions"}],"predecessor-version":[{"id":4642,"href":"https:\/\/aiingo.com\/index.php\/wp-json\/wp\/v2\/pages\/4641\/revisions\/4642"}],"wp:attachment":[{"href":"https:\/\/aiingo.com\/index.php\/wp-json\/wp\/v2\/media?parent=4641"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":4641,"date":"2025-04-27T07:07:02","date_gmt":"2025-04-27T06:07:02","guid":{"rendered":"https:\/\/aiingo.com\/?page_id=4641"},"modified":"2025-04-27T07:07:06","modified_gmt":"2025-04-27T06:07:06","slug":"color-recognition-game","status":"publish","type":"page","link":"https:\/\/aiingo.com\/index.php\/color-recognition-game\/","title":{"rendered":"Color recognition Game"},"content":{"rendered":"\n\n\n\n \n \n Color Matching Game<\/title>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@tensorflow\/tfjs@3.18.0\/dist\/tf.min.js\"><\/script>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@tensorflow-models\/mobilenet@1.0.0\"><\/script>\n <style>\n body {\n font-family: 'Comic Sans MS', cursive, sans-serif;\n text-align: center;\n background-color: #f9f7f0;\n padding: 20px;\n }\n h1 {\n color: #ff8a5c;\n margin-bottom: 10px;\n }\n .subtitle {\n color: #5eaaa8;\n margin-top: 0;\n margin-bottom: 20px;\n }\n .game-area {\n display: flex;\n flex-direction: column;\n align-items: center;\n max-width: 600px;\n margin: 0 auto;\n }\n .target-colors {\n display: flex;\n justify-content: center;\n flex-wrap: wrap;\n margin-bottom: 20px;\n }\n .color-box {\n width: 80px;\n height: 80px;\n margin: 10px;\n border: 4px solid #333;\n border-radius: 10px;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: bold;\n color: white;\n text-shadow: 1px 1px 2px #000;\n }\n .objects {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n margin-bottom: 20px;\n }\n .object {\n width: 100px;\n height: 100px;\n margin: 10px;\n border: 4px solid #ddd;\n border-radius: 15px;\n background-color: white;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n cursor: grab;\n transition: all 0.3s;\n }\n .object img {\n max-width: 80px;\n max-height: 60px;\n }\n .object p {\n margin: 5px 0 0;\n font-size: 14px;\n color: #333;\n }\n .controls {\n margin: 20px 0;\n }\n button {\n background-color: #5eaaa8;\n color: white;\n border: none;\n padding: 12px 24px;\n font-size: 18px;\n border-radius: 30px;\n cursor: pointer;\n margin: 0 10px;\n transition: all 0.3s;\n }\n button:hover {\n background-color: #3d7a78;\n transform: scale(1.05);\n }\n .message {\n font-size: 24px;\n margin: 20px 0;\n min-height: 30px;\n color: #ff8a5c;\n font-weight: bold;\n }\n .highlight {\n animation: pulse 1s infinite;\n }\n @keyframes pulse {\n 0% { transform: scale(1); box-shadow: 0 0 0 rgba(0,0,0,0.1); }\n 50% { transform: scale(1.05); box-shadow: 0 0 15px rgba(0,0,0,0.2); }\n 100% { transform: scale(1); box-shadow: 0 0 0 rgba(0,0,0,0.1); }\n }\n .correct {\n border: 4px solid #2ecc71 !important;\n background-color: rgba(46, 204, 113, 0.2) !important;\n }\n .webcam-container {\n margin: 20px 0;\n display: none;\n }\n #webcam {\n width: 300px;\n height: 225px;\n border-radius: 15px;\n border: 4px solid #5eaaa8;\n }\n #snap-btn {\n background-color: #ff8a5c;\n margin-top: 10px;\n }\n #snap-btn:hover {\n background-color: #e67a4c;\n }\n <\/style>\n<\/head>\n<body>\n <h1>Color Matching Game<\/h1>\n <p class=\"subtitle\">Drag objects to matching color boxes!<\/p>\n \n <div class=\"message\">Find something <span id=\"target-color-text\">red<\/span>!<\/div>\n \n <div class=\"target-colors\">\n <div class=\"color-box\" style=\"background-color: red;\" data-color=\"red\">Red<\/div>\n <div class=\"color-box\" style=\"background-color: blue;\" data-color=\"blue\">Blue<\/div>\n <div class=\"color-box\" style=\"background-color: green;\" data-color=\"green\">Green<\/div>\n <div class=\"color-box\" style=\"background-color: yellow;\" data-color=\"yellow\">Yellow<\/div>\n <div class=\"color-box\" style=\"background-color: orange;\" data-color=\"orange\">Orange<\/div>\n <div class=\"color-box\" style=\"background-color: purple;\" data-color=\"purple\">Purple<\/div>\n <\/div>\n \n <div class=\"objects\">\n <div class=\"object\" draggable=\"true\" data-color=\"red\">\n <img decoding=\"async\" src=\"https:\/\/cdn-icons-png.flaticon.com\/512\/3212\/3212608.png\" alt=\"Apple\">\n <p>Apple<\/p>\n <\/div>\n <div class=\"object\" draggable=\"true\" data-color=\"blue\">\n <img decoding=\"async\" src=\"https:\/\/cdn-icons-png.flaticon.com\/512\/3212\/3212567.png\" alt=\"Whale\">\n <p>Whale<\/p>\n <\/div>\n <div class=\"object\" draggable=\"true\" data-color=\"green\">\n <img decoding=\"async\" src=\"https:\/\/cdn-icons-png.flaticon.com\/512\/2828\/2828917.png\" alt=\"Frog\">\n <p>Frog<\/p>\n <\/div>\n <div class=\"object\" draggable=\"true\" data-color=\"yellow\">\n <img decoding=\"async\" src=\"https:\/\/cdn-icons-png.flaticon.com\/512\/616\/616516.png\" alt=\"Banana\">\n <p>Banana<\/p>\n <\/div>\n <div class=\"object\" draggable=\"true\" data-color=\"orange\">\n <img decoding=\"async\" src=\"https:\/\/cdn-icons-png.flaticon.com\/512\/3081\/3081840.png\" alt=\"Orange\">\n <p>Orange<\/p>\n <\/div>\n <div class=\"object\" draggable=\"true\" data-color=\"purple\">\n <img decoding=\"async\" src=\"https:\/\/cdn-icons-png.flaticon.com\/512\/2742\/2742674.png\" alt=\"Grapes\">\n <p>Grapes<\/p>\n <\/div>\n <\/div>\n \n <div class=\"controls\">\n <button id=\"new-color-btn\">New Color<\/button>\n <button id=\"camera-btn\">Use Camera<\/button>\n <\/div>\n \n <div class=\"webcam-container\">\n <video id=\"webcam\" autoplay playsinline><\/video>\n <button id=\"snap-btn\">Take Picture<\/button>\n <canvas id=\"canvas\" style=\"display:none;\"><\/canvas>\n <\/div>\n\n <script>\n \/\/ Game state\n let currentTargetColor = 'red';\n let model;\n let webcamStream;\n \n \/\/ DOM elements\n const targetColorText = document.getElementById('target-color-text');\n const colorBoxes = document.querySelectorAll('.color-box');\n const objects = document.querySelectorAll('.object');\n const newColorBtn = document.getElementById('new-color-btn');\n const cameraBtn = document.getElementById('camera-btn');\n const webcamContainer = document.querySelector('.webcam-container');\n const webcam = document.getElementById('webcam');\n const snapBtn = document.getElementById('snap-btn');\n const canvas = document.getElementById('canvas');\n const messageEl = document.querySelector('.message');\n \n \/\/ Initialize the game\n async function init() {\n \/\/ Load the MobileNet model for color detection from camera\n model = await mobilenet.load();\n \n \/\/ Set up drag and drop\n setupDragAndDrop();\n \n \/\/ Set up button handlers\n newColorBtn.addEventListener('click', setRandomTargetColor);\n cameraBtn.addEventListener('click', toggleCamera);\n snapBtn.addEventListener('click', captureAndAnalyze);\n \n \/\/ Highlight the current target color\n highlightTargetColor();\n }\n \n \/\/ Set up drag and drop functionality\n function setupDragAndDrop() {\n objects.forEach(object => {\n object.addEventListener('dragstart', (e) => {\n e.dataTransfer.setData('text\/plain', object.getAttribute('data-color'));\n setTimeout(() => {\n object.style.opacity = '0.4';\n }, 0);\n });\n \n object.addEventListener('dragend', () => {\n object.style.opacity = '1';\n });\n });\n \n colorBoxes.forEach(box => {\n box.addEventListener('dragover', (e) => {\n e.preventDefault();\n });\n \n box.addEventListener('drop', (e) => {\n e.preventDefault();\n const color = e.dataTransfer.getData('text\/plain');\n const boxColor = box.getAttribute('data-color');\n \n if (color === boxColor) {\n \/\/ Correct match\n box.classList.add('correct');\n setTimeout(() => {\n box.classList.remove('correct');\n }, 1000);\n \n if (color === currentTargetColor) {\n messageEl.textContent = \"Great job! You found the \" + currentTargetColor + \" one!\";\n setTimeout(() => {\n setRandomTargetColor();\n }, 1500);\n }\n }\n });\n });\n }\n \n \/\/ Set a random target color\n function setRandomTargetColor() {\n const colors = ['red', 'blue', 'green', 'yellow', 'orange', 'purple'];\n const randomIndex = Math.floor(Math.random() * colors.length);\n currentTargetColor = colors[randomIndex];\n targetColorText.textContent = currentTargetColor;\n targetColorText.style.color = currentTargetColor;\n highlightTargetColor();\n messageEl.textContent = \"Find something \" + currentTargetColor + \"!\";\n }\n \n \/\/ Highlight the current target color box\n function highlightTargetColor() {\n colorBoxes.forEach(box => {\n box.classList.remove('highlight');\n if (box.getAttribute('data-color') === currentTargetColor) {\n box.classList.add('highlight');\n }\n });\n }\n \n \/\/ Toggle camera mode\n async function toggleCamera() {\n if (webcamContainer.style.display === 'none' || !webcamContainer.style.display) {\n try {\n webcamStream = await navigator.mediaDevices.getUserMedia({ video: true });\n webcam.srcObject = webcamStream;\n webcamContainer.style.display = 'block';\n cameraBtn.textContent = 'Hide Camera';\n messageEl.textContent = \"Take a picture of something \" + currentTargetColor + \"!\";\n } catch (err) {\n alert(\"Could not access the camera. Please make sure you've allowed camera access.\");\n console.error(err);\n }\n } else {\n if (webcamStream) {\n webcamStream.getTracks().forEach(track => track.stop());\n }\n webcamContainer.style.display = 'none';\n cameraBtn.textContent = 'Use Camera';\n messageEl.textContent = \"Find something \" + currentTargetColor + \"!\";\n }\n }\n \n \/\/ Capture and analyze an image from the camera\n async function captureAndAnalyze() {\n \/\/ Set canvas dimensions to match video\n canvas.width = webcam.videoWidth;\n canvas.height = webcam.videoHeight;\n \n \/\/ Draw video frame to canvas\n const ctx = canvas.getContext('2d');\n ctx.drawImage(webcam, 0, 0, canvas.width, canvas.height);\n \n \/\/ Get dominant color from the image (simplified approach)\n const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);\n const dominantColor = getDominantColor(imageData);\n const colorName = rgbToColorName(dominantColor);\n \n \/\/ Check if it matches the target color\n if (colorName === currentTargetColor) {\n messageEl.textContent = \"Great job! You found \" + currentTargetColor + \"!\";\n setTimeout(() => {\n setRandomTargetColor();\n }, 1500);\n } else {\n messageEl.textContent = \"That looks more like \" + colorName + \". Try again!\";\n }\n }\n \n \/\/ Simplified dominant color detection (for demo purposes)\n function getDominantColor(imageData) {\n const data = imageData.data;\n let r = 0, g = 0, b = 0;\n let count = 0;\n \n \/\/ Sample some pixels (not all for performance)\n for (let i = 0; i < data.length; i += 16) {\n r += data[i];\n g += data[i + 1];\n b += data[i + 2];\n count++;\n }\n \n return {\n r: Math.round(r \/ count),\n g: Math.round(g \/ count),\n b: Math.round(b \/ count)\n };\n }\n \n \/\/ Very simple RGB to color name mapping\n function rgbToColorName(rgb) {\n const colors = {\n red: { r: 255, g: 0, b: 0 },\n blue: { r: 0, g: 0, b: 255 },\n green: { r: 0, g: 255, b: 0 },\n yellow: { r: 255, g: 255, b: 0 },\n orange: { r: 255, g: 165, b: 0 },\n purple: { r: 128, g: 0, b: 128 }\n };\n \n let closestColor = 'red';\n let minDistance = Infinity;\n \n for (const [name, value] of Object.entries(colors)) {\n const distance = Math.sqrt(\n Math.pow(rgb.r - value.r, 2) +\n Math.pow(rgb.g - value.g, 2) +\n Math.pow(rgb.b - value.b, 2)\n );\n \n if (distance < minDistance) {\n minDistance = distance;\n closestColor = name;\n }\n }\n \n return closestColor;\n }\n \n \/\/ Initialize the game when page loads\n window.addEventListener('load', init);\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Color Matching Game Color Matching Game Drag objects to matching color boxes! Find something red! Red Blue Green Yellow Orange Purple Apple Whale Frog Banana Orange Grapes New Color Use Camera Take Picture<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":"","_links_to":"","_links_to_target":""},"class_list":["post-4641","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/aiingo.com\/index.php\/wp-json\/wp\/v2\/pages\/4641","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/aiingo.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/aiingo.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/aiingo.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/aiingo.com\/index.php\/wp-json\/wp\/v2\/comments?post=4641"}],"version-history":[{"count":1,"href":"https:\/\/aiingo.com\/index.php\/wp-json\/wp\/v2\/pages\/4641\/revisions"}],"predecessor-version":[{"id":4642,"href":"https:\/\/aiingo.com\/index.php\/wp-json\/wp\/v2\/pages\/4641\/revisions\/4642"}],"wp:attachment":[{"href":"https:\/\/aiingo.com\/index.php\/wp-json\/wp\/v2\/media?parent=4641"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}