Pintura por N\u00famero Gratuita | DYNSEO<\/title> <meta name=\"description\" content=\"Pintura por n\u00famero gratuita online. Relaxe pintando desenhos com n\u00fameros. Relaxante e estimulante para todas as idades.\"> <\/p>\n<style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Segoe UI', sans-serif; background: #f8f9fa; color: #333; } .container { max-width: 800px; margin: 0 auto; padding: 15px; }  .article-header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 25px 15px; text-align: center; border-radius: 0 0 20px 20px; margin-bottom: 20px; } .article-category { display: inline-block; background: rgba(255,255,255,0.2); padding: 5px 15px; border-radius: 15px; font-size: 0.8rem; margin-bottom: 8px; } .article-header h1 { font-size: 1.6rem; margin-bottom: 5px; } .article-header .subtitle { font-size: 0.9rem; opacity: 0.9; }  .game-container { background: white; border-radius: 15px; padding: 20px; box-shadow: 0 5px 20px rgba(0,0,0,0.08); margin-bottom: 20px; }  \/* Image selector *\/ .image-selector { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 10px; margin-bottom: 20px; } .image-thumb { width: 60px; height: 60px; border: 3px solid #e0e0e0; border-radius: 10px; cursor: pointer; transition: all 0.3s; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; background: #f8f9fa; } .image-thumb:hover { border-color: #667eea; } .image-thumb.active { border-color: #667eea; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }  \/* Progress *\/ .progress-bar { height: 8px; background: #e0e0e0; border-radius: 4px; margin-bottom: 15px; overflow: hidden; } .progress-fill { height: 100%; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); transition: width 0.3s; border-radius: 4px; } .progress-text { text-align: center; font-size: 0.85rem; color: #666; margin-bottom: 15px; }  \/* Canvas area *\/ .canvas-wrapper { display: flex; justify-content: center; margin-bottom: 20px; background: #f0f0f0; border-radius: 10px; padding: 10px; overflow: hidden; } .canvas-container { position: relative; touch-action: none; } #coloring-canvas { border-radius: 5px; background: white; max-width: 100%; height: auto; cursor: crosshair; }  \/* Color palette *\/ .palette-section { margin-bottom: 20px; } .palette-title { font-size: 0.9rem; color: #667eea; margin-bottom: 10px; font-weight: 600; } .color-palette { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } .color-btn { width: 45px; height: 45px; border-radius: 10px; cursor: pointer; border: 3px solid transparent; transition: all 0.2s; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; font-weight: 700; color: white; text-shadow: 1px 1px 2px rgba(0,0,0,0.5); position: relative; } .color-btn:hover { transform: scale(1.1); } .color-btn.active { border-color: #333; transform: scale(1.15); box-shadow: 0 4px 15px rgba(0,0,0,0.3); } .color-btn .count { position: absolute; top: -5px; right: -5px; background: #333; color: white; font-size: 0.6rem; padding: 2px 5px; border-radius: 10px; } .color-btn.completed { opacity: 0.5; } .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 18px; border: none; border-radius: 10px; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: all 0.3s; display: flex; align-items: center; gap: 5px; } .control-btn.primary { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; } .control-btn.secondary { background: #f0f0f0; color: #333; }  \/* Zoom controls *\/ .zoom-controls { display: flex; gap: 5px; justify-content: center; margin-bottom: 15px; } .zoom-btn { width: 35px; height: 35px; border: none; border-radius: 8px; background: #f0f0f0; font-size: 1.2rem; cursor: pointer; } .zoom-btn:hover { background: #e0e0e0; }  \/* Modal *\/ .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); display: none; align-items: center; justify-content: center; z-index: 1000; padding: 15px; } .modal-overlay.active { display: flex; } .modal { background: white; padding: 25px; border-radius: 20px; text-align: center; max-width: 350px; width: 100%; } .modal-icon { font-size: 3rem; margin-bottom: 10px; } .modal h2 { color: #667eea; font-size: 1.4rem; margin-bottom: 10px; } .modal p { color: #666; margin-bottom: 20px; } .modal-buttons { display: flex; flex-direction: column; gap: 10px; } .modal-btn { padding: 12px; border: none; border-radius: 10px; font-size: 0.95rem; font-weight: 600; cursor: pointer; text-decoration: none; display: block; } .modal-btn.primary { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; } .modal-btn.cta { background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%); color: white; }  \/* CTA *\/ .cta-banner { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 15px; padding: 20px; color: white; text-align: center; margin-bottom: 20px; } .cta-banner h3 { font-size: 1.1rem; margin-bottom: 8px; } .cta-banner p { font-size: 0.85rem; opacity: 0.9; margin-bottom: 12px; } .apps-row { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; } .app-badge { background: white; color: #667eea; padding: 8px 15px; border-radius: 20px; font-weight: 600; text-decoration: none; font-size: 0.8rem; }  \/* SEO *\/ .seo-content { background: white; border-radius: 15px; padding: 25px; box-shadow: 0 5px 20px rgba(0,0,0,0.08); } .seo-content h2 { color: #667eea; font-size: 1.3rem; margin-bottom: 15px; border-bottom: 2px solid #667eea; padding-bottom: 10px; } .seo-content p { font-size: 0.9rem; margin-bottom: 12px; color: #555; line-height: 1.6; }  \/* Footer *\/ .article-footer { text-align: center; padding: 25px 15px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border-radius: 20px 20px 0 0; margin-top: 25px; } .article-footer a { color: white; margin: 0 8px; font-size: 0.85rem; }  @media (min-width: 600px) { .color-btn { width: 50px; height: 50px; } .image-thumb { width: 70px; height: 70px; } } <\/style>\n<p><\/head><body> <\/p>\n<header class=\"article-header\"> <\/p>\n<div class=\"article-category\">\ud83c\udfa8 Criatividade<\/div>\n<p> <\/p>\n<h1>Pintura por N\u00famero<\/h1>\n<p> <pee class=\"subtitle\">Relaxe pintando!<\/pee> <\/header>\n<p>  <\/p>\n<div class=\"container\"> <\/p>\n<div class=\"cta-banner\"> <\/p>\n<h3>\ud83e\udde0 Relaxamento e estimula\u00e7\u00e3o cognitiva<\/h3>\n<p> <pee>Descubra mais atividades em nossos aplicativos!<\/pee> <\/p>\n<div class=\"apps-row\"> <a href=\"https:\/\/www.dynseo.com\/version-coco\/\" class=\"app-badge\">\ud83d\udc76 COCO<\/a> <a href=\"https:\/\/www.dynseo.com\/jeux-de-memoire\/joe-jeux-memoire-adulte\/\" class=\"app-badge\">\ud83e\uddd1 JOE<\/a> <a href=\"https:\/\/www.dynseo.com\/tablette-memoire-senior-edith\/\" class=\"app-badge\">\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\" style=\"width: 0%\"><\/div>\n<\/div>\n<p> <\/p>\n<div class=\"progress-text\"><span id=\"progress-text\">0%<\/span> completado<\/div>\n<p>   <\/p>\n<div class=\"zoom-controls\"> <button class=\"zoom-btn\" id=\"zoom-out\">\u2212<\/button> <button class=\"zoom-btn\" id=\"zoom-reset\">\u27f2<\/button> <button class=\"zoom-btn\" id=\"zoom-in\">+<\/button> <\/div>\n<p>   <\/p>\n<div class=\"canvas-wrapper\"> <\/p>\n<div class=\"canvas-container\"> <canvas id=\"coloring-canvas\" width=\"400\" height=\"400\"><\/canvas> <\/div>\n<p> <\/div>\n<p>   <\/p>\n<div class=\"palette-section\"> <\/p>\n<div class=\"palette-title\">\ud83c\udfa8 Paleta de cores<\/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 Novo<\/button> <button class=\"control-btn secondary\" id=\"hint-btn\">\ud83d\udca1 Dica<\/button> <button class=\"control-btn secondary\" id=\"save-btn\">\ud83d\udcbe Salvar<\/button> <\/div>\n<p> <\/div>\n<p>  <\/p>\n<section class=\"seo-content\"> <\/p>\n<h2>A Pintura: Arte-terapia Digital<\/h2>\n<p> <pee>A pintura por n\u00famero \u00e9 uma atividade relaxante que reduz o estresse enquanto estimula a concentra\u00e7\u00e3o. Cada \u00e1rea est\u00e1 associada a um n\u00famero correspondente a uma cor.<\/pee> <pee><strong>Benef\u00edcios:<\/strong> Concentra\u00e7\u00e3o, motricidade fina, reconhecimento de cores, relaxamento e redu\u00e7\u00e3o da ansiedade.<\/pee> <\/section>\n<p> <\/div>\n<p>  <\/p>\n<div class=\"modal-overlay\" id=\"success-modal\"> <\/p>\n<div class=\"modal\"> <\/p>\n<div class=\"modal-icon\">\ud83c\udfa8<\/div>\n<p> <\/p>\n<h2>Magn\u00edfico!<\/h2>\n<p> <pee>Voc\u00ea terminou esta pintura!<\/pee> <\/p>\n<div class=\"modal-buttons\"> <button class=\"modal-btn primary\" id=\"modal-next\">\ud83d\uddbc\ufe0f Pr\u00f3xima imagem<\/button> <a href=\"https:\/\/www.dynseo.com\/jeux-de-memoire\/joe-jeux-memoire-adulte\/\" class=\"modal-btn cta\" target=\"_blank\">\ud83e\udde0 Descobrir JOE<\/a> <\/div>\n<p> <\/div>\n<p> <\/div>\n<p>  <\/p>\n<footer class=\"article-footer\"> <pee><a href=\"https:\/\/www.dynseo.com\/version-coco\/\">COCO<\/a> | <a href=\"https:\/\/www.dynseo.com\/jeux-de-memoire\/joe-jeux-memoire-adulte\/\">JOE<\/a> | <a href=\"https:\/\/www.dynseo.com\/tablette-memoire-senior-edith\/\">EDITH<\/a><\/pee> <\/footer>\n<p>  <script> \/\/ Images data - simple geometric patterns with zones var 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() } ];  var colors = [ { id: 1, hex: '#e74c3c', name: 'Vermelho' }, { id: 2, hex: '#e67e22', name: 'Laranja' }, { id: 3, hex: '#f1c40f', name: 'Amarelo' }, { id: 4, hex: '#2ecc71', name: 'Verde' }, { id: 5, hex: '#3498db', name: 'Azul' }, { id: 6, hex: '#9b59b6', name: 'Violeta' }, { id: 7, hex: '#e91e63', name: 'Rosa' }, { id: 8, hex: '#795548', name: 'Marrom' }, { id: 9, hex: '#607d8b', name: 'Cinza' } ];  var currentImage = 0; var selectedColor = 1; var filledZones = {}; var canvas, ctx; var scale = 1;  function generateFlowerZones() { var zones = []; \/\/ Center zones.push({ id: 1, color: 3, path: 'circle', cx: 200, cy: 200, r: 40 }); \/\/ Petals var petalAngles = [0, 72, 144, 216, 288]; for (var i = 0; i < 5; i++) { var angle = petalAngles[i] * Math.PI \/ 180; var cx = 200 + Math.cos(angle) * 80; var cy = 200 + Math.sin(angle) * 80; zones.push({ id: 2 + i, color: (i % 2 === 0) ? 7 : 1, path: 'ellipse', cx: cx, cy: cy, rx: 45, ry: 30, rotation: angle }); } \/\/ Stem zones.push({ id: 7, color: 4, path: 'rect', x: 190, y: 260, w: 20, h: 120 }); \/\/ Leaves zones.push({ id: 8, color: 4, path: 'ellipse', cx: 160, cy: 320, rx: 35, ry: 15, rotation: -0.5 }); zones.push({ id: 9, color: 4, path: 'ellipse', cx: 240, cy: 340, rx: 35, ry: 15, rotation: 0.5 }); \/\/ Background zones.push({ id: 10, color: 5, path: 'background' }); return zones; }  function generateHouseZones() { var zones = []; \/\/ Sky background zones.push({ id: 1, color: 5, path: 'rect', x: 0, y: 0, w: 400, h: 200 }); \/\/ Grass zones.push({ id: 2, color: 4, path: 'rect', x: 0, y: 280, w: 400, h: 120 }); \/\/ House body zones.push({ id: 3, color: 3, path: 'rect', x: 100, y: 150, w: 200, h: 150 }); \/\/ Roof zones.push({ id: 4, color: 1, path: 'triangle', points: [[100, 150], [200, 70], [300, 150]] }); \/\/ Door zones.push({ id: 5, color: 8, path: 'rect', x: 170, y: 220, w: 60, h: 80 }); \/\/ Window left zones.push({ id: 6, color: 5, path: 'rect', x: 120, y: 180, w: 40, h: 40 }); \/\/ Window right zones.push({ id: 7, color: 5, path: 'rect', x: 240, y: 180, w: 40, h: 40 }); \/\/ Sun zones.push({ id: 8, color: 3, path: 'circle', cx: 350, cy: 50, r: 35 }); \/\/ Chimney zones.push({ id: 9, color: 1, path: 'rect', x: 250, y: 90, w: 30, h: 50 }); return zones; }  function generateRainbowZones() { var zones = []; var rainbowColors = [1, 2, 3, 4, 5, 6]; for (var i = 0; i < 6; i++) { zones.push({ id: i + 1, color: rainbowColors[i], path: 'arc', cx: 200, cy: 300, r: 180 - i * 25, startAngle: Math.PI, endAngle: 0, lineWidth: 25 }); } \/\/ Clouds zones.push({ id: 7, color: 9, path: 'cloud', cx: 80, cy: 280 }); zones.push({ id: 8, color: 9, path: 'cloud', cx: 320, cy: 280 }); \/\/ Sky zones.push({ id: 9, color: 5, path: 'background' }); return zones; }  function generateStarZones() { var zones = []; \/\/ Star points var points = []; for (var i = 0; i < 10; i++) { var angle = (i * 36 - 90) * Math.PI \/ 180; var 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: points }); \/\/ Small stars zones.push({ id: 2, color: 3, path: 'circle', cx: 80, cy: 80, r: 20 }); zones.push({ id: 3, color: 3, path: 'circle', cx: 320, cy: 100, r: 15 }); zones.push({ id: 4, color: 3, path: 'circle', cx: 100, cy: 320, r: 18 }); zones.push({ id: 5, color: 3, path: 'circle', cx: 340, cy: 300, r: 12 }); \/\/ Background zones.push({ id: 6, color: 6, path: 'background' }); return zones; }  function generateCatZones() { var zones = []; \/\/ Body zones.push({ id: 1, color: 2, path: 'ellipse', cx: 200, cy: 280, rx: 80, ry: 60, rotation: 0 }); \/\/ Head zones.push({ id: 2, color: 2, path: 'circle', cx: 200, cy: 160, r: 70 }); \/\/ Ears 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]] }); \/\/ Inner ears 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]] }); \/\/ Eyes zones.push({ id: 7, color: 4, path: 'ellipse', cx: 170, cy: 150, rx: 15, ry: 20, rotation: 0 }); zones.push({ id: 8, color: 4, path: 'ellipse', cx: 230, cy: 150, rx: 15, ry: 20, rotation: 0 }); \/\/ Nose zones.push({ id: 9, color: 7, path: 'triangle', points: [[200, 175], [190, 190], [210, 190]] }); \/\/ Tail zones.push({ id: 10, color: 2, path: 'arc', cx: 120, cy: 300, r: 60, startAngle: 0, endAngle: Math.PI, lineWidth: 20 }); \/\/ Background zones.push({ id: 11, color: 5, path: 'background' }); return zones; }  function generateTreeZones() { var zones = []; \/\/ Sky zones.push({ id: 1, color: 5, path: 'rect', x: 0, y: 0, w: 400, h: 280 }); \/\/ Ground zones.push({ id: 2, color: 4, path: 'rect', x: 0, y: 320, w: 400, h: 80 }); \/\/ Trunk zones.push({ id: 3, color: 8, path: 'rect', x: 175, y: 250, w: 50, h: 100 }); \/\/ Foliage layers 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]] }); \/\/ Apples 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 }); \/\/ Sun zones.push({ id: 10, color: 3, path: 'circle', cx: 350, cy: 50, r: 30 }); return zones; }  function initGame() { canvas = document.getElementById('coloring-canvas'); ctx = canvas.getContext('2d');  \/\/ Image selector var selector = document.getElementById('image-selector'); for (var i = 0; i < images.length; i++) { var thumb = document.createElement('div'); thumb.className = 'image-thumb' + (i === 0 ? ' active' : ''); thumb.textContent = images[i].name; thumb.setAttribute('data-index', i); thumb.onclick = function() { var idx = parseInt(this.getAttribute('data-index')); selectImage(idx); }; selector.appendChild(thumb); }  \/\/ Color palette renderPalette();  \/\/ Controls document.getElementById('new-btn').onclick = function() { selectImage(currentImage); }; document.getElementById('hint-btn').onclick = giveHint; document.getElementById('save-btn').onclick = saveImage; document.getElementById('modal-next').onclick = function() { document.getElementById('success-modal').classList.remove('active'); selectImage((currentImage + 1) % images.length); };  \/\/ Zoom document.getElementById('zoom-in').onclick = function() { setZoom(scale + 0.2); }; document.getElementById('zoom-out').onclick = function() { setZoom(scale - 0.2); }; document.getElementById('zoom-reset').onclick = function() { setZoom(1); };  \/\/ Canvas click canvas.onclick = function(e) { var rect = canvas.getBoundingClientRect(); var x = (e.clientX - rect.left) \/ scale; var y = (e.clientY - rect.top) \/ scale; handleCanvasClick(x, y); };  \/\/ Touch support canvas.ontouchstart = function(e) { e.preventDefault(); var touch = e.touches[0]; var rect = canvas.getBoundingClientRect(); var x = (touch.clientX - rect.left) \/ scale; var y = (touch.clientY - rect.top) \/ scale; handleCanvasClick(x, y); };  selectImage(0); }  function selectImage(index) { currentImage = index; filledZones = {};  var thumbs = document.querySelectorAll('.image-thumb'); for (var i = 0; i < thumbs.length; i++) { thumbs[i].classList.toggle('active', i === index); }  renderCanvas(); renderPalette(); updateProgress(); }  function renderPalette() { var palette = document.getElementById('color-palette'); palette.innerHTML = '';  var zones = images[currentImage].zones; var colorCounts = {};  for (var i = 0; i < zones.length; i++) { var c = zones[i].color; colorCounts[c] = (colorCounts[c] || 0) + 1; }  for (var i = 0; i < colors.length; i++) { if (!colorCounts[colors[i].id]) continue;  var btn = document.createElement('div'); btn.className = 'color-btn' + (colors[i].id === selectedColor ? ' active' : ''); btn.style.background = colors[i].hex; btn.textContent = colors[i].id; btn.setAttribute('data-id', colors[i].id);  \/\/ Count remaining var remaining = 0; for (var j = 0; j < zones.length; j++) { if (zones[j].color === colors[i].id && !filledZones[zones[j].id]) { remaining++; } }  if (remaining === 0) { btn.classList.add('completed'); } else { var count = document.createElement('span'); count.className = 'count'; count.textContent = remaining; btn.appendChild(count); }  btn.onclick = function() { selectedColor = parseInt(this.getAttribute('data-id')); var btns = document.querySelectorAll('.color-btn'); for (var k = 0; k < btns.length; k++) btns[k].classList.remove('active'); this.classList.add('active'); };  palette.appendChild(btn); } }  function renderCanvas() { ctx.clearRect(0, 0, 400, 400); ctx.fillStyle = '#ffffff'; ctx.fillRect(0, 0, 400, 400);  var zones = images[currentImage].zones;  \/\/ Sort: background first zones.sort(function(a, b) { if (a.path === 'background') return -1; if (b.path === 'background') return 1; return 0; });  for (var i = 0; i < zones.length; i++) { var zone = zones[i]; var filled = filledZones[zone.id]; var fillColor = filled ? colors.find(function(c) { return c.id === zone.color; }).hex : '#ffffff';  ctx.fillStyle = fillColor; ctx.strokeStyle = '#333'; ctx.lineWidth = 2;  ctx.beginPath();  if (zone.path === 'background') { ctx.fillStyle = filled ? fillColor : '#f8f8f8'; ctx.fillRect(0, 0, 400, 400); } else 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 (var j = 1; j < zone.points.length; j++) { ctx.lineTo(zone.points[j][0], zone.points[j][1]); } ctx.closePath(); ctx.fill(); ctx.stroke(); } else if (zone.path === 'arc') { ctx.lineWidth = zone.lineWidth; ctx.strokeStyle = filled ? fillColor : '#ffffff'; ctx.arc(zone.cx, zone.cy, zone.r, zone.startAngle, zone.endAngle); ctx.stroke(); ctx.strokeStyle = '#333'; ctx.lineWidth = 2; ctx.stroke(); } else if (zone.path === 'cloud') { ctx.arc(zone.cx, zone.cy, 25, 0, Math.PI * 2); ctx.arc(zone.cx - 20, zone.cy + 10, 20, 0, Math.PI * 2); ctx.arc(zone.cx + 20, zone.cy + 10, 20, 0, Math.PI * 2); ctx.fill(); ctx.stroke(); }  \/\/ Draw number if not filled if (!filled && zone.path !== 'background') { var cx = zone.cx || (zone.x + zone.w\/2) || (zone.points ? zone.points.reduce(function(s,p){return s+p[0];},0)\/zone.points.length : 200); var cy = zone.cy || (zone.y + zone.h\/2) || (zone.points ? zone.points.reduce(function(s,p){return s+p[1];},0)\/zone.points.length : 200);  ctx.fillStyle = '#333'; ctx.font = 'bold 14px Arial'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(zone.color, cx, cy); } } }  function handleCanvasClick(x, y) { var zones = images[currentImage].zones;  \/\/ Check zones in reverse order (top first) for (var i = zones.length - 1; i >= 0; i--) { var zone = zones[i]; 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 === 'background') return true; if (zone.path === 'circle') { var dx = x - zone.cx, dy = y - zone.cy; return dx*dx + dy*dy <= zone.r*zone.r; } if (zone.path === 'ellipse') { var cos = Math.cos(-(zone.rotation || 0)); var sin = Math.sin(-(zone.rotation || 0)); var dx = x - zone.cx, dy = y - zone.cy; var rx = cos*dx + sin*dy, 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') { var dx = x - zone.cx, dy = y - zone.cy; var dist = Math.sqrt(dx*dx + dy*dy); return Math.abs(dist - zone.r) < zone.lineWidth\/2; } return false; }  function isPointInPolygon(x, y, points) { var inside = false; for (var i = 0, j = points.length - 1; i < points.length; j = i++) { var xi = points[i][0], yi = points[i][1]; var xj = points[j][0], yj = points[j][1]; if (((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) \/ (yj - yi) + xi)) { inside = !inside; } } return inside; }  function updateProgress() { var zones = images[currentImage].zones; var total = zones.length; var filled = Object.keys(filledZones).length; var percent = Math.round((filled \/ total) * 100); document.getElementById('progress-fill').style.width = percent + '%'; document.getElementById('progress-text').textContent = percent + '%'; }  function checkWin() { var zones = images[currentImage].zones; if (Object.keys(filledZones).length === zones.length) { document.getElementById('success-modal').classList.add('active'); } }  function giveHint() { var zones = images[currentImage].zones; for (var i = 0; i < zones.length; i++) { if (!filledZones[zones[i].id] && zones[i].path !== 'background') { selectedColor = zones[i].color; renderPalette(); \/\/ Highlight the zone break; } } }  function saveImage() { var link = document.createElement('a'); link.download = 'pintura-dynseo.png'; link.href = canvas.toDataURL(); link.click(); }  function setZoom(z) { scale = Math.max(0.5, Math.min(2, z)); canvas.style.transform = 'scale(' + scale + ')'; canvas.style.transformOrigin = 'center center'; }  \/\/ Init if (document.readyState === 'complete' || document.readyState === 'interactive') { setTimeout(initGame, 100); } else { document.addEventListener('DOMContentLoaded', initGame); } <\/script><\/body><\/html>[\/et_pb_code][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n<p>[et_pb_code]<script type=\"application\/ld+json\">{\"@context\":\"https:\/\/schema.org\",\"@type\":\"FAQPage\",\"mainEntity\":[{\"@type\":\"Question\",\"name\":\"O que \u00e9 a pintura por n\u00famero online?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"A pintura por n\u00famero online \u00e9 uma atividade relaxante onde cada \u00e1rea do desenho \u00e9 associada a um n\u00famero correspondente a uma cor espec\u00edfica. Esta forma de arte-terapia digital permite relaxar enquanto estimula a concentra\u00e7\u00e3o.\"}},{\"@type\":\"Question\",\"name\":\"Quais s\u00e3o os benef\u00edcios da pintura por n\u00famero?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"A pintura por n\u00famero oferece in\u00fameros benef\u00edcios: melhora da concentra\u00e7\u00e3o, desenvolvimento da motricidade fina, reconhecimento de cores, relaxamento e redu\u00e7\u00e3o da ansiedade. \u00c9 uma excelente atividade de estimula\u00e7\u00e3o cognitiva.\"}},{\"@type\":\"Question\",\"name\":\"O jogo de pintura por n\u00famero DYNSEO \u00e9 gratuito?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Sim, a DYNSEO oferece uma pintura por n\u00famero gratuita online. Voc\u00ea pode acessar essa atividade relaxante gratuitamente para aproveitar seus benef\u00edcios de concentra\u00e7\u00e3o e relaxamento.\"}},{\"@type\":\"Question\",\"name\":\"Quais aplicativos da DYNSEO oferecem atividades de pintura?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"A DYNSEO oferece atividades de pintura em tr\u00eas aplicativos: COCO para crian\u00e7as, JOE para adultos e EDITH para idosos. Cada aplicativo \u00e9 adaptado para seu p\u00fablico-alvo.\"}},{\"@type\":\"Question\",\"name\":\"\u00c9 poss\u00edvel salvar suas pinturas em andamento?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Sim, o jogo de pintura por n\u00famero online permite que voc\u00ea salve suas cria\u00e7\u00f5es em andamento. Assim, voc\u00ea pode retomar sua pintura de onde parou a qualquer momento.\"}},{\"@type\":\"Question\",\"name\":\"A pintura por n\u00famero realmente ajuda a reduzir o estresse?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Sim, a pintura por n\u00famero \u00e9 reconhecida como uma forma de arte-terapia que ajuda efetivamente a reduzir o estresse e a ansiedade. Esta atividade promove o relaxamento enquanto mant\u00e9m a mente focada em uma tarefa criativa e calmante.\"}}]}<\/script>[\/et_pb_code]<\/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-486499","page","type-page","status-publish","has-post-thumbnail","hentry"],"yoast_head":"\n<title>Jogo de Colorir Numerado Online - DYNSEO - Aplica\u00e7\u00f5es educativas e jogos de mem\u00f3ria<\/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\/pt-pt\/jogo-de-colorir-numerado-online\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Jogo de Colorir Numerado Online - DYNSEO - Aplica\u00e7\u00f5es educativas e jogos de mem\u00f3ria\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.dynseo.com\/pt-pt\/jogo-de-colorir-numerado-online\/\" \/>\n<meta property=\"og:site_name\" content=\"DYNSEO - Aplica\u00e7\u00f5es educativas e jogos de mem\u00f3ria\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-14T00:19:48+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 estimado de leitura\" \/>\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\\\/pt-pt\\\/jogo-de-colorir-numerado-online\\\/\",\"url\":\"https:\\\/\\\/www.dynseo.com\\\/pt-pt\\\/jogo-de-colorir-numerado-online\\\/\",\"name\":\"Jogo de Colorir Numerado Online - DYNSEO - Aplica\u00e7\u00f5es educativas e jogos de mem\u00f3ria\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.dynseo.com\\\/pt-pt\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.dynseo.com\\\/pt-pt\\\/jogo-de-colorir-numerado-online\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.dynseo.com\\\/pt-pt\\\/jogo-de-colorir-numerado-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:50:32+00:00\",\"dateModified\":\"2026-03-14T00:19:48+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.dynseo.com\\\/pt-pt\\\/jogo-de-colorir-numerado-online\\\/#breadcrumb\"},\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.dynseo.com\\\/pt-pt\\\/jogo-de-colorir-numerado-online\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\\\/\\\/www.dynseo.com\\\/pt-pt\\\/jogo-de-colorir-numerado-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\":\"Mant\u00e9m a tua agilidade mental com as nossas actividades divertidas e gratificantes\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.dynseo.com\\\/pt-pt\\\/jogo-de-colorir-numerado-online\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Accueil\",\"item\":\"https:\\\/\\\/www.dynseo.com\\\/pt-pt\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Jogo de Colorir Numerado Online\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.dynseo.com\\\/pt-pt\\\/#website\",\"url\":\"https:\\\/\\\/www.dynseo.com\\\/pt-pt\\\/\",\"name\":\"Jeux de m\u00e9moire et stimulation cognitive\",\"description\":\"Entra\u00eenez votre m\u00e9moire et votre cerveau avec DYNSEO\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.dynseo.com\\\/pt-pt\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.dynseo.com\\\/pt-pt\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-PT\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.dynseo.com\\\/pt-pt\\\/#organization\",\"name\":\"DYNSEO\",\"url\":\"https:\\\/\\\/www.dynseo.com\\\/pt-pt\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\\\/\\\/www.dynseo.com\\\/pt-pt\\\/#\\\/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\\\/pt-pt\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n","yoast_head_json":{"title":"Jogo de Colorir Numerado Online - DYNSEO - Aplica\u00e7\u00f5es educativas e jogos de mem\u00f3ria","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\/pt-pt\/jogo-de-colorir-numerado-online\/","og_locale":"pt_PT","og_type":"article","og_title":"Jogo de Colorir Numerado Online - DYNSEO - Aplica\u00e7\u00f5es educativas e jogos de mem\u00f3ria","og_url":"https:\/\/www.dynseo.com\/pt-pt\/jogo-de-colorir-numerado-online\/","og_site_name":"DYNSEO - Aplica\u00e7\u00f5es educativas e jogos de mem\u00f3ria","article_modified_time":"2026-03-14T00:19:48+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 estimado de leitura":"1 minuto"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.dynseo.com\/pt-pt\/jogo-de-colorir-numerado-online\/","url":"https:\/\/www.dynseo.com\/pt-pt\/jogo-de-colorir-numerado-online\/","name":"Jogo de Colorir Numerado Online - DYNSEO - Aplica\u00e7\u00f5es educativas e jogos de mem\u00f3ria","isPartOf":{"@id":"https:\/\/www.dynseo.com\/pt-pt\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.dynseo.com\/pt-pt\/jogo-de-colorir-numerado-online\/#primaryimage"},"image":{"@id":"https:\/\/www.dynseo.com\/pt-pt\/jogo-de-colorir-numerado-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:50:32+00:00","dateModified":"2026-03-14T00:19:48+00:00","breadcrumb":{"@id":"https:\/\/www.dynseo.com\/pt-pt\/jogo-de-colorir-numerado-online\/#breadcrumb"},"inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.dynseo.com\/pt-pt\/jogo-de-colorir-numerado-online\/"]}]},{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/www.dynseo.com\/pt-pt\/jogo-de-colorir-numerado-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":"Mant\u00e9m a tua agilidade mental com as nossas actividades divertidas e gratificantes"},{"@type":"BreadcrumbList","@id":"https:\/\/www.dynseo.com\/pt-pt\/jogo-de-colorir-numerado-online\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Accueil","item":"https:\/\/www.dynseo.com\/pt-pt\/"},{"@type":"ListItem","position":2,"name":"Jogo de Colorir Numerado Online"}]},{"@type":"WebSite","@id":"https:\/\/www.dynseo.com\/pt-pt\/#website","url":"https:\/\/www.dynseo.com\/pt-pt\/","name":"Jeux de m\u00e9moire et stimulation cognitive","description":"Entra\u00eenez votre m\u00e9moire et votre cerveau avec DYNSEO","publisher":{"@id":"https:\/\/www.dynseo.com\/pt-pt\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.dynseo.com\/pt-pt\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-PT"},{"@type":"Organization","@id":"https:\/\/www.dynseo.com\/pt-pt\/#organization","name":"DYNSEO","url":"https:\/\/www.dynseo.com\/pt-pt\/","logo":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/www.dynseo.com\/pt-pt\/#\/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\/pt-pt\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/www.dynseo.com\/pt-pt\/wp-json\/wp\/v2\/pages\/486499","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.dynseo.com\/pt-pt\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.dynseo.com\/pt-pt\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.dynseo.com\/pt-pt\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dynseo.com\/pt-pt\/wp-json\/wp\/v2\/comments?post=486499"}],"version-history":[{"count":4,"href":"https:\/\/www.dynseo.com\/pt-pt\/wp-json\/wp\/v2\/pages\/486499\/revisions"}],"predecessor-version":[{"id":511429,"href":"https:\/\/www.dynseo.com\/pt-pt\/wp-json\/wp\/v2\/pages\/486499\/revisions\/511429"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.dynseo.com\/pt-pt\/wp-json\/wp\/v2\/media\/130227"}],"wp:attachment":[{"href":"https:\/\/www.dynseo.com\/pt-pt\/wp-json\/wp\/v2\/media?parent=486499"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":486499,"date":"2026-01-17T00:50:32","date_gmt":"2026-01-16T23:50:32","guid":{"rendered":"https:\/\/www.dynseo.com\/jogo-de-colorir-numerado-online\/"},"modified":"2026-03-14T01:19:48","modified_gmt":"2026-03-14T00:19:48","slug":"jogo-de-colorir-numerado-online","status":"publish","type":"page","link":"https:\/\/www.dynseo.com\/pt-pt\/jogo-de-colorir-numerado-online\/","title":{"rendered":"Jogo de Colorir Numerado Online"},"content":{"rendered":"

[et_pb_section fb_built=”1″ theme_builder_area=”post_content” _builder_version=”4.27.5″ _module_preset=”default”][et_pb_row _builder_version=”4.27.5″ _module_preset=”default” theme_builder_area=”post_content” width=”100%” max_width=”1365px” hover_enabled=”0″ sticky_enabled=”0″][et_pb_column _builder_version=”4.27.5″ _module_preset=”default” type=”4_4″ theme_builder_area=”post_content”][et_pb_code _builder_version=”4.27.5″ _module_preset=”default” theme_builder_area=”post_content” hover_enabled=”0″ sticky_enabled=”0″] Pintura por N\u00famero Gratuita | DYNSEO<\/title> <meta name=\"description\" content=\"Pintura por n\u00famero gratuita online. Relaxe pintando desenhos com n\u00fameros. Relaxante e estimulante para todas as idades.\"> <\/p>\n<style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Segoe UI', sans-serif; background: #f8f9fa; color: #333; } .container { max-width: 800px; margin: 0 auto; padding: 15px; }  .article-header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 25px 15px; text-align: center; border-radius: 0 0 20px 20px; margin-bottom: 20px; } .article-category { display: inline-block; background: rgba(255,255,255,0.2); padding: 5px 15px; border-radius: 15px; font-size: 0.8rem; margin-bottom: 8px; } .article-header h1 { font-size: 1.6rem; margin-bottom: 5px; } .article-header .subtitle { font-size: 0.9rem; opacity: 0.9; }  .game-container { background: white; border-radius: 15px; padding: 20px; box-shadow: 0 5px 20px rgba(0,0,0,0.08); margin-bottom: 20px; }  \/* Image selector *\/ .image-selector { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 10px; margin-bottom: 20px; } .image-thumb { width: 60px; height: 60px; border: 3px solid #e0e0e0; border-radius: 10px; cursor: pointer; transition: all 0.3s; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; background: #f8f9fa; } .image-thumb:hover { border-color: #667eea; } .image-thumb.active { border-color: #667eea; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }  \/* Progress *\/ .progress-bar { height: 8px; background: #e0e0e0; border-radius: 4px; margin-bottom: 15px; overflow: hidden; } .progress-fill { height: 100%; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); transition: width 0.3s; border-radius: 4px; } .progress-text { text-align: center; font-size: 0.85rem; color: #666; margin-bottom: 15px; }  \/* Canvas area *\/ .canvas-wrapper { display: flex; justify-content: center; margin-bottom: 20px; background: #f0f0f0; border-radius: 10px; padding: 10px; overflow: hidden; } .canvas-container { position: relative; touch-action: none; } #coloring-canvas { border-radius: 5px; background: white; max-width: 100%; height: auto; cursor: crosshair; }  \/* Color palette *\/ .palette-section { margin-bottom: 20px; } .palette-title { font-size: 0.9rem; color: #667eea; margin-bottom: 10px; font-weight: 600; } .color-palette { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } .color-btn { width: 45px; height: 45px; border-radius: 10px; cursor: pointer; border: 3px solid transparent; transition: all 0.2s; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; font-weight: 700; color: white; text-shadow: 1px 1px 2px rgba(0,0,0,0.5); position: relative; } .color-btn:hover { transform: scale(1.1); } .color-btn.active { border-color: #333; transform: scale(1.15); box-shadow: 0 4px 15px rgba(0,0,0,0.3); } .color-btn .count { position: absolute; top: -5px; right: -5px; background: #333; color: white; font-size: 0.6rem; padding: 2px 5px; border-radius: 10px; } .color-btn.completed { opacity: 0.5; } .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 18px; border: none; border-radius: 10px; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: all 0.3s; display: flex; align-items: center; gap: 5px; } .control-btn.primary { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; } .control-btn.secondary { background: #f0f0f0; color: #333; }  \/* Zoom controls *\/ .zoom-controls { display: flex; gap: 5px; justify-content: center; margin-bottom: 15px; } .zoom-btn { width: 35px; height: 35px; border: none; border-radius: 8px; background: #f0f0f0; font-size: 1.2rem; cursor: pointer; } .zoom-btn:hover { background: #e0e0e0; }  \/* Modal *\/ .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); display: none; align-items: center; justify-content: center; z-index: 1000; padding: 15px; } .modal-overlay.active { display: flex; } .modal { background: white; padding: 25px; border-radius: 20px; text-align: center; max-width: 350px; width: 100%; } .modal-icon { font-size: 3rem; margin-bottom: 10px; } .modal h2 { color: #667eea; font-size: 1.4rem; margin-bottom: 10px; } .modal p { color: #666; margin-bottom: 20px; } .modal-buttons { display: flex; flex-direction: column; gap: 10px; } .modal-btn { padding: 12px; border: none; border-radius: 10px; font-size: 0.95rem; font-weight: 600; cursor: pointer; text-decoration: none; display: block; } .modal-btn.primary { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; } .modal-btn.cta { background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%); color: white; }  \/* CTA *\/ .cta-banner { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 15px; padding: 20px; color: white; text-align: center; margin-bottom: 20px; } .cta-banner h3 { font-size: 1.1rem; margin-bottom: 8px; } .cta-banner p { font-size: 0.85rem; opacity: 0.9; margin-bottom: 12px; } .apps-row { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; } .app-badge { background: white; color: #667eea; padding: 8px 15px; border-radius: 20px; font-weight: 600; text-decoration: none; font-size: 0.8rem; }  \/* SEO *\/ .seo-content { background: white; border-radius: 15px; padding: 25px; box-shadow: 0 5px 20px rgba(0,0,0,0.08); } .seo-content h2 { color: #667eea; font-size: 1.3rem; margin-bottom: 15px; border-bottom: 2px solid #667eea; padding-bottom: 10px; } .seo-content p { font-size: 0.9rem; margin-bottom: 12px; color: #555; line-height: 1.6; }  \/* Footer *\/ .article-footer { text-align: center; padding: 25px 15px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border-radius: 20px 20px 0 0; margin-top: 25px; } .article-footer a { color: white; margin: 0 8px; font-size: 0.85rem; }  @media (min-width: 600px) { .color-btn { width: 50px; height: 50px; } .image-thumb { width: 70px; height: 70px; } } <\/style>\n<p><\/head><body> <\/p>\n<header class=\"article-header\"> <\/p>\n<div class=\"article-category\">\ud83c\udfa8 Criatividade<\/div>\n<p> <\/p>\n<h1>Pintura por N\u00famero<\/h1>\n<p> <pee class=\"subtitle\">Relaxe pintando!<\/pee> <\/header>\n<p>  <\/p>\n<div class=\"container\"> <\/p>\n<div class=\"cta-banner\"> <\/p>\n<h3>\ud83e\udde0 Relaxamento e estimula\u00e7\u00e3o cognitiva<\/h3>\n<p> <pee>Descubra mais atividades em nossos aplicativos!<\/pee> <\/p>\n<div class=\"apps-row\"> <a href=\"https:\/\/www.dynseo.com\/version-coco\/\" class=\"app-badge\">\ud83d\udc76 COCO<\/a> <a href=\"https:\/\/www.dynseo.com\/jeux-de-memoire\/joe-jeux-memoire-adulte\/\" class=\"app-badge\">\ud83e\uddd1 JOE<\/a> <a href=\"https:\/\/www.dynseo.com\/tablette-memoire-senior-edith\/\" class=\"app-badge\">\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\" style=\"width: 0%\"><\/div>\n<\/div>\n<p> <\/p>\n<div class=\"progress-text\"><span id=\"progress-text\">0%<\/span> completado<\/div>\n<p>   <\/p>\n<div class=\"zoom-controls\"> <button class=\"zoom-btn\" id=\"zoom-out\">\u2212<\/button> <button class=\"zoom-btn\" id=\"zoom-reset\">\u27f2<\/button> <button class=\"zoom-btn\" id=\"zoom-in\">+<\/button> <\/div>\n<p>   <\/p>\n<div class=\"canvas-wrapper\"> <\/p>\n<div class=\"canvas-container\"> <canvas id=\"coloring-canvas\" width=\"400\" height=\"400\"><\/canvas> <\/div>\n<p> <\/div>\n<p>   <\/p>\n<div class=\"palette-section\"> <\/p>\n<div class=\"palette-title\">\ud83c\udfa8 Paleta de cores<\/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 Novo<\/button> <button class=\"control-btn secondary\" id=\"hint-btn\">\ud83d\udca1 Dica<\/button> <button class=\"control-btn secondary\" id=\"save-btn\">\ud83d\udcbe Salvar<\/button> <\/div>\n<p> <\/div>\n<p>  <\/p>\n<section class=\"seo-content\"> <\/p>\n<h2>A Pintura: Arte-terapia Digital<\/h2>\n<p> <pee>A pintura por n\u00famero \u00e9 uma atividade relaxante que reduz o estresse enquanto estimula a concentra\u00e7\u00e3o. Cada \u00e1rea est\u00e1 associada a um n\u00famero correspondente a uma cor.<\/pee> <pee><strong>Benef\u00edcios:<\/strong> Concentra\u00e7\u00e3o, motricidade fina, reconhecimento de cores, relaxamento e redu\u00e7\u00e3o da ansiedade.<\/pee> <\/section>\n<p> <\/div>\n<p>  <\/p>\n<div class=\"modal-overlay\" id=\"success-modal\"> <\/p>\n<div class=\"modal\"> <\/p>\n<div class=\"modal-icon\">\ud83c\udfa8<\/div>\n<p> <\/p>\n<h2>Magn\u00edfico!<\/h2>\n<p> <pee>Voc\u00ea terminou esta pintura!<\/pee> <\/p>\n<div class=\"modal-buttons\"> <button class=\"modal-btn primary\" id=\"modal-next\">\ud83d\uddbc\ufe0f Pr\u00f3xima imagem<\/button> <a href=\"https:\/\/www.dynseo.com\/jeux-de-memoire\/joe-jeux-memoire-adulte\/\" class=\"modal-btn cta\" target=\"_blank\">\ud83e\udde0 Descobrir JOE<\/a> <\/div>\n<p> <\/div>\n<p> <\/div>\n<p>  <\/p>\n<footer class=\"article-footer\"> <pee><a href=\"https:\/\/www.dynseo.com\/version-coco\/\">COCO<\/a> | <a href=\"https:\/\/www.dynseo.com\/jeux-de-memoire\/joe-jeux-memoire-adulte\/\">JOE<\/a> | <a href=\"https:\/\/www.dynseo.com\/tablette-memoire-senior-edith\/\">EDITH<\/a><\/pee> <\/footer>\n<p>  <script> \/\/ Images data - simple geometric patterns with zones var 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() } ];  var colors = [ { id: 1, hex: '#e74c3c', name: 'Vermelho' }, { id: 2, hex: '#e67e22', name: 'Laranja' }, { id: 3, hex: '#f1c40f', name: 'Amarelo' }, { id: 4, hex: '#2ecc71', name: 'Verde' }, { id: 5, hex: '#3498db', name: 'Azul' }, { id: 6, hex: '#9b59b6', name: 'Violeta' }, { id: 7, hex: '#e91e63', name: 'Rosa' }, { id: 8, hex: '#795548', name: 'Marrom' }, { id: 9, hex: '#607d8b', name: 'Cinza' } ];  var currentImage = 0; var selectedColor = 1; var filledZones = {}; var canvas, ctx; var scale = 1;  function generateFlowerZones() { var zones = []; \/\/ Center zones.push({ id: 1, color: 3, path: 'circle', cx: 200, cy: 200, r: 40 }); \/\/ Petals var petalAngles = [0, 72, 144, 216, 288]; for (var i = 0; i < 5; i++) { var angle = petalAngles[i] * Math.PI \/ 180; var cx = 200 + Math.cos(angle) * 80; var cy = 200 + Math.sin(angle) * 80; zones.push({ id: 2 + i, color: (i % 2 === 0) ? 7 : 1, path: 'ellipse', cx: cx, cy: cy, rx: 45, ry: 30, rotation: angle }); } \/\/ Stem zones.push({ id: 7, color: 4, path: 'rect', x: 190, y: 260, w: 20, h: 120 }); \/\/ Leaves zones.push({ id: 8, color: 4, path: 'ellipse', cx: 160, cy: 320, rx: 35, ry: 15, rotation: -0.5 }); zones.push({ id: 9, color: 4, path: 'ellipse', cx: 240, cy: 340, rx: 35, ry: 15, rotation: 0.5 }); \/\/ Background zones.push({ id: 10, color: 5, path: 'background' }); return zones; }  function generateHouseZones() { var zones = []; \/\/ Sky background zones.push({ id: 1, color: 5, path: 'rect', x: 0, y: 0, w: 400, h: 200 }); \/\/ Grass zones.push({ id: 2, color: 4, path: 'rect', x: 0, y: 280, w: 400, h: 120 }); \/\/ House body zones.push({ id: 3, color: 3, path: 'rect', x: 100, y: 150, w: 200, h: 150 }); \/\/ Roof zones.push({ id: 4, color: 1, path: 'triangle', points: [[100, 150], [200, 70], [300, 150]] }); \/\/ Door zones.push({ id: 5, color: 8, path: 'rect', x: 170, y: 220, w: 60, h: 80 }); \/\/ Window left zones.push({ id: 6, color: 5, path: 'rect', x: 120, y: 180, w: 40, h: 40 }); \/\/ Window right zones.push({ id: 7, color: 5, path: 'rect', x: 240, y: 180, w: 40, h: 40 }); \/\/ Sun zones.push({ id: 8, color: 3, path: 'circle', cx: 350, cy: 50, r: 35 }); \/\/ Chimney zones.push({ id: 9, color: 1, path: 'rect', x: 250, y: 90, w: 30, h: 50 }); return zones; }  function generateRainbowZones() { var zones = []; var rainbowColors = [1, 2, 3, 4, 5, 6]; for (var i = 0; i < 6; i++) { zones.push({ id: i + 1, color: rainbowColors[i], path: 'arc', cx: 200, cy: 300, r: 180 - i * 25, startAngle: Math.PI, endAngle: 0, lineWidth: 25 }); } \/\/ Clouds zones.push({ id: 7, color: 9, path: 'cloud', cx: 80, cy: 280 }); zones.push({ id: 8, color: 9, path: 'cloud', cx: 320, cy: 280 }); \/\/ Sky zones.push({ id: 9, color: 5, path: 'background' }); return zones; }  function generateStarZones() { var zones = []; \/\/ Star points var points = []; for (var i = 0; i < 10; i++) { var angle = (i * 36 - 90) * Math.PI \/ 180; var 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: points }); \/\/ Small stars zones.push({ id: 2, color: 3, path: 'circle', cx: 80, cy: 80, r: 20 }); zones.push({ id: 3, color: 3, path: 'circle', cx: 320, cy: 100, r: 15 }); zones.push({ id: 4, color: 3, path: 'circle', cx: 100, cy: 320, r: 18 }); zones.push({ id: 5, color: 3, path: 'circle', cx: 340, cy: 300, r: 12 }); \/\/ Background zones.push({ id: 6, color: 6, path: 'background' }); return zones; }  function generateCatZones() { var zones = []; \/\/ Body zones.push({ id: 1, color: 2, path: 'ellipse', cx: 200, cy: 280, rx: 80, ry: 60, rotation: 0 }); \/\/ Head zones.push({ id: 2, color: 2, path: 'circle', cx: 200, cy: 160, r: 70 }); \/\/ Ears 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]] }); \/\/ Inner ears 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]] }); \/\/ Eyes zones.push({ id: 7, color: 4, path: 'ellipse', cx: 170, cy: 150, rx: 15, ry: 20, rotation: 0 }); zones.push({ id: 8, color: 4, path: 'ellipse', cx: 230, cy: 150, rx: 15, ry: 20, rotation: 0 }); \/\/ Nose zones.push({ id: 9, color: 7, path: 'triangle', points: [[200, 175], [190, 190], [210, 190]] }); \/\/ Tail zones.push({ id: 10, color: 2, path: 'arc', cx: 120, cy: 300, r: 60, startAngle: 0, endAngle: Math.PI, lineWidth: 20 }); \/\/ Background zones.push({ id: 11, color: 5, path: 'background' }); return zones; }  function generateTreeZones() { var zones = []; \/\/ Sky zones.push({ id: 1, color: 5, path: 'rect', x: 0, y: 0, w: 400, h: 280 }); \/\/ Ground zones.push({ id: 2, color: 4, path: 'rect', x: 0, y: 320, w: 400, h: 80 }); \/\/ Trunk zones.push({ id: 3, color: 8, path: 'rect', x: 175, y: 250, w: 50, h: 100 }); \/\/ Foliage layers 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]] }); \/\/ Apples 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 }); \/\/ Sun zones.push({ id: 10, color: 3, path: 'circle', cx: 350, cy: 50, r: 30 }); return zones; }  function initGame() { canvas = document.getElementById('coloring-canvas'); ctx = canvas.getContext('2d');  \/\/ Image selector var selector = document.getElementById('image-selector'); for (var i = 0; i < images.length; i++) { var thumb = document.createElement('div'); thumb.className = 'image-thumb' + (i === 0 ? ' active' : ''); thumb.textContent = images[i].name; thumb.setAttribute('data-index', i); thumb.onclick = function() { var idx = parseInt(this.getAttribute('data-index')); selectImage(idx); }; selector.appendChild(thumb); }  \/\/ Color palette renderPalette();  \/\/ Controls document.getElementById('new-btn').onclick = function() { selectImage(currentImage); }; document.getElementById('hint-btn').onclick = giveHint; document.getElementById('save-btn').onclick = saveImage; document.getElementById('modal-next').onclick = function() { document.getElementById('success-modal').classList.remove('active'); selectImage((currentImage + 1) % images.length); };  \/\/ Zoom document.getElementById('zoom-in').onclick = function() { setZoom(scale + 0.2); }; document.getElementById('zoom-out').onclick = function() { setZoom(scale - 0.2); }; document.getElementById('zoom-reset').onclick = function() { setZoom(1); };  \/\/ Canvas click canvas.onclick = function(e) { var rect = canvas.getBoundingClientRect(); var x = (e.clientX - rect.left) \/ scale; var y = (e.clientY - rect.top) \/ scale; handleCanvasClick(x, y); };  \/\/ Touch support canvas.ontouchstart = function(e) { e.preventDefault(); var touch = e.touches[0]; var rect = canvas.getBoundingClientRect(); var x = (touch.clientX - rect.left) \/ scale; var y = (touch.clientY - rect.top) \/ scale; handleCanvasClick(x, y); };  selectImage(0); }  function selectImage(index) { currentImage = index; filledZones = {};  var thumbs = document.querySelectorAll('.image-thumb'); for (var i = 0; i < thumbs.length; i++) { thumbs[i].classList.toggle('active', i === index); }  renderCanvas(); renderPalette(); updateProgress(); }  function renderPalette() { var palette = document.getElementById('color-palette'); palette.innerHTML = '';  var zones = images[currentImage].zones; var colorCounts = {};  for (var i = 0; i < zones.length; i++) { var c = zones[i].color; colorCounts[c] = (colorCounts[c] || 0) + 1; }  for (var i = 0; i < colors.length; i++) { if (!colorCounts[colors[i].id]) continue;  var btn = document.createElement('div'); btn.className = 'color-btn' + (colors[i].id === selectedColor ? ' active' : ''); btn.style.background = colors[i].hex; btn.textContent = colors[i].id; btn.setAttribute('data-id', colors[i].id);  \/\/ Count remaining var remaining = 0; for (var j = 0; j < zones.length; j++) { if (zones[j].color === colors[i].id && !filledZones[zones[j].id]) { remaining++; } }  if (remaining === 0) { btn.classList.add('completed'); } else { var count = document.createElement('span'); count.className = 'count'; count.textContent = remaining; btn.appendChild(count); }  btn.onclick = function() { selectedColor = parseInt(this.getAttribute('data-id')); var btns = document.querySelectorAll('.color-btn'); for (var k = 0; k < btns.length; k++) btns[k].classList.remove('active'); this.classList.add('active'); };  palette.appendChild(btn); } }  function renderCanvas() { ctx.clearRect(0, 0, 400, 400); ctx.fillStyle = '#ffffff'; ctx.fillRect(0, 0, 400, 400);  var zones = images[currentImage].zones;  \/\/ Sort: background first zones.sort(function(a, b) { if (a.path === 'background') return -1; if (b.path === 'background') return 1; return 0; });  for (var i = 0; i < zones.length; i++) { var zone = zones[i]; var filled = filledZones[zone.id]; var fillColor = filled ? colors.find(function(c) { return c.id === zone.color; }).hex : '#ffffff';  ctx.fillStyle = fillColor; ctx.strokeStyle = '#333'; ctx.lineWidth = 2;  ctx.beginPath();  if (zone.path === 'background') { ctx.fillStyle = filled ? fillColor : '#f8f8f8'; ctx.fillRect(0, 0, 400, 400); } else 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 (var j = 1; j < zone.points.length; j++) { ctx.lineTo(zone.points[j][0], zone.points[j][1]); } ctx.closePath(); ctx.fill(); ctx.stroke(); } else if (zone.path === 'arc') { ctx.lineWidth = zone.lineWidth; ctx.strokeStyle = filled ? fillColor : '#ffffff'; ctx.arc(zone.cx, zone.cy, zone.r, zone.startAngle, zone.endAngle); ctx.stroke(); ctx.strokeStyle = '#333'; ctx.lineWidth = 2; ctx.stroke(); } else if (zone.path === 'cloud') { ctx.arc(zone.cx, zone.cy, 25, 0, Math.PI * 2); ctx.arc(zone.cx - 20, zone.cy + 10, 20, 0, Math.PI * 2); ctx.arc(zone.cx + 20, zone.cy + 10, 20, 0, Math.PI * 2); ctx.fill(); ctx.stroke(); }  \/\/ Draw number if not filled if (!filled && zone.path !== 'background') { var cx = zone.cx || (zone.x + zone.w\/2) || (zone.points ? zone.points.reduce(function(s,p){return s+p[0];},0)\/zone.points.length : 200); var cy = zone.cy || (zone.y + zone.h\/2) || (zone.points ? zone.points.reduce(function(s,p){return s+p[1];},0)\/zone.points.length : 200);  ctx.fillStyle = '#333'; ctx.font = 'bold 14px Arial'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(zone.color, cx, cy); } } }  function handleCanvasClick(x, y) { var zones = images[currentImage].zones;  \/\/ Check zones in reverse order (top first) for (var i = zones.length - 1; i >= 0; i--) { var zone = zones[i]; 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 === 'background') return true; if (zone.path === 'circle') { var dx = x - zone.cx, dy = y - zone.cy; return dx*dx + dy*dy <= zone.r*zone.r; } if (zone.path === 'ellipse') { var cos = Math.cos(-(zone.rotation || 0)); var sin = Math.sin(-(zone.rotation || 0)); var dx = x - zone.cx, dy = y - zone.cy; var rx = cos*dx + sin*dy, 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') { var dx = x - zone.cx, dy = y - zone.cy; var dist = Math.sqrt(dx*dx + dy*dy); return Math.abs(dist - zone.r) < zone.lineWidth\/2; } return false; }  function isPointInPolygon(x, y, points) { var inside = false; for (var i = 0, j = points.length - 1; i < points.length; j = i++) { var xi = points[i][0], yi = points[i][1]; var xj = points[j][0], yj = points[j][1]; if (((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) \/ (yj - yi) + xi)) { inside = !inside; } } return inside; }  function updateProgress() { var zones = images[currentImage].zones; var total = zones.length; var filled = Object.keys(filledZones).length; var percent = Math.round((filled \/ total) * 100); document.getElementById('progress-fill').style.width = percent + '%'; document.getElementById('progress-text').textContent = percent + '%'; }  function checkWin() { var zones = images[currentImage].zones; if (Object.keys(filledZones).length === zones.length) { document.getElementById('success-modal').classList.add('active'); } }  function giveHint() { var zones = images[currentImage].zones; for (var i = 0; i < zones.length; i++) { if (!filledZones[zones[i].id] && zones[i].path !== 'background') { selectedColor = zones[i].color; renderPalette(); \/\/ Highlight the zone break; } } }  function saveImage() { var link = document.createElement('a'); link.download = 'pintura-dynseo.png'; link.href = canvas.toDataURL(); link.click(); }  function setZoom(z) { scale = Math.max(0.5, Math.min(2, z)); canvas.style.transform = 'scale(' + scale + ')'; canvas.style.transformOrigin = 'center center'; }  \/\/ Init if (document.readyState === 'complete' || document.readyState === 'interactive') { setTimeout(initGame, 100); } else { document.addEventListener('DOMContentLoaded', initGame); } <\/script><\/body><\/html>[\/et_pb_code][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n<p>[et_pb_code]<script type=\"application\/ld+json\">{\"@context\":\"https:\/\/schema.org\",\"@type\":\"FAQPage\",\"mainEntity\":[{\"@type\":\"Question\",\"name\":\"O que \u00e9 a pintura por n\u00famero online?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"A pintura por n\u00famero online \u00e9 uma atividade relaxante onde cada \u00e1rea do desenho \u00e9 associada a um n\u00famero correspondente a uma cor espec\u00edfica. Esta forma de arte-terapia digital permite relaxar enquanto estimula a concentra\u00e7\u00e3o.\"}},{\"@type\":\"Question\",\"name\":\"Quais s\u00e3o os benef\u00edcios da pintura por n\u00famero?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"A pintura por n\u00famero oferece in\u00fameros benef\u00edcios: melhora da concentra\u00e7\u00e3o, desenvolvimento da motricidade fina, reconhecimento de cores, relaxamento e redu\u00e7\u00e3o da ansiedade. \u00c9 uma excelente atividade de estimula\u00e7\u00e3o cognitiva.\"}},{\"@type\":\"Question\",\"name\":\"O jogo de pintura por n\u00famero DYNSEO \u00e9 gratuito?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Sim, a DYNSEO oferece uma pintura por n\u00famero gratuita online. Voc\u00ea pode acessar essa atividade relaxante gratuitamente para aproveitar seus benef\u00edcios de concentra\u00e7\u00e3o e relaxamento.\"}},{\"@type\":\"Question\",\"name\":\"Quais aplicativos da DYNSEO oferecem atividades de pintura?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"A DYNSEO oferece atividades de pintura em tr\u00eas aplicativos: COCO para crian\u00e7as, JOE para adultos e EDITH para idosos. Cada aplicativo \u00e9 adaptado para seu p\u00fablico-alvo.\"}},{\"@type\":\"Question\",\"name\":\"\u00c9 poss\u00edvel salvar suas pinturas em andamento?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Sim, o jogo de pintura por n\u00famero online permite que voc\u00ea salve suas cria\u00e7\u00f5es em andamento. Assim, voc\u00ea pode retomar sua pintura de onde parou a qualquer momento.\"}},{\"@type\":\"Question\",\"name\":\"A pintura por n\u00famero realmente ajuda a reduzir o estresse?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Sim, a pintura por n\u00famero \u00e9 reconhecida como uma forma de arte-terapia que ajuda efetivamente a reduzir o estresse e a ansiedade. Esta atividade promove o relaxamento enquanto mant\u00e9m a mente focada em uma tarefa criativa e calmante.\"}}]}<\/script>[\/et_pb_code]<\/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-486499","page","type-page","status-publish","has-post-thumbnail","hentry"],"yoast_head":"\n<title>Jogo de Colorir Numerado Online - DYNSEO - Aplica\u00e7\u00f5es educativas e jogos de mem\u00f3ria<\/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\/pt-pt\/jogo-de-colorir-numerado-online\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Jogo de Colorir Numerado Online - DYNSEO - Aplica\u00e7\u00f5es educativas e jogos de mem\u00f3ria\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.dynseo.com\/pt-pt\/jogo-de-colorir-numerado-online\/\" \/>\n<meta property=\"og:site_name\" content=\"DYNSEO - Aplica\u00e7\u00f5es educativas e jogos de mem\u00f3ria\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-14T00:19:48+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 estimado de leitura\" \/>\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\\\/pt-pt\\\/jogo-de-colorir-numerado-online\\\/\",\"url\":\"https:\\\/\\\/www.dynseo.com\\\/pt-pt\\\/jogo-de-colorir-numerado-online\\\/\",\"name\":\"Jogo de Colorir Numerado Online - DYNSEO - Aplica\u00e7\u00f5es educativas e jogos de mem\u00f3ria\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.dynseo.com\\\/pt-pt\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.dynseo.com\\\/pt-pt\\\/jogo-de-colorir-numerado-online\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.dynseo.com\\\/pt-pt\\\/jogo-de-colorir-numerado-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:50:32+00:00\",\"dateModified\":\"2026-03-14T00:19:48+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.dynseo.com\\\/pt-pt\\\/jogo-de-colorir-numerado-online\\\/#breadcrumb\"},\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.dynseo.com\\\/pt-pt\\\/jogo-de-colorir-numerado-online\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\\\/\\\/www.dynseo.com\\\/pt-pt\\\/jogo-de-colorir-numerado-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\":\"Mant\u00e9m a tua agilidade mental com as nossas actividades divertidas e gratificantes\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.dynseo.com\\\/pt-pt\\\/jogo-de-colorir-numerado-online\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Accueil\",\"item\":\"https:\\\/\\\/www.dynseo.com\\\/pt-pt\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Jogo de Colorir Numerado Online\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.dynseo.com\\\/pt-pt\\\/#website\",\"url\":\"https:\\\/\\\/www.dynseo.com\\\/pt-pt\\\/\",\"name\":\"Jeux de m\u00e9moire et stimulation cognitive\",\"description\":\"Entra\u00eenez votre m\u00e9moire et votre cerveau avec DYNSEO\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.dynseo.com\\\/pt-pt\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.dynseo.com\\\/pt-pt\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-PT\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.dynseo.com\\\/pt-pt\\\/#organization\",\"name\":\"DYNSEO\",\"url\":\"https:\\\/\\\/www.dynseo.com\\\/pt-pt\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\\\/\\\/www.dynseo.com\\\/pt-pt\\\/#\\\/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\\\/pt-pt\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n","yoast_head_json":{"title":"Jogo de Colorir Numerado Online - DYNSEO - Aplica\u00e7\u00f5es educativas e jogos de mem\u00f3ria","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\/pt-pt\/jogo-de-colorir-numerado-online\/","og_locale":"pt_PT","og_type":"article","og_title":"Jogo de Colorir Numerado Online - DYNSEO - Aplica\u00e7\u00f5es educativas e jogos de mem\u00f3ria","og_url":"https:\/\/www.dynseo.com\/pt-pt\/jogo-de-colorir-numerado-online\/","og_site_name":"DYNSEO - Aplica\u00e7\u00f5es educativas e jogos de mem\u00f3ria","article_modified_time":"2026-03-14T00:19:48+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 estimado de leitura":"1 minuto"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.dynseo.com\/pt-pt\/jogo-de-colorir-numerado-online\/","url":"https:\/\/www.dynseo.com\/pt-pt\/jogo-de-colorir-numerado-online\/","name":"Jogo de Colorir Numerado Online - DYNSEO - Aplica\u00e7\u00f5es educativas e jogos de mem\u00f3ria","isPartOf":{"@id":"https:\/\/www.dynseo.com\/pt-pt\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.dynseo.com\/pt-pt\/jogo-de-colorir-numerado-online\/#primaryimage"},"image":{"@id":"https:\/\/www.dynseo.com\/pt-pt\/jogo-de-colorir-numerado-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:50:32+00:00","dateModified":"2026-03-14T00:19:48+00:00","breadcrumb":{"@id":"https:\/\/www.dynseo.com\/pt-pt\/jogo-de-colorir-numerado-online\/#breadcrumb"},"inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.dynseo.com\/pt-pt\/jogo-de-colorir-numerado-online\/"]}]},{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/www.dynseo.com\/pt-pt\/jogo-de-colorir-numerado-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":"Mant\u00e9m a tua agilidade mental com as nossas actividades divertidas e gratificantes"},{"@type":"BreadcrumbList","@id":"https:\/\/www.dynseo.com\/pt-pt\/jogo-de-colorir-numerado-online\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Accueil","item":"https:\/\/www.dynseo.com\/pt-pt\/"},{"@type":"ListItem","position":2,"name":"Jogo de Colorir Numerado Online"}]},{"@type":"WebSite","@id":"https:\/\/www.dynseo.com\/pt-pt\/#website","url":"https:\/\/www.dynseo.com\/pt-pt\/","name":"Jeux de m\u00e9moire et stimulation cognitive","description":"Entra\u00eenez votre m\u00e9moire et votre cerveau avec DYNSEO","publisher":{"@id":"https:\/\/www.dynseo.com\/pt-pt\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.dynseo.com\/pt-pt\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-PT"},{"@type":"Organization","@id":"https:\/\/www.dynseo.com\/pt-pt\/#organization","name":"DYNSEO","url":"https:\/\/www.dynseo.com\/pt-pt\/","logo":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/www.dynseo.com\/pt-pt\/#\/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\/pt-pt\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/www.dynseo.com\/pt-pt\/wp-json\/wp\/v2\/pages\/486499","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.dynseo.com\/pt-pt\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.dynseo.com\/pt-pt\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.dynseo.com\/pt-pt\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dynseo.com\/pt-pt\/wp-json\/wp\/v2\/comments?post=486499"}],"version-history":[{"count":4,"href":"https:\/\/www.dynseo.com\/pt-pt\/wp-json\/wp\/v2\/pages\/486499\/revisions"}],"predecessor-version":[{"id":511429,"href":"https:\/\/www.dynseo.com\/pt-pt\/wp-json\/wp\/v2\/pages\/486499\/revisions\/511429"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.dynseo.com\/pt-pt\/wp-json\/wp\/v2\/media\/130227"}],"wp:attachment":[{"href":"https:\/\/www.dynseo.com\/pt-pt\/wp-json\/wp\/v2\/media?parent=486499"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}