Colorazione Numerata Gratuita | DYNSEO<\/title> <meta name=\"description\" content=\"Colorazione numerata gratuita online. Rilassati colorando disegni con numeri. Attivit\u00e0 rilassante e stimolante per tutte le et\u00e0.\" \/> <\/p>\n<style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: \"Segoe UI\", system-ui, -apple-system, sans-serif; background:#f8f9fa; color:#333; } .container { max-width: 900px; margin: 0 auto; padding: 15px; } .article-header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; padding: 28px 15px; text-align: center; border-radius: 0 0 20px 20px; margin-bottom: 20px; } .article-category { display: inline-block; background: rgba(255,255,255,0.22); padding: 5px 14px; border-radius: 999px; font-size: 0.85rem; margin-bottom: 10px; } .article-header h1 { font-size: 1.7rem; margin-bottom: 6px; } .article-header .subtitle { opacity: 0.9; font-size: 0.95rem; } .cta-banner { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 15px; padding: 18px; color: white; text-align: center; margin-bottom: 18px; } .cta-banner h3 { font-size: 1.05rem; margin-bottom: 8px; } .cta-banner p { font-size: 0.9rem; opacity: 0.95; margin-bottom: 12px; } .apps-row { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; } .app-badge { background: #fff; color: #667eea; padding: 8px 14px; border-radius: 999px; font-weight: 700; text-decoration: none; font-size: 0.85rem; } .game-container { background: white; border-radius: 15px; padding: 18px; box-shadow: 0 5px 20px rgba(0,0,0,0.08); margin-bottom: 20px; } \/* Selettore di immagine *\/ .image-selector { display:flex; gap: 10px; overflow-x:auto; padding-bottom: 8px; margin-bottom: 14px; } .image-thumb { width: 60px; height: 60px; border: 3px solid #e0e0e0; border-radius: 12px; cursor: pointer; transition: all .25s; flex-shrink: 0; display:flex; align-items:center; justify-content:center; font-size: 1.6rem; background:#f8f9fa; user-select: none; } .image-thumb:hover { border-color:#667eea; } .image-thumb.active { border-color:#667eea; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color:#fff; } \/* Progresso *\/ .progress-bar { height: 8px; background:#e0e0e0; border-radius: 6px; overflow:hidden; margin: 10px 0 8px; } .progress-fill { height: 100%; width: 0%; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); transition: width .25s; } .progress-text { text-align:center; font-size: .9rem; color:#666; margin-bottom: 10px; } \/* Zoom *\/ .zoom-controls { display:flex; gap: 8px; justify-content:center; margin-bottom: 10px; } .zoom-btn { width: 38px; height: 38px; border: none; border-radius: 10px; background:#f0f0f0; font-size: 1.2rem; cursor:pointer; } .zoom-btn:hover { background:#e6e6e6; } \/* Canvas *\/ .canvas-wrapper { display:flex; justify-content:center; margin-bottom: 16px; background:#f0f0f0; border-radius: 12px; padding: 10px; overflow:hidden; } .canvas-container { position: relative; touch-action: none; } #coloring-canvas { border-radius: 8px; background:#fff; max-width: 100%; height: auto; cursor: crosshair; transform-origin: center center; } \/* Tavolozza dei colori *\/ .palette-section { margin-bottom: 14px; } .palette-title { text-align:center; font-size: .95rem; color:#667eea; margin-bottom: 10px; font-weight: 800; } .color-palette { display:flex; flex-wrap:wrap; gap: 8px; justify-content:center; } .color-btn { width: 46px; height: 46px; border-radius: 12px; cursor:pointer; border: 3px solid transparent; transition: all .15s; display:flex; align-items:center; justify-content:center; font-size: .95rem; font-weight: 900; color:#fff; text-shadow: 1px 1px 2px rgba(0,0,0,.45); position: relative; user-select: none; } .color-btn:hover { transform: scale(1.06); } .color-btn.active { border-color:#111; transform: scale(1.12); box-shadow: 0 5px 14px rgba(0,0,0,.25); } .color-btn .count { position:absolute; top:-6px; right:-6px; background:#111; color:#fff; font-size: .65rem; padding: 2px 6px; border-radius: 999px; font-weight: 800; } .color-btn.completed { opacity: .55; } .color-btn.completed::after { content: \"\u2713\"; position:absolute; font-size: 1.2rem; } \/* Controls *\/ .game-controls { display:flex; gap: 10px; justify-content:center; flex-wrap:wrap; } .control-btn { padding: 10px 16px; border:none; border-radius: 12px; font-size: .9rem; font-weight: 800; cursor:pointer; transition: all .2s; display:flex; align-items:center; gap: 6px; } .control-btn.primary { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color:#fff; } .control-btn.secondary { background:#f0f0f0; color:#333; } .control-btn:hover { transform: translateY(-1px); } \/* SEO *\/ .seo-content { background:#fff; border-radius: 15px; padding: 22px; box-shadow: 0 5px 20px rgba(0,0,0,0.08); } .seo-content h2 { color:#667eea; font-size: 1.3rem; margin-bottom: 12px; border-bottom: 2px solid #667eea; padding-bottom: 8px; } .seo-content p { font-size: .95rem; margin-bottom: 10px; color:#555; line-height: 1.65; } \/* Modal *\/ .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.7); display:none; align-items:center; justify-content:center; z-index: 1000; padding: 15px; } .modal-overlay.active { display:flex; } .modal { background:#fff; padding: 24px; border-radius: 18px; text-align:center; max-width: 360px; width: 100%; } .modal-icon { font-size: 3rem; margin-bottom: 10px; } .modal h2 { color:#667eea; margin-bottom: 8px; } .modal p { color:#666; margin-bottom: 16px; } .modal-buttons { display:flex; flex-direction:column; gap: 10px; } .modal-btn { padding: 12px; border:none; border-radius: 12px; font-size: 1rem; font-weight: 800; cursor:pointer; text-decoration:none; display:block; } .modal-btn.primary { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color:#fff; } .modal-btn.cta { background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%); color:#fff; } \/* Footer *\/ .article-footer { text-align:center; padding: 22px 15px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color:#fff; border-radius: 20px 20px 0 0; margin-top: 22px; } .article-footer a { color:#fff; margin: 0 8px; font-weight: 800; text-decoration: none; } @media (min-width: 600px) { .image-thumb { width: 72px; height: 72px; } .color-btn { width: 52px; height: 52px; } } <\/style>\n<p><\/head><body> <\/p>\n<header class=\"article-header\"> <\/p>\n<div class=\"article-category\">\ud83c\udfa8 Creativit\u00e0<\/div>\n<p> <\/p>\n<h1>Colorazione Numerata<\/h1>\n<p> <pee class=\"subtitle\">Rilassati colorando e completa ogni zona con il colore corretto.<\/pee> <\/header>\n<p> <\/p>\n<div class=\"container\"> <\/p>\n<div class=\"cta-banner\"> <\/p>\n<h3>\ud83e\udde0 Rilassamento e stimolazione cognitiva<\/h3>\n<p> <pee>Scopri altre attivit\u00e0 nelle nostre app!<\/pee> <\/p>\n<div class=\"apps-row\"> <a href=\"https:\/\/www.dynseo.com\/it\/version-coco\/\" class=\"app-badge\" target=\"_blank\" rel=\"noopener\">\ud83d\udc76 COCO<\/a> <a href=\"https:\/\/www.dynseo.com\/it\/roberto-3\/\" class=\"app-badge\" target=\"_blank\" rel=\"noopener\">\ud83e\uddd1 JOE<\/a> <a href=\"https:\/\/www.dynseo.com\/tablette-memoire-senior-edith\/\" class=\"app-badge\" target=\"_blank\" rel=\"noopener\">\ud83d\udc74 EDITH<\/a> <\/div>\n<p> <\/div>\n<p> <\/p>\n<div class=\"game-container\"> <\/p>\n<div class=\"image-selector\" id=\"image-selector\"><\/div>\n<p> <\/p>\n<div class=\"progress-bar\">\n<div class=\"progress-fill\" id=\"progress-fill\"><\/div>\n<\/div>\n<p> <\/p>\n<div class=\"progress-text\"><span id=\"progress-text\">0%<\/span> completato<\/div>\n<p> <\/p>\n<div class=\"zoom-controls\"> <button class=\"zoom-btn\" id=\"zoom-out\" aria-label=\"Zoom meno\">\u2212<\/button> <button class=\"zoom-btn\" id=\"zoom-reset\" aria-label=\"Reset zoom\">\u27f2<\/button> <button class=\"zoom-btn\" id=\"zoom-in\" aria-label=\"Zoom pi\u00f9\">+<\/button> <\/div>\n<p> <\/p>\n<div class=\"canvas-wrapper\"> <\/p>\n<div class=\"canvas-container\"> <canvas id=\"coloring-canvas\" width=\"400\" height=\"400\" aria-label=\"Tela di colorazione\"><\/canvas> <\/div>\n<p> <\/div>\n<p> <\/p>\n<div class=\"palette-section\"> <\/p>\n<div class=\"palette-title\">\ud83c\udfa8 Tavolozza dei colori<\/div>\n<p> <\/p>\n<div class=\"color-palette\" id=\"color-palette\"><\/div>\n<p> <\/div>\n<p> <\/p>\n<div class=\"game-controls\"> <button class=\"control-btn primary\" id=\"new-btn\">\ud83d\udd04 Nuovo<\/button> <button class=\"control-btn secondary\" id=\"hint-btn\">\ud83d\udca1 Indizio<\/button> <button class=\"control-btn secondary\" id=\"save-btn\">\ud83d\udcbe Salva<\/button> <\/div>\n<p> <\/div>\n<p> <\/p>\n<section class=\"seo-content\"> <\/p>\n<h2>La Colorazione: Arteterapia Digitale<\/h2>\n<p> <pee>La colorazione numerata \u00e8 un\u2019attivit\u00e0 rilassante che riduce lo stress e stimola la concentrazione. Ogni zona \u00e8 associata a un numero che corrisponde a un colore.<\/pee> <pee><strong>Benefici:<\/strong> concentrazione, motricit\u00e0 fine, riconoscimento dei colori, relax e riduzione dell\u2019ansia.<\/pee> <\/section>\n<p> <\/div>\n<p> <\/p>\n<div class=\"modal-overlay\" id=\"success-modal\" role=\"dialog\" aria-modal=\"true\" aria-label=\"Completato\"> <\/p>\n<div class=\"modal\"> <\/p>\n<div class=\"modal-icon\">\ud83c\udfa8<\/div>\n<p> <\/p>\n<h2>Magnifico!<\/h2>\n<p> <pee>Hai completato questa colorazione!<\/pee> <\/p>\n<div class=\"modal-buttons\"> <button class=\"modal-btn primary\" id=\"modal-next\">\ud83d\uddbc\ufe0f Immagine successiva<\/button> <a class=\"modal-btn cta\" href=\"https:\/\/www.dynseo.com\/it\/roberto-3\/\" target=\"_blank\" rel=\"noopener\">\ud83e\udde0 Scopri JOE<\/a> <\/div>\n<p> <\/div>\n<p> <\/div>\n<p> <\/p>\n<footer class=\"article-footer\"> <pee> <a href=\"https:\/\/www.dynseo.com\/it\/version-coco\/\" target=\"_blank\" rel=\"noopener\">COCO<\/a> | <a href=\"https:\/\/www.dynseo.com\/it\/roberto-3\/\" target=\"_blank\" rel=\"noopener\">JOE<\/a> | <a href=\"https:\/\/www.dynseo.com\/tablette-memoire-senior-edith\/\" target=\"_blank\" rel=\"noopener\">EDITH<\/a> <\/pee> <\/footer>\n<p> <script> \/\/ ----- Palette colori (ID = numero che appare) ----- const colors = [ { id: 1, hex: '#e74c3c', name: 'Rosso' }, { id: 2, hex: '#e67e22', name: 'Arancione' }, { id: 3, hex: '#f1c40f', name: 'Giallo' }, { id: 4, hex: '#2ecc71', name: 'Verde' }, { id: 5, hex: '#3498db', name: 'Blu' }, { id: 6, hex: '#9b59b6', name: 'Viola' }, { id: 7, hex: '#e91e63', name: 'Rosa' }, { id: 8, hex: '#795548', name: 'Marrone' }, { id: 9, hex: '#607d8b', name: 'Grigio' } ]; \/\/ ----- Modelli (zone geometriche) ----- function generateFlowerZones() { const zones = []; zones.push({ id: 1, color: 3, path: 'circle', cx: 200, cy: 200, r: 40 }); const petalAngles = [0, 72, 144, 216, 288]; for (let i = 0; i < 5; i++) { const angle = petalAngles[i] * Math.PI \/ 180; const cx = 200 + Math.cos(angle) * 85; const cy = 200 + Math.sin(angle) * 85; zones.push({ id: 2 + i, color: (i % 2 === 0) ? 7 : 1, path: 'ellipse', cx, cy, rx: 46, ry: 30, rotation: angle }); } zones.push({ id: 7, color: 4, path: 'rect', x: 190, y: 260, w: 20, h: 120 }); zones.push({ id: 8, color: 4, path: 'ellipse', cx: 160, cy: 325, rx: 36, ry: 16, rotation: -0.5 }); zones.push({ id: 9, color: 4, path: 'ellipse', cx: 240, cy: 345, rx: 36, ry: 16, rotation: 0.5 }); zones.push({ id: 10, color: 5, path: 'background' }); return zones; } function generateHouseZones() { const zones = []; zones.push({ id: 1, color: 5, path: 'rect', x: 0, y: 0, w: 400, h: 200 }); \/\/ cielo zones.push({ id: 2, color: 4, path: 'rect', x: 0, y: 280, w: 400, h: 120 }); \/\/ erba zones.push({ id: 3, color: 3, path: 'rect', x: 110, y: 160, w: 180, h: 140 }); \/\/ casa zones.push({ id: 4, color: 1, path: 'triangle', points: [[100,160],[200,80],[300,160]] }); \/\/ tetto zones.push({ id: 5, color: 8, path: 'rect', x: 175, y: 220, w: 50, h: 80 }); \/\/ porta zones.push({ id: 6, color: 9, path: 'rect', x: 130, y: 190, w: 40, h: 40 }); \/\/ finestra sx zones.push({ id: 7, color: 9, path: 'rect', x: 230, y: 190, w: 40, h: 40 }); \/\/ finestra dx zones.push({ id: 8, color: 3, path: 'circle', cx: 350, cy: 50, r: 30 }); \/\/ sole zones.push({ id: 9, color: 1, path: 'rect', x: 245, y: 95, w: 28, h: 45 }); \/\/ camino return zones; } function generateRainbowZones() { const zones = []; const rainbowColors = [1, 2, 3, 4, 5, 6]; for (let i = 0; i < 6; i++) { zones.push({ id: i + 1, color: rainbowColors[i], path: 'arc', cx: 200, cy: 320, r: 180 - i * 24, startAngle: Math.PI, endAngle: 0, lineWidth: 24 }); } zones.push({ id: 7, color: 9, path: 'cloud', cx: 90, cy: 285 }); zones.push({ id: 8, color: 9, path: 'cloud', cx: 310, cy: 285 }); zones.push({ id: 9, color: 5, path: 'background' }); return zones; } function generateStarZones() { const zones = []; const points = []; for (let i = 0; i < 10; i++) { const angle = (i * 36 - 90) * Math.PI \/ 180; const r = (i % 2 === 0) ? 150 : 70; points.push([200 + Math.cos(angle) * r, 200 + Math.sin(angle) * r]); } zones.push({ id: 1, color: 3, path: 'polygon', points }); zones.push({ id: 2, color: 3, path: 'circle', cx: 80, cy: 80, r: 18 }); zones.push({ id: 3, color: 3, path: 'circle', cx: 320, cy: 100, r: 14 }); zones.push({ id: 4, color: 3, path: 'circle', cx: 100, cy: 320, r: 16 }); zones.push({ id: 5, color: 3, path: 'circle', cx: 340, cy: 300, r: 12 }); zones.push({ id: 6, color: 6, path: 'background' }); return zones; } function generateCatZones() { const zones = []; zones.push({ id: 1, color: 2, path: 'ellipse', cx: 200, cy: 285, rx: 80, ry: 60, rotation: 0 }); zones.push({ id: 2, color: 2, path: 'circle', cx: 200, cy: 165, r: 70 }); zones.push({ id: 3, color: 2, path: 'triangle', points: [[140,110],[160,160],[120,160]] }); zones.push({ id: 4, color: 2, path: 'triangle', points: [[260,110],[240,160],[280,160]] }); zones.push({ id: 5, color: 7, path: 'triangle', points: [[145,125],[155,155],[130,155]] }); zones.push({ id: 6, color: 7, path: 'triangle', points: [[255,125],[245,155],[270,155]] }); zones.push({ id: 7, color: 4, path: 'ellipse', cx: 170, cy: 155, rx: 15, ry: 20, rotation: 0 }); zones.push({ id: 8, color: 4, path: 'ellipse', cx: 230, cy: 155, rx: 15, ry: 20, rotation: 0 }); zones.push({ id: 9, color: 7, path: 'triangle', points: [[200,175],[190,190],[210,190]] }); zones.push({ id: 10, color: 2, path: 'arc', cx: 120, cy: 305, r: 60, startAngle: 0, endAngle: Math.PI, lineWidth: 20 }); zones.push({ id: 11, color: 5, path: 'background' }); return zones; } function generateTreeZones() { const zones = []; zones.push({ id: 1, color: 5, path: 'rect', x: 0, y: 0, w: 400, h: 280 }); zones.push({ id: 2, color: 4, path: 'rect', x: 0, y: 320, w: 400, h: 80 }); zones.push({ id: 3, color: 8, path: 'rect', x: 175, y: 250, w: 50, h: 100 }); zones.push({ id: 4, color: 4, path: 'triangle', points: [[200,50],[100,150],[300,150]] }); zones.push({ id: 5, color: 4, path: 'triangle', points: [[200,100],[80,220],[320,220]] }); zones.push({ id: 6, color: 4, path: 'triangle', points: [[200,160],[60,280],[340,280]] }); zones.push({ id: 7, color: 1, path: 'circle', cx: 150, cy: 180, r: 12 }); zones.push({ id: 8, color: 1, path: 'circle', cx: 250, cy: 200, r: 12 }); zones.push({ id: 9, color: 1, path: 'circle', cx: 180, cy: 240, r: 12 }); zones.push({ id: 10, color: 3, path: 'circle', cx: 350, cy: 50, r: 28 }); return zones; } \/\/ ----- Dati immagini ----- const images = [ { name: \"\ud83c\udf38\", zones: generateFlowerZones() }, { name: \"\ud83c\udfe0\", zones: generateHouseZones() }, { name: \"\ud83c\udf08\", zones: generateRainbowZones() }, { name: \"\u2b50\", zones: generateStarZones() }, { name: \"\ud83d\udc31\", zones: generateCatZones() }, { name: \"\ud83c\udf33\", zones: generateTreeZones() } ]; \/\/ ----- Stato gioco ----- let currentImage = 0; let selectedColor = 1; let filledZones = {}; let canvas, ctx; let scale = 1; function initGame() { canvas = document.getElementById(\"coloring-canvas\"); ctx = canvas.getContext(\"2d\"); \/\/ Selettore immagini const selector = document.getElementById(\"image-selector\"); selector.innerHTML = \"\"; images.forEach((img, i) => { const thumb = document.createElement(\"div\"); thumb.className = \"image-thumb\" + (i === 0 ? \" active\" : \"\"); thumb.textContent = img.name; thumb.dataset.index = String(i); thumb.addEventListener(\"click\", () => selectImage(i)); selector.appendChild(thumb); }); \/\/ Pulsanti document.getElementById(\"new-btn\").addEventListener(\"click\", () => selectImage(currentImage)); document.getElementById(\"hint-btn\").addEventListener(\"click\", giveHint); document.getElementById(\"save-btn\").addEventListener(\"click\", saveImage); document.getElementById(\"modal-next\").addEventListener(\"click\", () => { document.getElementById(\"success-modal\").classList.remove(\"active\"); selectImage((currentImage + 1) % images.length); }); \/\/ Zoom document.getElementById(\"zoom-in\").addEventListener(\"click\", () => setZoom(scale + 0.2)); document.getElementById(\"zoom-out\").addEventListener(\"click\", () => setZoom(scale - 0.2)); document.getElementById(\"zoom-reset\").addEventListener(\"click\", () => setZoom(1)); \/\/ Click \/ touch canvas canvas.addEventListener(\"click\", (e) => { const rect = canvas.getBoundingClientRect(); const x = (e.clientX - rect.left) \/ scale; const y = (e.clientY - rect.top) \/ scale; handleCanvasClick(x, y); }); canvas.addEventListener(\"touchstart\", (e) => { e.preventDefault(); const t = e.touches[0]; const rect = canvas.getBoundingClientRect(); const x = (t.clientX - rect.left) \/ scale; const y = (t.clientY - rect.top) \/ scale; handleCanvasClick(x, y); }, { passive: false }); \/\/ Avvio selectImage(0); } function selectImage(index) { currentImage = index; filledZones = {}; document.querySelectorAll(\".image-thumb\").forEach((el, i) => { el.classList.toggle(\"active\", i === index); }); \/\/ reset zoom visivo setZoom(1); renderCanvas(); renderPalette(); updateProgress(); } function renderPalette() { const palette = document.getElementById(\"color-palette\"); palette.innerHTML = \"\"; const zones = images[currentImage].zones; const colorCounts = {}; zones.forEach(z => { colorCounts[z.color] = (colorCounts[z.color] || 0) + 1; }); colors.forEach(c => { if (!colorCounts[c.id]) return; const btn = document.createElement(\"div\"); btn.className = \"color-btn\" + (c.id === selectedColor ? \" active\" : \"\"); btn.style.background = c.hex; btn.textContent = c.id; btn.dataset.id = String(c.id); \/\/ conteggio rimanente let remaining = 0; zones.forEach(z => { if (z.color === c.id && !filledZones[z.id]) remaining++; }); if (remaining === 0) { btn.classList.add(\"completed\"); } else { const count = document.createElement(\"span\"); count.className = \"count\"; count.textContent = String(remaining); btn.appendChild(count); } btn.addEventListener(\"click\", () => { selectedColor = c.id; document.querySelectorAll(\".color-btn\").forEach(b => b.classList.remove(\"active\")); btn.classList.add(\"active\"); }); palette.appendChild(btn); }); } function renderCanvas() { ctx.clearRect(0, 0, 400, 400); ctx.fillStyle = \"#fff\"; ctx.fillRect(0, 0, 400, 400); const zones = [...images[currentImage].zones]; \/\/ Sfondo prima zones.sort((a, b) => (a.path === \"background\" ? -1 : 0) + (b.path === \"background\" ? 1 : 0)); zones.forEach(zone => { const filled = !!filledZones[zone.id]; const colorObj = colors.find(c => c.id === zone.color); const fillColor = colorObj ? colorObj.hex : \"#ffffff\"; ctx.strokeStyle = \"#333\"; ctx.lineWidth = 2; if (zone.path === \"background\") { ctx.fillStyle = filled ? fillColor : \"#f8f8f8\"; ctx.fillRect(0, 0, 400, 400); return; } ctx.fillStyle = filled ? fillColor : \"#ffffff\"; ctx.beginPath(); if (zone.path === \"circle\") { ctx.arc(zone.cx, zone.cy, zone.r, 0, Math.PI * 2); ctx.fill(); ctx.stroke(); } else if (zone.path === \"ellipse\") { ctx.save(); ctx.translate(zone.cx, zone.cy); if (zone.rotation) ctx.rotate(zone.rotation); ctx.beginPath(); ctx.ellipse(0, 0, zone.rx, zone.ry, 0, 0, Math.PI * 2); ctx.fill(); ctx.stroke(); ctx.restore(); } else if (zone.path === \"rect\") { ctx.fillRect(zone.x, zone.y, zone.w, zone.h); ctx.strokeRect(zone.x, zone.y, zone.w, zone.h); } else if (zone.path === \"triangle\" || zone.path === \"polygon\") { ctx.moveTo(zone.points[0][0], zone.points[0][1]); for (let i = 1; i < zone.points.length; i++) ctx.lineTo(zone.points[i][0], zone.points[i][1]); ctx.closePath(); ctx.fill(); ctx.stroke(); } else if (zone.path === \"arc\") { \/\/ arco: disegno con stroke spesso ctx.lineWidth = zone.lineWidth; ctx.strokeStyle = filled ? fillColor : \"#ffffff\"; ctx.beginPath(); ctx.arc(zone.cx, zone.cy, zone.r, zone.startAngle, zone.endAngle); ctx.stroke(); \/\/ bordo ctx.strokeStyle = \"#333\"; ctx.lineWidth = 2; ctx.beginPath(); ctx.arc(zone.cx, zone.cy, zone.r, zone.startAngle, zone.endAngle); ctx.stroke(); } else if (zone.path === \"cloud\") { ctx.beginPath(); ctx.arc(zone.cx, zone.cy, 25, 0, Math.PI * 2); ctx.arc(zone.cx - 22, zone.cy + 10, 20, 0, Math.PI * 2); ctx.arc(zone.cx + 22, zone.cy + 10, 20, 0, Math.PI * 2); ctx.fill(); ctx.stroke(); } \/\/ numero se non riempito if (!filled) { const center = getZoneCenter(zone); ctx.fillStyle = \"#333\"; ctx.font = \"bold 14px Arial\"; ctx.textAlign = \"center\"; ctx.textBaseline = \"middle\"; ctx.fillText(String(zone.color), center.x, center.y); } }); } function getZoneCenter(zone) { if (typeof zone.cx === \"number\" && typeof zone.cy === \"number\") return { x: zone.cx, y: zone.cy }; if (zone.path === \"rect\") return { x: zone.x + zone.w \/ 2, y: zone.y + zone.h \/ 2 }; if (zone.points && zone.points.length) { const x = zone.points.reduce((s,p) => s + p[0], 0) \/ zone.points.length; const y = zone.points.reduce((s,p) => s + p[1], 0) \/ zone.points.length; return { x, y }; } return { x: 200, y: 200 }; } function handleCanvasClick(x, y) { const zones = images[currentImage].zones; \/\/ dall'alto in basso for (let i = zones.length - 1; i >= 0; i--) { const zone = zones[i]; if (zone.path === \"background\") continue; if (isPointInZone(x, y, zone)) { if (zone.color === selectedColor) { filledZones[zone.id] = true; renderCanvas(); renderPalette(); updateProgress(); checkWin(); } break; } } } function isPointInZone(x, y, zone) { if (zone.path === \"circle\") { const dx = x - zone.cx, dy = y - zone.cy; return dx*dx + dy*dy <= zone.r*zone.r; } if (zone.path === \"ellipse\") { const rot = zone.rotation || 0; const cos = Math.cos(-rot), sin = Math.sin(-rot); const dx = x - zone.cx, dy = y - zone.cy; const rx = cos*dx + sin*dy; const ry = -sin*dx + cos*dy; return (rx*rx)\/(zone.rx*zone.rx) + (ry*ry)\/(zone.ry*zone.ry) <= 1; } if (zone.path === \"rect\") { return x >= zone.x && x <= zone.x + zone.w && y >= zone.y && y <= zone.y + zone.h; } if (zone.path === \"triangle\" || zone.path === \"polygon\") { return isPointInPolygon(x, y, zone.points); } if (zone.path === \"arc\") { const dx = x - zone.cx, dy = y - zone.cy; const dist = Math.sqrt(dx*dx + dy*dy); return Math.abs(dist - zone.r) < zone.lineWidth \/ 2; } if (zone.path === \"cloud\") { \/\/ approx: 3 cerchi uniti const in1 = ((x-zone.cx)**2 + (y-zone.cy)**2) <= (25**2); const in2 = ((x-(zone.cx-22))**2 + (y-(zone.cy+10))**2) <= (20**2); const in3 = ((x-(zone.cx+22))**2 + (y-(zone.cy+10))**2) <= (20**2); return in1 || in2 || in3; } return false; } function isPointInPolygon(x, y, points) { let inside = false; for (let i = 0, j = points.length - 1; i < points.length; j = i++) { const xi = points[i][0], yi = points[i][1]; const xj = points[j][0], yj = points[j][1]; const intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) \/ (yj - yi) + xi); if (intersect) inside = !inside; } return inside; } function updateProgress() { const zones = images[currentImage].zones.filter(z => z.path !== \"background\"); const total = zones.length; const filled = Object.keys(filledZones).length; const percent = total ? Math.round((filled \/ total) * 100) : 0; document.getElementById(\"progress-fill\").style.width = percent + \"%\"; document.getElementById(\"progress-text\").textContent = percent + \"%\"; } function checkWin() { const zones = images[currentImage].zones.filter(z => z.path !== \"background\"); if (Object.keys(filledZones).length === zones.length) { document.getElementById(\"success-modal\").classList.add(\"active\"); } } function giveHint() { const zones = images[currentImage].zones; for (let i = 0; i < zones.length; i++) { const z = zones[i]; if (z.path === \"background\") continue; if (!filledZones[z.id]) { selectedColor = z.color; renderPalette(); break; } } } function saveImage() { const link = document.createElement(\"a\"); link.download = \"colorazione-dynseo.png\"; link.href = canvas.toDataURL(\"image\/png\"); link.click(); } function setZoom(z) { scale = Math.max(0.6, Math.min(2, z)); canvas.style.transform = \"scale(\" + scale + \")\"; } \/\/ Init if (document.readyState === \"complete\" || document.readyState === \"interactive\") { setTimeout(initGame, 50); } else { document.addEventListener(\"DOMContentLoaded\", initGame); } <\/script><\/body><\/html>[\/et_pb_code][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":4,"featured_media":130227,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"class_list":["post-486493","page","type-page","status-publish","has-post-thumbnail","hentry"],"yoast_head":"\n<title>Gioco di colorazione numerata online - DYNSEO - App educativa e giochi di memoria<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.dynseo.com\/it\/gioco-di-colorazione-numerata-online\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Gioco di colorazione numerata online - DYNSEO - App educativa e giochi di memoria\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.dynseo.com\/it\/gioco-di-colorazione-numerata-online\/\" \/>\n<meta property=\"og:site_name\" content=\"DYNSEO - App educativa e giochi di memoria\" \/>\n<meta property=\"article:modified_time\" content=\"2026-02-10T13:07:51+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.dynseo.com\/wp-content\/uploads\/2024\/07\/Article-pour-jeux-de-memoire-et-services-educatifs-sur-tablette-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"1500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:label1\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minuto\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.dynseo.com\\\/it\\\/gioco-di-colorazione-numerata-online\\\/\",\"url\":\"https:\\\/\\\/www.dynseo.com\\\/it\\\/gioco-di-colorazione-numerata-online\\\/\",\"name\":\"Gioco di colorazione numerata online - DYNSEO - App educativa e giochi di memoria\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.dynseo.com\\\/it\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.dynseo.com\\\/it\\\/gioco-di-colorazione-numerata-online\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.dynseo.com\\\/it\\\/gioco-di-colorazione-numerata-online\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.dynseo.com\\\/wp-content\\\/uploads\\\/2024\\\/07\\\/Article-pour-jeux-de-memoire-et-services-educatifs-sur-tablette-1.png\",\"datePublished\":\"2026-01-16T23:48:29+00:00\",\"dateModified\":\"2026-02-10T13:07:51+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.dynseo.com\\\/it\\\/gioco-di-colorazione-numerata-online\\\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.dynseo.com\\\/it\\\/gioco-di-colorazione-numerata-online\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/www.dynseo.com\\\/it\\\/gioco-di-colorazione-numerata-online\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.dynseo.com\\\/wp-content\\\/uploads\\\/2024\\\/07\\\/Article-pour-jeux-de-memoire-et-services-educatifs-sur-tablette-1.png\",\"contentUrl\":\"https:\\\/\\\/www.dynseo.com\\\/wp-content\\\/uploads\\\/2024\\\/07\\\/Article-pour-jeux-de-memoire-et-services-educatifs-sur-tablette-1.png\",\"width\":2000,\"height\":1500,\"caption\":\"Mantieni la tua agilit\u00e0 mentale con le nostre attivit\u00e0 divertenti e gratificanti\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.dynseo.com\\\/it\\\/gioco-di-colorazione-numerata-online\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Accueil\",\"item\":\"https:\\\/\\\/www.dynseo.com\\\/it\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Gioco di colorazione numerata online\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.dynseo.com\\\/it\\\/#website\",\"url\":\"https:\\\/\\\/www.dynseo.com\\\/it\\\/\",\"name\":\"Jeux de m\u00e9moire et stimulation cognitive\",\"description\":\"Con DYNSEO, la tua memoria mette il turbo!\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.dynseo.com\\\/it\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.dynseo.com\\\/it\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.dynseo.com\\\/it\\\/#organization\",\"name\":\"DYNSEO\",\"url\":\"https:\\\/\\\/www.dynseo.com\\\/it\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/www.dynseo.com\\\/it\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.dynseo.com\\\/wp-content\\\/uploads\\\/2022\\\/05\\\/logo-dynseo-new.png\",\"contentUrl\":\"https:\\\/\\\/www.dynseo.com\\\/wp-content\\\/uploads\\\/2022\\\/05\\\/logo-dynseo-new.png\",\"width\":5073,\"height\":1397,\"caption\":\"DYNSEO\"},\"image\":{\"@id\":\"https:\\\/\\\/www.dynseo.com\\\/it\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n","yoast_head_json":{"title":"Gioco di colorazione numerata online - DYNSEO - App educativa e giochi di memoria","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.dynseo.com\/it\/gioco-di-colorazione-numerata-online\/","og_locale":"it_IT","og_type":"article","og_title":"Gioco di colorazione numerata online - DYNSEO - App educativa e giochi di memoria","og_url":"https:\/\/www.dynseo.com\/it\/gioco-di-colorazione-numerata-online\/","og_site_name":"DYNSEO - App educativa e giochi di memoria","article_modified_time":"2026-02-10T13:07:51+00:00","og_image":[{"width":2000,"height":1500,"url":"https:\/\/www.dynseo.com\/wp-content\/uploads\/2024\/07\/Article-pour-jeux-de-memoire-et-services-educatifs-sur-tablette-1.png","type":"image\/png"}],"twitter_misc":{"Tempo di lettura stimato":"1 minuto"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.dynseo.com\/it\/gioco-di-colorazione-numerata-online\/","url":"https:\/\/www.dynseo.com\/it\/gioco-di-colorazione-numerata-online\/","name":"Gioco di colorazione numerata online - DYNSEO - App educativa e giochi di memoria","isPartOf":{"@id":"https:\/\/www.dynseo.com\/it\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.dynseo.com\/it\/gioco-di-colorazione-numerata-online\/#primaryimage"},"image":{"@id":"https:\/\/www.dynseo.com\/it\/gioco-di-colorazione-numerata-online\/#primaryimage"},"thumbnailUrl":"https:\/\/www.dynseo.com\/wp-content\/uploads\/2024\/07\/Article-pour-jeux-de-memoire-et-services-educatifs-sur-tablette-1.png","datePublished":"2026-01-16T23:48:29+00:00","dateModified":"2026-02-10T13:07:51+00:00","breadcrumb":{"@id":"https:\/\/www.dynseo.com\/it\/gioco-di-colorazione-numerata-online\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.dynseo.com\/it\/gioco-di-colorazione-numerata-online\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/www.dynseo.com\/it\/gioco-di-colorazione-numerata-online\/#primaryimage","url":"https:\/\/www.dynseo.com\/wp-content\/uploads\/2024\/07\/Article-pour-jeux-de-memoire-et-services-educatifs-sur-tablette-1.png","contentUrl":"https:\/\/www.dynseo.com\/wp-content\/uploads\/2024\/07\/Article-pour-jeux-de-memoire-et-services-educatifs-sur-tablette-1.png","width":2000,"height":1500,"caption":"Mantieni la tua agilit\u00e0 mentale con le nostre attivit\u00e0 divertenti e gratificanti"},{"@type":"BreadcrumbList","@id":"https:\/\/www.dynseo.com\/it\/gioco-di-colorazione-numerata-online\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Accueil","item":"https:\/\/www.dynseo.com\/it\/"},{"@type":"ListItem","position":2,"name":"Gioco di colorazione numerata online"}]},{"@type":"WebSite","@id":"https:\/\/www.dynseo.com\/it\/#website","url":"https:\/\/www.dynseo.com\/it\/","name":"Jeux de m\u00e9moire et stimulation cognitive","description":"Con DYNSEO, la tua memoria mette il turbo!","publisher":{"@id":"https:\/\/www.dynseo.com\/it\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.dynseo.com\/it\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Organization","@id":"https:\/\/www.dynseo.com\/it\/#organization","name":"DYNSEO","url":"https:\/\/www.dynseo.com\/it\/","logo":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/www.dynseo.com\/it\/#\/schema\/logo\/image\/","url":"https:\/\/www.dynseo.com\/wp-content\/uploads\/2022\/05\/logo-dynseo-new.png","contentUrl":"https:\/\/www.dynseo.com\/wp-content\/uploads\/2022\/05\/logo-dynseo-new.png","width":5073,"height":1397,"caption":"DYNSEO"},"image":{"@id":"https:\/\/www.dynseo.com\/it\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/www.dynseo.com\/it\/wp-json\/wp\/v2\/pages\/486493","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.dynseo.com\/it\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.dynseo.com\/it\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.dynseo.com\/it\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dynseo.com\/it\/wp-json\/wp\/v2\/comments?post=486493"}],"version-history":[{"count":5,"href":"https:\/\/www.dynseo.com\/it\/wp-json\/wp\/v2\/pages\/486493\/revisions"}],"predecessor-version":[{"id":497824,"href":"https:\/\/www.dynseo.com\/it\/wp-json\/wp\/v2\/pages\/486493\/revisions\/497824"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.dynseo.com\/it\/wp-json\/wp\/v2\/media\/130227"}],"wp:attachment":[{"href":"https:\/\/www.dynseo.com\/it\/wp-json\/wp\/v2\/media?parent=486493"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":486493,"date":"2026-01-17T00:48:29","date_gmt":"2026-01-16T23:48:29","guid":{"rendered":"https:\/\/www.dynseo.com\/gioco-di-colorazione-numerata-online\/"},"modified":"2026-02-10T14:07:51","modified_gmt":"2026-02-10T13:07:51","slug":"gioco-di-colorazione-numerata-online","status":"publish","type":"page","link":"https:\/\/www.dynseo.com\/it\/gioco-di-colorazione-numerata-online\/","title":{"rendered":"Gioco di colorazione numerata online"},"content":{"rendered":"

[et_pb_section fb_built=”1″ _builder_version=”4.27.5″ _module_preset=”default” global_colors_info=”{}”][et_pb_row _builder_version=”4.27.5″ _module_preset=”default” width=”100%” max_width=”1365px” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.27.5″ _module_preset=”default” global_colors_info=”{}”][et_pb_code _builder_version=”4.27.5″ _module_preset=”default” hover_enabled=”0″ sticky_enabled=”0″] Colorazione Numerata Gratuita | DYNSEO<\/title> <meta name=\"description\" content=\"Colorazione numerata gratuita online. Rilassati colorando disegni con numeri. Attivit\u00e0 rilassante e stimolante per tutte le et\u00e0.\" \/> <\/p>\n<style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: \"Segoe UI\", system-ui, -apple-system, sans-serif; background:#f8f9fa; color:#333; } .container { max-width: 900px; margin: 0 auto; padding: 15px; } .article-header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; padding: 28px 15px; text-align: center; border-radius: 0 0 20px 20px; margin-bottom: 20px; } .article-category { display: inline-block; background: rgba(255,255,255,0.22); padding: 5px 14px; border-radius: 999px; font-size: 0.85rem; margin-bottom: 10px; } .article-header h1 { font-size: 1.7rem; margin-bottom: 6px; } .article-header .subtitle { opacity: 0.9; font-size: 0.95rem; } .cta-banner { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 15px; padding: 18px; color: white; text-align: center; margin-bottom: 18px; } .cta-banner h3 { font-size: 1.05rem; margin-bottom: 8px; } .cta-banner p { font-size: 0.9rem; opacity: 0.95; margin-bottom: 12px; } .apps-row { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; } .app-badge { background: #fff; color: #667eea; padding: 8px 14px; border-radius: 999px; font-weight: 700; text-decoration: none; font-size: 0.85rem; } .game-container { background: white; border-radius: 15px; padding: 18px; box-shadow: 0 5px 20px rgba(0,0,0,0.08); margin-bottom: 20px; } \/* Selettore di immagine *\/ .image-selector { display:flex; gap: 10px; overflow-x:auto; padding-bottom: 8px; margin-bottom: 14px; } .image-thumb { width: 60px; height: 60px; border: 3px solid #e0e0e0; border-radius: 12px; cursor: pointer; transition: all .25s; flex-shrink: 0; display:flex; align-items:center; justify-content:center; font-size: 1.6rem; background:#f8f9fa; user-select: none; } .image-thumb:hover { border-color:#667eea; } .image-thumb.active { border-color:#667eea; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color:#fff; } \/* Progresso *\/ .progress-bar { height: 8px; background:#e0e0e0; border-radius: 6px; overflow:hidden; margin: 10px 0 8px; } .progress-fill { height: 100%; width: 0%; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); transition: width .25s; } .progress-text { text-align:center; font-size: .9rem; color:#666; margin-bottom: 10px; } \/* Zoom *\/ .zoom-controls { display:flex; gap: 8px; justify-content:center; margin-bottom: 10px; } .zoom-btn { width: 38px; height: 38px; border: none; border-radius: 10px; background:#f0f0f0; font-size: 1.2rem; cursor:pointer; } .zoom-btn:hover { background:#e6e6e6; } \/* Canvas *\/ .canvas-wrapper { display:flex; justify-content:center; margin-bottom: 16px; background:#f0f0f0; border-radius: 12px; padding: 10px; overflow:hidden; } .canvas-container { position: relative; touch-action: none; } #coloring-canvas { border-radius: 8px; background:#fff; max-width: 100%; height: auto; cursor: crosshair; transform-origin: center center; } \/* Tavolozza dei colori *\/ .palette-section { margin-bottom: 14px; } .palette-title { text-align:center; font-size: .95rem; color:#667eea; margin-bottom: 10px; font-weight: 800; } .color-palette { display:flex; flex-wrap:wrap; gap: 8px; justify-content:center; } .color-btn { width: 46px; height: 46px; border-radius: 12px; cursor:pointer; border: 3px solid transparent; transition: all .15s; display:flex; align-items:center; justify-content:center; font-size: .95rem; font-weight: 900; color:#fff; text-shadow: 1px 1px 2px rgba(0,0,0,.45); position: relative; user-select: none; } .color-btn:hover { transform: scale(1.06); } .color-btn.active { border-color:#111; transform: scale(1.12); box-shadow: 0 5px 14px rgba(0,0,0,.25); } .color-btn .count { position:absolute; top:-6px; right:-6px; background:#111; color:#fff; font-size: .65rem; padding: 2px 6px; border-radius: 999px; font-weight: 800; } .color-btn.completed { opacity: .55; } .color-btn.completed::after { content: \"\u2713\"; position:absolute; font-size: 1.2rem; } \/* Controls *\/ .game-controls { display:flex; gap: 10px; justify-content:center; flex-wrap:wrap; } .control-btn { padding: 10px 16px; border:none; border-radius: 12px; font-size: .9rem; font-weight: 800; cursor:pointer; transition: all .2s; display:flex; align-items:center; gap: 6px; } .control-btn.primary { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color:#fff; } .control-btn.secondary { background:#f0f0f0; color:#333; } .control-btn:hover { transform: translateY(-1px); } \/* SEO *\/ .seo-content { background:#fff; border-radius: 15px; padding: 22px; box-shadow: 0 5px 20px rgba(0,0,0,0.08); } .seo-content h2 { color:#667eea; font-size: 1.3rem; margin-bottom: 12px; border-bottom: 2px solid #667eea; padding-bottom: 8px; } .seo-content p { font-size: .95rem; margin-bottom: 10px; color:#555; line-height: 1.65; } \/* Modal *\/ .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.7); display:none; align-items:center; justify-content:center; z-index: 1000; padding: 15px; } .modal-overlay.active { display:flex; } .modal { background:#fff; padding: 24px; border-radius: 18px; text-align:center; max-width: 360px; width: 100%; } .modal-icon { font-size: 3rem; margin-bottom: 10px; } .modal h2 { color:#667eea; margin-bottom: 8px; } .modal p { color:#666; margin-bottom: 16px; } .modal-buttons { display:flex; flex-direction:column; gap: 10px; } .modal-btn { padding: 12px; border:none; border-radius: 12px; font-size: 1rem; font-weight: 800; cursor:pointer; text-decoration:none; display:block; } .modal-btn.primary { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color:#fff; } .modal-btn.cta { background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%); color:#fff; } \/* Footer *\/ .article-footer { text-align:center; padding: 22px 15px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color:#fff; border-radius: 20px 20px 0 0; margin-top: 22px; } .article-footer a { color:#fff; margin: 0 8px; font-weight: 800; text-decoration: none; } @media (min-width: 600px) { .image-thumb { width: 72px; height: 72px; } .color-btn { width: 52px; height: 52px; } } <\/style>\n<p><\/head><body> <\/p>\n<header class=\"article-header\"> <\/p>\n<div class=\"article-category\">\ud83c\udfa8 Creativit\u00e0<\/div>\n<p> <\/p>\n<h1>Colorazione Numerata<\/h1>\n<p> <pee class=\"subtitle\">Rilassati colorando e completa ogni zona con il colore corretto.<\/pee> <\/header>\n<p> <\/p>\n<div class=\"container\"> <\/p>\n<div class=\"cta-banner\"> <\/p>\n<h3>\ud83e\udde0 Rilassamento e stimolazione cognitiva<\/h3>\n<p> <pee>Scopri altre attivit\u00e0 nelle nostre app!<\/pee> <\/p>\n<div class=\"apps-row\"> <a href=\"https:\/\/www.dynseo.com\/it\/version-coco\/\" class=\"app-badge\" target=\"_blank\" rel=\"noopener\">\ud83d\udc76 COCO<\/a> <a href=\"https:\/\/www.dynseo.com\/it\/roberto-3\/\" class=\"app-badge\" target=\"_blank\" rel=\"noopener\">\ud83e\uddd1 JOE<\/a> <a href=\"https:\/\/www.dynseo.com\/tablette-memoire-senior-edith\/\" class=\"app-badge\" target=\"_blank\" rel=\"noopener\">\ud83d\udc74 EDITH<\/a> <\/div>\n<p> <\/div>\n<p> <\/p>\n<div class=\"game-container\"> <\/p>\n<div class=\"image-selector\" id=\"image-selector\"><\/div>\n<p> <\/p>\n<div class=\"progress-bar\">\n<div class=\"progress-fill\" id=\"progress-fill\"><\/div>\n<\/div>\n<p> <\/p>\n<div class=\"progress-text\"><span id=\"progress-text\">0%<\/span> completato<\/div>\n<p> <\/p>\n<div class=\"zoom-controls\"> <button class=\"zoom-btn\" id=\"zoom-out\" aria-label=\"Zoom meno\">\u2212<\/button> <button class=\"zoom-btn\" id=\"zoom-reset\" aria-label=\"Reset zoom\">\u27f2<\/button> <button class=\"zoom-btn\" id=\"zoom-in\" aria-label=\"Zoom pi\u00f9\">+<\/button> <\/div>\n<p> <\/p>\n<div class=\"canvas-wrapper\"> <\/p>\n<div class=\"canvas-container\"> <canvas id=\"coloring-canvas\" width=\"400\" height=\"400\" aria-label=\"Tela di colorazione\"><\/canvas> <\/div>\n<p> <\/div>\n<p> <\/p>\n<div class=\"palette-section\"> <\/p>\n<div class=\"palette-title\">\ud83c\udfa8 Tavolozza dei colori<\/div>\n<p> <\/p>\n<div class=\"color-palette\" id=\"color-palette\"><\/div>\n<p> <\/div>\n<p> <\/p>\n<div class=\"game-controls\"> <button class=\"control-btn primary\" id=\"new-btn\">\ud83d\udd04 Nuovo<\/button> <button class=\"control-btn secondary\" id=\"hint-btn\">\ud83d\udca1 Indizio<\/button> <button class=\"control-btn secondary\" id=\"save-btn\">\ud83d\udcbe Salva<\/button> <\/div>\n<p> <\/div>\n<p> <\/p>\n<section class=\"seo-content\"> <\/p>\n<h2>La Colorazione: Arteterapia Digitale<\/h2>\n<p> <pee>La colorazione numerata \u00e8 un\u2019attivit\u00e0 rilassante che riduce lo stress e stimola la concentrazione. Ogni zona \u00e8 associata a un numero che corrisponde a un colore.<\/pee> <pee><strong>Benefici:<\/strong> concentrazione, motricit\u00e0 fine, riconoscimento dei colori, relax e riduzione dell\u2019ansia.<\/pee> <\/section>\n<p> <\/div>\n<p> <\/p>\n<div class=\"modal-overlay\" id=\"success-modal\" role=\"dialog\" aria-modal=\"true\" aria-label=\"Completato\"> <\/p>\n<div class=\"modal\"> <\/p>\n<div class=\"modal-icon\">\ud83c\udfa8<\/div>\n<p> <\/p>\n<h2>Magnifico!<\/h2>\n<p> <pee>Hai completato questa colorazione!<\/pee> <\/p>\n<div class=\"modal-buttons\"> <button class=\"modal-btn primary\" id=\"modal-next\">\ud83d\uddbc\ufe0f Immagine successiva<\/button> <a class=\"modal-btn cta\" href=\"https:\/\/www.dynseo.com\/it\/roberto-3\/\" target=\"_blank\" rel=\"noopener\">\ud83e\udde0 Scopri JOE<\/a> <\/div>\n<p> <\/div>\n<p> <\/div>\n<p> <\/p>\n<footer class=\"article-footer\"> <pee> <a href=\"https:\/\/www.dynseo.com\/it\/version-coco\/\" target=\"_blank\" rel=\"noopener\">COCO<\/a> | <a href=\"https:\/\/www.dynseo.com\/it\/roberto-3\/\" target=\"_blank\" rel=\"noopener\">JOE<\/a> | <a href=\"https:\/\/www.dynseo.com\/tablette-memoire-senior-edith\/\" target=\"_blank\" rel=\"noopener\">EDITH<\/a> <\/pee> <\/footer>\n<p> <script> \/\/ ----- Palette colori (ID = numero che appare) ----- const colors = [ { id: 1, hex: '#e74c3c', name: 'Rosso' }, { id: 2, hex: '#e67e22', name: 'Arancione' }, { id: 3, hex: '#f1c40f', name: 'Giallo' }, { id: 4, hex: '#2ecc71', name: 'Verde' }, { id: 5, hex: '#3498db', name: 'Blu' }, { id: 6, hex: '#9b59b6', name: 'Viola' }, { id: 7, hex: '#e91e63', name: 'Rosa' }, { id: 8, hex: '#795548', name: 'Marrone' }, { id: 9, hex: '#607d8b', name: 'Grigio' } ]; \/\/ ----- Modelli (zone geometriche) ----- function generateFlowerZones() { const zones = []; zones.push({ id: 1, color: 3, path: 'circle', cx: 200, cy: 200, r: 40 }); const petalAngles = [0, 72, 144, 216, 288]; for (let i = 0; i < 5; i++) { const angle = petalAngles[i] * Math.PI \/ 180; const cx = 200 + Math.cos(angle) * 85; const cy = 200 + Math.sin(angle) * 85; zones.push({ id: 2 + i, color: (i % 2 === 0) ? 7 : 1, path: 'ellipse', cx, cy, rx: 46, ry: 30, rotation: angle }); } zones.push({ id: 7, color: 4, path: 'rect', x: 190, y: 260, w: 20, h: 120 }); zones.push({ id: 8, color: 4, path: 'ellipse', cx: 160, cy: 325, rx: 36, ry: 16, rotation: -0.5 }); zones.push({ id: 9, color: 4, path: 'ellipse', cx: 240, cy: 345, rx: 36, ry: 16, rotation: 0.5 }); zones.push({ id: 10, color: 5, path: 'background' }); return zones; } function generateHouseZones() { const zones = []; zones.push({ id: 1, color: 5, path: 'rect', x: 0, y: 0, w: 400, h: 200 }); \/\/ cielo zones.push({ id: 2, color: 4, path: 'rect', x: 0, y: 280, w: 400, h: 120 }); \/\/ erba zones.push({ id: 3, color: 3, path: 'rect', x: 110, y: 160, w: 180, h: 140 }); \/\/ casa zones.push({ id: 4, color: 1, path: 'triangle', points: [[100,160],[200,80],[300,160]] }); \/\/ tetto zones.push({ id: 5, color: 8, path: 'rect', x: 175, y: 220, w: 50, h: 80 }); \/\/ porta zones.push({ id: 6, color: 9, path: 'rect', x: 130, y: 190, w: 40, h: 40 }); \/\/ finestra sx zones.push({ id: 7, color: 9, path: 'rect', x: 230, y: 190, w: 40, h: 40 }); \/\/ finestra dx zones.push({ id: 8, color: 3, path: 'circle', cx: 350, cy: 50, r: 30 }); \/\/ sole zones.push({ id: 9, color: 1, path: 'rect', x: 245, y: 95, w: 28, h: 45 }); \/\/ camino return zones; } function generateRainbowZones() { const zones = []; const rainbowColors = [1, 2, 3, 4, 5, 6]; for (let i = 0; i < 6; i++) { zones.push({ id: i + 1, color: rainbowColors[i], path: 'arc', cx: 200, cy: 320, r: 180 - i * 24, startAngle: Math.PI, endAngle: 0, lineWidth: 24 }); } zones.push({ id: 7, color: 9, path: 'cloud', cx: 90, cy: 285 }); zones.push({ id: 8, color: 9, path: 'cloud', cx: 310, cy: 285 }); zones.push({ id: 9, color: 5, path: 'background' }); return zones; } function generateStarZones() { const zones = []; const points = []; for (let i = 0; i < 10; i++) { const angle = (i * 36 - 90) * Math.PI \/ 180; const r = (i % 2 === 0) ? 150 : 70; points.push([200 + Math.cos(angle) * r, 200 + Math.sin(angle) * r]); } zones.push({ id: 1, color: 3, path: 'polygon', points }); zones.push({ id: 2, color: 3, path: 'circle', cx: 80, cy: 80, r: 18 }); zones.push({ id: 3, color: 3, path: 'circle', cx: 320, cy: 100, r: 14 }); zones.push({ id: 4, color: 3, path: 'circle', cx: 100, cy: 320, r: 16 }); zones.push({ id: 5, color: 3, path: 'circle', cx: 340, cy: 300, r: 12 }); zones.push({ id: 6, color: 6, path: 'background' }); return zones; } function generateCatZones() { const zones = []; zones.push({ id: 1, color: 2, path: 'ellipse', cx: 200, cy: 285, rx: 80, ry: 60, rotation: 0 }); zones.push({ id: 2, color: 2, path: 'circle', cx: 200, cy: 165, r: 70 }); zones.push({ id: 3, color: 2, path: 'triangle', points: [[140,110],[160,160],[120,160]] }); zones.push({ id: 4, color: 2, path: 'triangle', points: [[260,110],[240,160],[280,160]] }); zones.push({ id: 5, color: 7, path: 'triangle', points: [[145,125],[155,155],[130,155]] }); zones.push({ id: 6, color: 7, path: 'triangle', points: [[255,125],[245,155],[270,155]] }); zones.push({ id: 7, color: 4, path: 'ellipse', cx: 170, cy: 155, rx: 15, ry: 20, rotation: 0 }); zones.push({ id: 8, color: 4, path: 'ellipse', cx: 230, cy: 155, rx: 15, ry: 20, rotation: 0 }); zones.push({ id: 9, color: 7, path: 'triangle', points: [[200,175],[190,190],[210,190]] }); zones.push({ id: 10, color: 2, path: 'arc', cx: 120, cy: 305, r: 60, startAngle: 0, endAngle: Math.PI, lineWidth: 20 }); zones.push({ id: 11, color: 5, path: 'background' }); return zones; } function generateTreeZones() { const zones = []; zones.push({ id: 1, color: 5, path: 'rect', x: 0, y: 0, w: 400, h: 280 }); zones.push({ id: 2, color: 4, path: 'rect', x: 0, y: 320, w: 400, h: 80 }); zones.push({ id: 3, color: 8, path: 'rect', x: 175, y: 250, w: 50, h: 100 }); zones.push({ id: 4, color: 4, path: 'triangle', points: [[200,50],[100,150],[300,150]] }); zones.push({ id: 5, color: 4, path: 'triangle', points: [[200,100],[80,220],[320,220]] }); zones.push({ id: 6, color: 4, path: 'triangle', points: [[200,160],[60,280],[340,280]] }); zones.push({ id: 7, color: 1, path: 'circle', cx: 150, cy: 180, r: 12 }); zones.push({ id: 8, color: 1, path: 'circle', cx: 250, cy: 200, r: 12 }); zones.push({ id: 9, color: 1, path: 'circle', cx: 180, cy: 240, r: 12 }); zones.push({ id: 10, color: 3, path: 'circle', cx: 350, cy: 50, r: 28 }); return zones; } \/\/ ----- Dati immagini ----- const images = [ { name: \"\ud83c\udf38\", zones: generateFlowerZones() }, { name: \"\ud83c\udfe0\", zones: generateHouseZones() }, { name: \"\ud83c\udf08\", zones: generateRainbowZones() }, { name: \"\u2b50\", zones: generateStarZones() }, { name: \"\ud83d\udc31\", zones: generateCatZones() }, { name: \"\ud83c\udf33\", zones: generateTreeZones() } ]; \/\/ ----- Stato gioco ----- let currentImage = 0; let selectedColor = 1; let filledZones = {}; let canvas, ctx; let scale = 1; function initGame() { canvas = document.getElementById(\"coloring-canvas\"); ctx = canvas.getContext(\"2d\"); \/\/ Selettore immagini const selector = document.getElementById(\"image-selector\"); selector.innerHTML = \"\"; images.forEach((img, i) => { const thumb = document.createElement(\"div\"); thumb.className = \"image-thumb\" + (i === 0 ? \" active\" : \"\"); thumb.textContent = img.name; thumb.dataset.index = String(i); thumb.addEventListener(\"click\", () => selectImage(i)); selector.appendChild(thumb); }); \/\/ Pulsanti document.getElementById(\"new-btn\").addEventListener(\"click\", () => selectImage(currentImage)); document.getElementById(\"hint-btn\").addEventListener(\"click\", giveHint); document.getElementById(\"save-btn\").addEventListener(\"click\", saveImage); document.getElementById(\"modal-next\").addEventListener(\"click\", () => { document.getElementById(\"success-modal\").classList.remove(\"active\"); selectImage((currentImage + 1) % images.length); }); \/\/ Zoom document.getElementById(\"zoom-in\").addEventListener(\"click\", () => setZoom(scale + 0.2)); document.getElementById(\"zoom-out\").addEventListener(\"click\", () => setZoom(scale - 0.2)); document.getElementById(\"zoom-reset\").addEventListener(\"click\", () => setZoom(1)); \/\/ Click \/ touch canvas canvas.addEventListener(\"click\", (e) => { const rect = canvas.getBoundingClientRect(); const x = (e.clientX - rect.left) \/ scale; const y = (e.clientY - rect.top) \/ scale; handleCanvasClick(x, y); }); canvas.addEventListener(\"touchstart\", (e) => { e.preventDefault(); const t = e.touches[0]; const rect = canvas.getBoundingClientRect(); const x = (t.clientX - rect.left) \/ scale; const y = (t.clientY - rect.top) \/ scale; handleCanvasClick(x, y); }, { passive: false }); \/\/ Avvio selectImage(0); } function selectImage(index) { currentImage = index; filledZones = {}; document.querySelectorAll(\".image-thumb\").forEach((el, i) => { el.classList.toggle(\"active\", i === index); }); \/\/ reset zoom visivo setZoom(1); renderCanvas(); renderPalette(); updateProgress(); } function renderPalette() { const palette = document.getElementById(\"color-palette\"); palette.innerHTML = \"\"; const zones = images[currentImage].zones; const colorCounts = {}; zones.forEach(z => { colorCounts[z.color] = (colorCounts[z.color] || 0) + 1; }); colors.forEach(c => { if (!colorCounts[c.id]) return; const btn = document.createElement(\"div\"); btn.className = \"color-btn\" + (c.id === selectedColor ? \" active\" : \"\"); btn.style.background = c.hex; btn.textContent = c.id; btn.dataset.id = String(c.id); \/\/ conteggio rimanente let remaining = 0; zones.forEach(z => { if (z.color === c.id && !filledZones[z.id]) remaining++; }); if (remaining === 0) { btn.classList.add(\"completed\"); } else { const count = document.createElement(\"span\"); count.className = \"count\"; count.textContent = String(remaining); btn.appendChild(count); } btn.addEventListener(\"click\", () => { selectedColor = c.id; document.querySelectorAll(\".color-btn\").forEach(b => b.classList.remove(\"active\")); btn.classList.add(\"active\"); }); palette.appendChild(btn); }); } function renderCanvas() { ctx.clearRect(0, 0, 400, 400); ctx.fillStyle = \"#fff\"; ctx.fillRect(0, 0, 400, 400); const zones = [...images[currentImage].zones]; \/\/ Sfondo prima zones.sort((a, b) => (a.path === \"background\" ? -1 : 0) + (b.path === \"background\" ? 1 : 0)); zones.forEach(zone => { const filled = !!filledZones[zone.id]; const colorObj = colors.find(c => c.id === zone.color); const fillColor = colorObj ? colorObj.hex : \"#ffffff\"; ctx.strokeStyle = \"#333\"; ctx.lineWidth = 2; if (zone.path === \"background\") { ctx.fillStyle = filled ? fillColor : \"#f8f8f8\"; ctx.fillRect(0, 0, 400, 400); return; } ctx.fillStyle = filled ? fillColor : \"#ffffff\"; ctx.beginPath(); if (zone.path === \"circle\") { ctx.arc(zone.cx, zone.cy, zone.r, 0, Math.PI * 2); ctx.fill(); ctx.stroke(); } else if (zone.path === \"ellipse\") { ctx.save(); ctx.translate(zone.cx, zone.cy); if (zone.rotation) ctx.rotate(zone.rotation); ctx.beginPath(); ctx.ellipse(0, 0, zone.rx, zone.ry, 0, 0, Math.PI * 2); ctx.fill(); ctx.stroke(); ctx.restore(); } else if (zone.path === \"rect\") { ctx.fillRect(zone.x, zone.y, zone.w, zone.h); ctx.strokeRect(zone.x, zone.y, zone.w, zone.h); } else if (zone.path === \"triangle\" || zone.path === \"polygon\") { ctx.moveTo(zone.points[0][0], zone.points[0][1]); for (let i = 1; i < zone.points.length; i++) ctx.lineTo(zone.points[i][0], zone.points[i][1]); ctx.closePath(); ctx.fill(); ctx.stroke(); } else if (zone.path === \"arc\") { \/\/ arco: disegno con stroke spesso ctx.lineWidth = zone.lineWidth; ctx.strokeStyle = filled ? fillColor : \"#ffffff\"; ctx.beginPath(); ctx.arc(zone.cx, zone.cy, zone.r, zone.startAngle, zone.endAngle); ctx.stroke(); \/\/ bordo ctx.strokeStyle = \"#333\"; ctx.lineWidth = 2; ctx.beginPath(); ctx.arc(zone.cx, zone.cy, zone.r, zone.startAngle, zone.endAngle); ctx.stroke(); } else if (zone.path === \"cloud\") { ctx.beginPath(); ctx.arc(zone.cx, zone.cy, 25, 0, Math.PI * 2); ctx.arc(zone.cx - 22, zone.cy + 10, 20, 0, Math.PI * 2); ctx.arc(zone.cx + 22, zone.cy + 10, 20, 0, Math.PI * 2); ctx.fill(); ctx.stroke(); } \/\/ numero se non riempito if (!filled) { const center = getZoneCenter(zone); ctx.fillStyle = \"#333\"; ctx.font = \"bold 14px Arial\"; ctx.textAlign = \"center\"; ctx.textBaseline = \"middle\"; ctx.fillText(String(zone.color), center.x, center.y); } }); } function getZoneCenter(zone) { if (typeof zone.cx === \"number\" && typeof zone.cy === \"number\") return { x: zone.cx, y: zone.cy }; if (zone.path === \"rect\") return { x: zone.x + zone.w \/ 2, y: zone.y + zone.h \/ 2 }; if (zone.points && zone.points.length) { const x = zone.points.reduce((s,p) => s + p[0], 0) \/ zone.points.length; const y = zone.points.reduce((s,p) => s + p[1], 0) \/ zone.points.length; return { x, y }; } return { x: 200, y: 200 }; } function handleCanvasClick(x, y) { const zones = images[currentImage].zones; \/\/ dall'alto in basso for (let i = zones.length - 1; i >= 0; i--) { const zone = zones[i]; if (zone.path === \"background\") continue; if (isPointInZone(x, y, zone)) { if (zone.color === selectedColor) { filledZones[zone.id] = true; renderCanvas(); renderPalette(); updateProgress(); checkWin(); } break; } } } function isPointInZone(x, y, zone) { if (zone.path === \"circle\") { const dx = x - zone.cx, dy = y - zone.cy; return dx*dx + dy*dy <= zone.r*zone.r; } if (zone.path === \"ellipse\") { const rot = zone.rotation || 0; const cos = Math.cos(-rot), sin = Math.sin(-rot); const dx = x - zone.cx, dy = y - zone.cy; const rx = cos*dx + sin*dy; const ry = -sin*dx + cos*dy; return (rx*rx)\/(zone.rx*zone.rx) + (ry*ry)\/(zone.ry*zone.ry) <= 1; } if (zone.path === \"rect\") { return x >= zone.x && x <= zone.x + zone.w && y >= zone.y && y <= zone.y + zone.h; } if (zone.path === \"triangle\" || zone.path === \"polygon\") { return isPointInPolygon(x, y, zone.points); } if (zone.path === \"arc\") { const dx = x - zone.cx, dy = y - zone.cy; const dist = Math.sqrt(dx*dx + dy*dy); return Math.abs(dist - zone.r) < zone.lineWidth \/ 2; } if (zone.path === \"cloud\") { \/\/ approx: 3 cerchi uniti const in1 = ((x-zone.cx)**2 + (y-zone.cy)**2) <= (25**2); const in2 = ((x-(zone.cx-22))**2 + (y-(zone.cy+10))**2) <= (20**2); const in3 = ((x-(zone.cx+22))**2 + (y-(zone.cy+10))**2) <= (20**2); return in1 || in2 || in3; } return false; } function isPointInPolygon(x, y, points) { let inside = false; for (let i = 0, j = points.length - 1; i < points.length; j = i++) { const xi = points[i][0], yi = points[i][1]; const xj = points[j][0], yj = points[j][1]; const intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) \/ (yj - yi) + xi); if (intersect) inside = !inside; } return inside; } function updateProgress() { const zones = images[currentImage].zones.filter(z => z.path !== \"background\"); const total = zones.length; const filled = Object.keys(filledZones).length; const percent = total ? Math.round((filled \/ total) * 100) : 0; document.getElementById(\"progress-fill\").style.width = percent + \"%\"; document.getElementById(\"progress-text\").textContent = percent + \"%\"; } function checkWin() { const zones = images[currentImage].zones.filter(z => z.path !== \"background\"); if (Object.keys(filledZones).length === zones.length) { document.getElementById(\"success-modal\").classList.add(\"active\"); } } function giveHint() { const zones = images[currentImage].zones; for (let i = 0; i < zones.length; i++) { const z = zones[i]; if (z.path === \"background\") continue; if (!filledZones[z.id]) { selectedColor = z.color; renderPalette(); break; } } } function saveImage() { const link = document.createElement(\"a\"); link.download = \"colorazione-dynseo.png\"; link.href = canvas.toDataURL(\"image\/png\"); link.click(); } function setZoom(z) { scale = Math.max(0.6, Math.min(2, z)); canvas.style.transform = \"scale(\" + scale + \")\"; } \/\/ Init if (document.readyState === \"complete\" || document.readyState === \"interactive\") { setTimeout(initGame, 50); } else { document.addEventListener(\"DOMContentLoaded\", initGame); } <\/script><\/body><\/html>[\/et_pb_code][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":4,"featured_media":130227,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"class_list":["post-486493","page","type-page","status-publish","has-post-thumbnail","hentry"],"yoast_head":"\n<title>Gioco di colorazione numerata online - DYNSEO - App educativa e giochi di memoria<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.dynseo.com\/it\/gioco-di-colorazione-numerata-online\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Gioco di colorazione numerata online - DYNSEO - App educativa e giochi di memoria\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.dynseo.com\/it\/gioco-di-colorazione-numerata-online\/\" \/>\n<meta property=\"og:site_name\" content=\"DYNSEO - App educativa e giochi di memoria\" \/>\n<meta property=\"article:modified_time\" content=\"2026-02-10T13:07:51+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.dynseo.com\/wp-content\/uploads\/2024\/07\/Article-pour-jeux-de-memoire-et-services-educatifs-sur-tablette-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"1500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:label1\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minuto\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.dynseo.com\\\/it\\\/gioco-di-colorazione-numerata-online\\\/\",\"url\":\"https:\\\/\\\/www.dynseo.com\\\/it\\\/gioco-di-colorazione-numerata-online\\\/\",\"name\":\"Gioco di colorazione numerata online - DYNSEO - App educativa e giochi di memoria\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.dynseo.com\\\/it\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.dynseo.com\\\/it\\\/gioco-di-colorazione-numerata-online\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.dynseo.com\\\/it\\\/gioco-di-colorazione-numerata-online\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.dynseo.com\\\/wp-content\\\/uploads\\\/2024\\\/07\\\/Article-pour-jeux-de-memoire-et-services-educatifs-sur-tablette-1.png\",\"datePublished\":\"2026-01-16T23:48:29+00:00\",\"dateModified\":\"2026-02-10T13:07:51+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.dynseo.com\\\/it\\\/gioco-di-colorazione-numerata-online\\\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.dynseo.com\\\/it\\\/gioco-di-colorazione-numerata-online\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/www.dynseo.com\\\/it\\\/gioco-di-colorazione-numerata-online\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.dynseo.com\\\/wp-content\\\/uploads\\\/2024\\\/07\\\/Article-pour-jeux-de-memoire-et-services-educatifs-sur-tablette-1.png\",\"contentUrl\":\"https:\\\/\\\/www.dynseo.com\\\/wp-content\\\/uploads\\\/2024\\\/07\\\/Article-pour-jeux-de-memoire-et-services-educatifs-sur-tablette-1.png\",\"width\":2000,\"height\":1500,\"caption\":\"Mantieni la tua agilit\u00e0 mentale con le nostre attivit\u00e0 divertenti e gratificanti\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.dynseo.com\\\/it\\\/gioco-di-colorazione-numerata-online\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Accueil\",\"item\":\"https:\\\/\\\/www.dynseo.com\\\/it\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Gioco di colorazione numerata online\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.dynseo.com\\\/it\\\/#website\",\"url\":\"https:\\\/\\\/www.dynseo.com\\\/it\\\/\",\"name\":\"Jeux de m\u00e9moire et stimulation cognitive\",\"description\":\"Con DYNSEO, la tua memoria mette il turbo!\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.dynseo.com\\\/it\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.dynseo.com\\\/it\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.dynseo.com\\\/it\\\/#organization\",\"name\":\"DYNSEO\",\"url\":\"https:\\\/\\\/www.dynseo.com\\\/it\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/www.dynseo.com\\\/it\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.dynseo.com\\\/wp-content\\\/uploads\\\/2022\\\/05\\\/logo-dynseo-new.png\",\"contentUrl\":\"https:\\\/\\\/www.dynseo.com\\\/wp-content\\\/uploads\\\/2022\\\/05\\\/logo-dynseo-new.png\",\"width\":5073,\"height\":1397,\"caption\":\"DYNSEO\"},\"image\":{\"@id\":\"https:\\\/\\\/www.dynseo.com\\\/it\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n","yoast_head_json":{"title":"Gioco di colorazione numerata online - DYNSEO - App educativa e giochi di memoria","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.dynseo.com\/it\/gioco-di-colorazione-numerata-online\/","og_locale":"it_IT","og_type":"article","og_title":"Gioco di colorazione numerata online - DYNSEO - App educativa e giochi di memoria","og_url":"https:\/\/www.dynseo.com\/it\/gioco-di-colorazione-numerata-online\/","og_site_name":"DYNSEO - App educativa e giochi di memoria","article_modified_time":"2026-02-10T13:07:51+00:00","og_image":[{"width":2000,"height":1500,"url":"https:\/\/www.dynseo.com\/wp-content\/uploads\/2024\/07\/Article-pour-jeux-de-memoire-et-services-educatifs-sur-tablette-1.png","type":"image\/png"}],"twitter_misc":{"Tempo di lettura stimato":"1 minuto"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.dynseo.com\/it\/gioco-di-colorazione-numerata-online\/","url":"https:\/\/www.dynseo.com\/it\/gioco-di-colorazione-numerata-online\/","name":"Gioco di colorazione numerata online - DYNSEO - App educativa e giochi di memoria","isPartOf":{"@id":"https:\/\/www.dynseo.com\/it\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.dynseo.com\/it\/gioco-di-colorazione-numerata-online\/#primaryimage"},"image":{"@id":"https:\/\/www.dynseo.com\/it\/gioco-di-colorazione-numerata-online\/#primaryimage"},"thumbnailUrl":"https:\/\/www.dynseo.com\/wp-content\/uploads\/2024\/07\/Article-pour-jeux-de-memoire-et-services-educatifs-sur-tablette-1.png","datePublished":"2026-01-16T23:48:29+00:00","dateModified":"2026-02-10T13:07:51+00:00","breadcrumb":{"@id":"https:\/\/www.dynseo.com\/it\/gioco-di-colorazione-numerata-online\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.dynseo.com\/it\/gioco-di-colorazione-numerata-online\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/www.dynseo.com\/it\/gioco-di-colorazione-numerata-online\/#primaryimage","url":"https:\/\/www.dynseo.com\/wp-content\/uploads\/2024\/07\/Article-pour-jeux-de-memoire-et-services-educatifs-sur-tablette-1.png","contentUrl":"https:\/\/www.dynseo.com\/wp-content\/uploads\/2024\/07\/Article-pour-jeux-de-memoire-et-services-educatifs-sur-tablette-1.png","width":2000,"height":1500,"caption":"Mantieni la tua agilit\u00e0 mentale con le nostre attivit\u00e0 divertenti e gratificanti"},{"@type":"BreadcrumbList","@id":"https:\/\/www.dynseo.com\/it\/gioco-di-colorazione-numerata-online\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Accueil","item":"https:\/\/www.dynseo.com\/it\/"},{"@type":"ListItem","position":2,"name":"Gioco di colorazione numerata online"}]},{"@type":"WebSite","@id":"https:\/\/www.dynseo.com\/it\/#website","url":"https:\/\/www.dynseo.com\/it\/","name":"Jeux de m\u00e9moire et stimulation cognitive","description":"Con DYNSEO, la tua memoria mette il turbo!","publisher":{"@id":"https:\/\/www.dynseo.com\/it\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.dynseo.com\/it\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Organization","@id":"https:\/\/www.dynseo.com\/it\/#organization","name":"DYNSEO","url":"https:\/\/www.dynseo.com\/it\/","logo":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/www.dynseo.com\/it\/#\/schema\/logo\/image\/","url":"https:\/\/www.dynseo.com\/wp-content\/uploads\/2022\/05\/logo-dynseo-new.png","contentUrl":"https:\/\/www.dynseo.com\/wp-content\/uploads\/2022\/05\/logo-dynseo-new.png","width":5073,"height":1397,"caption":"DYNSEO"},"image":{"@id":"https:\/\/www.dynseo.com\/it\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/www.dynseo.com\/it\/wp-json\/wp\/v2\/pages\/486493","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.dynseo.com\/it\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.dynseo.com\/it\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.dynseo.com\/it\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dynseo.com\/it\/wp-json\/wp\/v2\/comments?post=486493"}],"version-history":[{"count":5,"href":"https:\/\/www.dynseo.com\/it\/wp-json\/wp\/v2\/pages\/486493\/revisions"}],"predecessor-version":[{"id":497824,"href":"https:\/\/www.dynseo.com\/it\/wp-json\/wp\/v2\/pages\/486493\/revisions\/497824"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.dynseo.com\/it\/wp-json\/wp\/v2\/media\/130227"}],"wp:attachment":[{"href":"https:\/\/www.dynseo.com\/it\/wp-json\/wp\/v2\/media?parent=486493"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}