Doodle Dragon — buyer guide

1 Overview

Doodle Dragon is a coloring game for small children with the theme of islands in the clouds. The mascot is a little green dragon. There are 64 drawings in 8 categories: Animals, Vehicles, Nature, Ocean, Dinosaurs, Fantasy, Food, Holidays. Everything is done with icons, so children who cannot read yet can play alone.

• Bucket: a tap fills the whole area with a growing paint wave; the drawing finds its areas by itself.
• Brush that never leaves the area where the stroke starts; eraser; 16 stickers; 8 stamps painted with the current colour.
• 10 colours on the palette plus a custom slot; 26 more colours and 4 special paints (glitter, rainbow, pastel, dots).
• Undo (10 steps), clear all with confirmation (can be undone), pinch or mouse-wheel zoom.
• Finish ceremony with stars and confetti, save the picture as PNG (or share it on phones), next drawing; gallery of every painting.
• Paintings are saved automatically in the browser. Sound effects generated by code, a music track, vibration on phones, a "less motion" option, 14 languages in Settings.
• Portrait and landscape, phone, tablet and desktop. No server, account, ads, payments, tracking or external requests; system fonts only.

Package contents and file map: see below.

Step-by-step recipes for changing pictures, categories, colours, sounds and texts are in CUSTOMIZATION.html.

2 Installation (FTP)

The game in game/ is ready: no build, database, PHP or Node.js is needed to host it.

1. Extract the ZIP on your computer.
2. Open your FTP program (for example FileZilla, free) and connect with the host, user and password given by your hosting company.
3. On the server, open the public folder (often public_html or www). Create a folder for the game if you want it at an address such as /coloring/.
4. Upload the contents of game/ (index.html, css, src, assets, DOCUMENTATION.txt), not the game folder itself and not source/.
5. Open the address in a browser, for example https://your-site.com/coloring/. HTTPS is recommended.

Opening game/index.html with a double click (file://) does not work: browsers block ES modules there. To try it on your computer use npm run serve (section Development) or any local web server.

3 Requirements and sound

A current browser (Chrome, Edge, Firefox, Safari, Opera; Android and iOS) with JavaScript, Canvas, Web Audio, localStorage and IndexedDB. Mouse, touch and pen work.

Browsers only allow sound after the first tap or click; the game starts the music then. Without touches the music fades after 30 s and pauses after 60 s; it comes back with the next touch. A hidden tab is silent.

4 How to play

1. Tap Play, pick a category in the carousel (arrows or swipe) and tap a drawing.
2. Pick a colour and tap an area: the bucket fills it. Tapping the line itself paints the nearest area.
3. Brush: drag to paint freely; the paint stays inside the area where the stroke started. Eraser: tap an area or drag.
4. Stickers and stamps: pick one in the drawer, then tap the paper (drag with stamps to make a trail).
5. Zoom with two fingers or the mouse wheel; drag with one finger to move a zoomed drawing; the corner button returns to the whole drawing. Ctrl+Z undoes, Esc closes a window.
6. The mascot cheers at half and at 100% painted. The check button opens the finish screen: save the picture, go to the next drawing or keep painting.
7. Every painting is saved by itself; the Gallery shows them all, finished ones with a ribbon. The Android back button closes a window, then goes back one screen.

5 Screens (real screenshots)

Phone screenshots (390 x 844) of this exact build. The numbers match the list under each picture.

1 2 3

1. Play: opens the drawings
2. Settings (sound, music, motion, language)
3. Gallery of saved paintings

1 2 3 4 5

1. Home
2. Previous category
3. Category carousel (the chosen one is highlighted)
4. Next category
5. A drawing: tap to paint it

1 2 3 4 5 6 7 8 9 10 11 12

1. Back
2. Bucket: fills a whole area
3. Brush: free painting that stays inside the area
4. Stickers
5. Stamps (painted with the current colour)
6. Eraser
7. Palette
8. More colours and special paints
9. Clear all (asks first)
10. Undo
11. Settings (sound, music, motion, language)
12. Done: finish screen

1 2

1. Pick a sticker, then tap the paper
2. Close

1 2 3

1. Colours
2. Special paints: glitter, rainbow, pastel, dots
3. Close

1 2 3 4 5 6

1. Sound effects volume
2. Music volume
3. Vibration (phones and tablets)
4. Less motion
5. Language (14)
6. OK

1 2

1. Keep the painting
2. Clear everything (can be undone)

1

1. Back to the whole drawing

1 2 3 4

1. Home
2. Save the picture (PNG) or share it
3. Next drawing
4. Keep painting

1 2 3

1. Back
2. A saved painting (ribbon = finished)
3. Start a new drawing

Desktop and tablet screenshots (1280 x 720): see below.

6 Files

game/ and source/ hold the same game files; source/ adds the tests, tools and project files. Edit in source/, then run npm run build (or copy the changed files into game/ by hand: there is no compile step).

The full file map is below.

Where to change what, step by step: CUSTOMIZATION.html.

7 Languages

The game has text only in the Settings window, in 14 languages: English, Portuguese, Spanish, French, German, Italian, Dutch, Polish, Turkish, Russian, Japanese, Korean, Chinese and Indonesian. The browser language is used on the first visit (English if it is not one of the 14); the player can change it in Settings. The texts are in src/i18n.js. This guide is in English, Portuguese and Spanish.

8 Saved data

Everything stays in the player's browser, for this web address only; nothing is sent anywhere. Clearing the site data erases it.

localStorage  doodle-dragon.template.settings   volumes, vibration, less motion, language, custom colour
IndexedDB     doodle-dragon.template.art        one record per drawing: colours, brush and sticker layers, thumbnail, finished

Both names are in src/main.js. Change them if you host two copies of the game on the same domain and want separate saves. If storage is blocked (some private modes) the game still works, it only does not remember.

9 Development with Node.js (optional)

Node.js is not needed to play or host the game. It is only for the tests, the local server, the build copy and formatting. Requirement: Node.js 26.13 or newer (current LTS line), npm comes with it.

Install Node.js

• Windows: download the LTS installer (.msi) from nodejs.org, run it with the default options and open a new Command Prompt or PowerShell.
• macOS: download the LTS installer (.pkg) from nodejs.org (or brew install node) and open a new Terminal.
• Linux: use the packages from nodejs.org or a version manager such as nvm (nvm install 26); the version in old distribution repositories may be too old.
• Check: node -v must print v26.13 or newer and npm -v a version number.

Commands

Open the terminal inside source/ (the folder with package.json) and run:

cd source
npm ci
npm test
npm run build
npm run serve
# open http://localhost:5193/  (Ctrl+C stops the server)

• npm ci installs exactly the locked development tool (Prettier) from package-lock.json, including devDependencies.
• npm test runs the checks in test/: area detection, every drawing file and its size, category icons, stickers, stamps, poses, music, the 14 languages, imports and file completeness.
• npm run build empties dist/ and copies index.html, css/, src/ and assets/ into it; dist/ is then identical to game/. Upload the contents of dist/.
• npm run serve plays source/ at http://localhost:5193/ (npm run serve -- dist plays the build). npm run format formats the code with Prettier.

Common errors

• node or npm is not recognized: reopen the terminal after installing, or add Node.js to PATH.
• PowerShell says npm.ps1 cannot be loaded: use npm.cmd ci (and npm.cmd test …) or the Command Prompt.
• ENOENT ... package.json: the terminal is not inside source/.
• EBADENGINE or odd errors: Node.js is older than 26.13; update it.
• Network, proxy or certificate errors during npm ci: check the connection or the npm proxy settings (npm config get proxy).
• npm ci says the lock file does not match: do not edit package-lock.json by hand; delete node_modules and run npm ci again.
• Port 5193 in use: PORT=8080 npm run serve (on Windows PowerShell: $env:PORT=8080; npm run serve).

10 Updating and browser cache

After uploading new files, a browser may keep showing the old version from its cache. To see the update:

• Hard reload: Ctrl+F5 or Ctrl+Shift+R (Windows/Linux), Cmd+Shift+R (macOS).
• Clear only "cached images and files" in the browser settings: that keeps the saved paintings (do not clear cookies and site data, which erases them).
• Open the address in a private (incognito) window to check what visitors get.
• If your hosting or a CDN (Cloudflare and others) caches files, purge its cache after the upload.
• To check that the new page is served, open it with a query such as ?v=2. Always upload all changed files together and keep the same address, so the saved paintings stay.

11 Internal names

Some names in the code and files come from the original project. They work as they are; this table says what they mean.

12 Licenses and third parties

The artwork, music and game code are supplied under the CodeCanyon licence you purchased. The game itself contains no third-party code, fonts, images or sounds: it uses the system fonts of the device and plain JavaScript. The only third-party package is Prettier (MIT licence), an optional development tool installed by npm ci into source/node_modules; its licence is in THIRD-PARTY-LICENSES/. It is not part of game/.

13 Troubleshooting

• Blank page: check that every folder of game/ was uploaded next to index.html, that the page is opened through http(s) and not file://, and look at the browser console (F12) and the Network tab for missing files (404).
• The server must send .js files as JavaScript (text/javascript); almost all hosts do. If the console complains about the MIME type, ask your host or add AddType text/javascript .js to .htaccess (Apache).
• No sound: tap once (browsers need a gesture), check the device volume, the silent switch on iPhone and the volumes in Settings.
• Paintings disappear: the site data was cleared, another browser or address is used, or storage is blocked (private mode).
• Old version after an update: see "Updating and browser cache".

14 Support

Support and custom work: willian@polargames.com.br. Please send the version (1.0.0), the browser and device, the address where the game is hosted, the steps to reproduce and a screenshot.

1 Visão geral

Doodle Dragon é um jogo de colorir para crianças pequenas com o tema ilhas nas nuvens. Quem acompanha é um dragãozinho verde. São 64 desenhos em 8 categorias: Animais, Veículos, Natureza, Oceano, Dinossauros, Fantasia, Comida, Festas. Tudo funciona com ícones, então crianças que ainda não leem jogam sozinhas.

• Balde: um toque enche a área inteira com uma onda de tinta; o jogo encontra as áreas sozinho.
• Pincel que não sai da área onde o traço começa; borracha; 16 adesivos; 8 carimbos pintados com a cor atual.
• 10 cores na paleta e uma vaga personalizada; mais 26 cores e 4 tintas especiais (glitter, arco-íris, pastel, bolinhas).
• Desfazer (10 passos), apagar tudo com confirmação (dá para desfazer), zoom com pinça ou rodinha do mouse.
• Cerimônia de fim com estrelas e confete, salvar a imagem em PNG (ou compartilhar no celular), próximo desenho; galeria com todas as pinturas.
• As pinturas são salvas sozinhas no navegador. Efeitos sonoros gerados por código, uma música, vibração no celular, opção "menos movimento", 14 idiomas nos Ajustes.
• Em pé e deitado, celular, tablet e computador. Sem servidor, conta, anúncios, pagamentos, rastreamento ou requisição externa; só fontes do sistema.

Conteúdo do pacote e mapa de arquivos: veja abaixo.

Receitas passo a passo para trocar imagens, categorias, cores, sons e textos estão em CUSTOMIZATION.html.

2 Instalação (FTP)

O jogo em game/ está pronto: hospedar não exige compilação, banco de dados, PHP nem Node.js.

1. Extraia o ZIP no computador.
2. Abra seu programa de FTP (por exemplo o FileZilla, gratuito) e conecte com servidor, usuário e senha da sua hospedagem.
3. No servidor, abra a pasta pública (geralmente public_html ou www). Crie uma pasta para o jogo se quiser um endereço como /colorir/.
4. Envie o conteúdo de game/ (index.html, css, src, assets, DOCUMENTATION.txt), não a pasta game em si nem source/.
5. Abra o endereço no navegador, por exemplo https://seu-site.com/colorir/. HTTPS é recomendado.

Abrir game/index.html com duplo clique (file://) não funciona: os navegadores bloqueiam módulos ES assim. Para testar no computador use npm run serve (seção Desenvolvimento) ou qualquer servidor web local.

3 Requisitos e som

Um navegador atual (Chrome, Edge, Firefox, Safari, Opera; Android e iOS) com JavaScript, Canvas, Web Audio, localStorage e IndexedDB. Funciona com mouse, toque e caneta.

Os navegadores só liberam o som depois do primeiro toque ou clique; a música começa aí. Sem toques a música some em 30 s e pausa em 60 s; volta no próximo toque. Aba escondida fica em silêncio.

4 Como jogar

1. Toque em Jogar, escolha uma categoria no carrossel (setas ou arrastar) e toque num desenho.
2. Escolha uma cor e toque numa área: o balde pinta. Tocar na linha pinta a área mais próxima.
3. Pincel: arraste para pintar livre; a tinta fica dentro da área onde o traço começou. Borracha: toque numa área ou arraste.
4. Adesivos e carimbos: escolha um na gaveta e toque no papel (arraste com o carimbo para fazer uma trilha).
5. Zoom com dois dedos ou a rodinha do mouse; arraste com um dedo para mover o desenho ampliado; o botão do canto volta ao desenho inteiro. Ctrl+Z desfaz, Esc fecha a janela.
6. O mascote comemora na metade e em 100% pintado. O botão de check abre a tela de fim: salvar a imagem, ir ao próximo desenho ou continuar pintando.
7. Cada pintura é salva sozinha; a Galeria mostra todas, as terminadas com uma fita. O voltar do Android fecha a janela e depois volta uma tela.

5 Telas (capturas reais)

Capturas no celular (390 x 844) desta mesma versão. Os números correspondem à lista sob cada imagem.

1 2 3

1. Jogar: abre os desenhos
2. Ajustes (som, música, movimento, idioma)
3. Galeria das pinturas salvas

1 2 3 4 5

1. Início
2. Categoria anterior
3. Carrossel de categorias (a escolhida fica destacada)
4. Próxima categoria
5. Um desenho: toque para pintar

1 2 3 4 5 6 7 8 9 10 11 12

1. Voltar
2. Balde: pinta uma área inteira
3. Pincel: pintura livre que não sai da área
4. Adesivos
5. Carimbos (pintados com a cor atual)
6. Borracha
7. Paleta
8. Mais cores e tintas especiais
9. Apagar tudo (pergunta antes)
10. Desfazer
11. Ajustes (som, música, movimento, idioma)
12. Terminei: tela de fim

1 2

1. Escolha um adesivo e toque no papel
2. Fechar

1 2 3

1. Cores
2. Tintas especiais: glitter, arco-íris, pastel, bolinhas
3. Fechar

1 2 3 4 5 6

1. Volume dos efeitos
2. Volume da música
3. Vibração (celulares e tablets)
4. Menos movimento
5. Idioma (14)
6. OK

1 2

1. Manter a pintura
2. Apagar tudo (dá para desfazer)

1

1. Voltar ao desenho inteiro

1 2 3 4

1. Início
2. Salvar a imagem (PNG) ou compartilhar
3. Próximo desenho
4. Continuar pintando

1 2 3

1. Voltar
2. Uma pintura salva (fita = terminada)
3. Começar outro desenho

Capturas de computador e tablet (1280 x 720): veja abaixo.

6 Arquivos

game/ e source/ têm os mesmos arquivos do jogo; source/ acrescenta testes, ferramentas e arquivos do projeto. Edite em source/ e rode npm run build (ou copie os arquivos alterados para game/ à mão: não há compilação).

O mapa completo de arquivos está abaixo.

O que mudar e onde, passo a passo: CUSTOMIZATION.html.

7 Idiomas

O jogo só tem texto na janela de Ajustes, em 14 idiomas: inglês, português, espanhol, francês, alemão, italiano, holandês, polonês, turco, russo, japonês, coreano, chinês e indonésio. Na primeira visita usa o idioma do navegador (inglês se não for um dos 14); o jogador troca nos Ajustes. Os textos ficam em src/i18n.js. Este guia está em inglês, português e espanhol.

8 Dados salvos

Tudo fica no navegador do jogador, só para este endereço; nada é enviado. Limpar os dados do site apaga tudo.

localStorage  doodle-dragon.template.settings   volumes, vibration, less motion, language, custom colour
IndexedDB     doodle-dragon.template.art        one record per drawing: colours, brush and sticker layers, thumbnail, finished

Os dois nomes ficam em src/main.js. Troque se hospedar duas cópias do jogo no mesmo domínio e quiser salvamentos separados. Se o armazenamento estiver bloqueado (alguns modos privados) o jogo funciona, só não lembra.

9 Desenvolvimento com Node.js (opcional)

O Node.js não é necessário para jogar nem hospedar. Serve só para os testes, o servidor local, a cópia do build e a formatação. Requisito: Node.js 26.13 ou superior (linha LTS atual); o npm vem junto.

Instalar o Node.js

• Windows: baixe o instalador LTS (.msi) em nodejs.org, rode com as opções padrão e abra um novo Prompt de Comando ou PowerShell.
• macOS: baixe o instalador LTS (.pkg) em nodejs.org (ou brew install node) e abra um novo Terminal.
• Linux: use os pacotes de nodejs.org ou um gerenciador como o nvm (nvm install 26); a versão dos repositórios antigos das distribuições pode ser velha demais.
• Confira: node -v deve mostrar v26.13 ou superior e npm -v um número de versão.

Comandos

Abra o terminal dentro de source/ (a pasta com package.json) e rode:

cd source
npm ci
npm test
npm run build
npm run serve
# open http://localhost:5193/  (Ctrl+C stops the server)

• npm ci instala exatamente a ferramenta travada no package-lock.json (Prettier), incluindo as devDependencies.
• npm test roda as checagens de test/: detecção de áreas, cada arquivo de desenho e o tamanho, ícones de categoria, adesivos, carimbos, poses, música, os 14 idiomas, imports e arquivos completos.
• npm run build esvazia dist/ e copia index.html, css/, src/ e assets/ para lá; dist/ fica igual a game/. Envie o conteúdo de dist/.
• npm run serve abre source/ em http://localhost:5193/ (npm run serve -- dist abre o build). npm run format formata o código com o Prettier.

Erros comuns

• node ou npm não reconhecido: reabra o terminal depois de instalar ou coloque o Node.js no PATH.
• O PowerShell diz npm.ps1 cannot be loaded: use npm.cmd ci (e npm.cmd test …) ou o Prompt de Comando.
• ENOENT ... package.json: o terminal não está dentro de source/.
• EBADENGINE ou erros estranhos: o Node.js é anterior à 26.13; atualize.
• Erro de rede, proxy ou certificado no npm ci: confira a conexão ou o proxy do npm (npm config get proxy).
• npm ci diz que o lock não confere: não edite o package-lock.json à mão; apague node_modules e rode npm ci de novo.
• Porta 5193 ocupada: PORT=8080 npm run serve (no PowerShell do Windows: $env:PORT=8080; npm run serve).

10 Atualização e cache do navegador

Depois de enviar arquivos novos, o navegador pode continuar mostrando a versão antiga guardada no cache. Para ver a atualização:

• Recarga forçada: Ctrl+F5 ou Ctrl+Shift+R (Windows/Linux), Cmd+Shift+R (macOS).
• Limpe só "imagens e arquivos em cache" nas configurações do navegador: isso mantém as pinturas salvas (não limpe cookies e dados do site, que apagam tudo).
• Abra o endereço numa janela anônima para ver o que os visitantes recebem.
• Se a hospedagem ou uma CDN (Cloudflare e outras) guarda cache, limpe esse cache depois do envio.
• Para conferir que a página nova chegou, abra com algo como ?v=2. Envie sempre todos os arquivos alterados juntos e mantenha o mesmo endereço, para as pinturas salvas continuarem.

11 Nomes internos

Alguns nomes no código e nos arquivos vêm do projeto original. Funcionam como estão; esta tabela explica o que significam.

12 Licenças e terceiros

A arte, a música e o código do jogo são fornecidos sob a licença CodeCanyon comprada. O jogo não contém código, fontes, imagens ou sons de terceiros: usa as fontes do sistema do aparelho e JavaScript puro. O único pacote de terceiros é o Prettier (licença MIT), ferramenta opcional de desenvolvimento instalada pelo npm ci em source/node_modules; a licença dele está em THIRD-PARTY-LICENSES/. Ele não faz parte de game/.

13 Solução de problemas

• Página em branco: confira se todas as pastas de game/ foram enviadas ao lado do index.html, se a página abre por http(s) e não file://, e veja o console (F12) e a aba Rede procurando arquivos faltando (404).
• O servidor precisa enviar os .js como JavaScript (text/javascript); quase todas as hospedagens fazem isso. Se o console reclamar do tipo MIME, peça à hospedagem ou acrescente AddType text/javascript .js ao .htaccess (Apache).
• Sem som: toque uma vez (o navegador exige um gesto), confira o volume do aparelho, a chave de silencioso do iPhone e os volumes nos Ajustes.
• As pinturas sumiram: os dados do site foram limpos, outro navegador ou endereço está em uso, ou o armazenamento está bloqueado (modo privado).
• Versão antiga depois de atualizar: veja "Atualização e cache do navegador".

14 Suporte

Suporte e personalização: willian@polargames.com.br. Envie a versão (1.0.0), o navegador e o aparelho, o endereço onde o jogo está hospedado, os passos para reproduzir e uma captura de tela.

1 Descripción general

Doodle Dragon es un juego de colorear para niños pequeños con el tema de islas en las nubes. Lo acompaña un dragoncito verde. Hay 64 dibujos en 8 categorías: Animales, Vehículos, Naturaleza, Océano, Dinosaurios, Fantasía, Comida, Fiestas. Todo funciona con iconos, así que los niños que aún no leen pueden jugar solos.

• Cubo: un toque llena el área entera con una ola de pintura; el juego encuentra las áreas solo.
• Pincel que no sale del área donde empieza el trazo; goma; 16 pegatinas; 8 sellos pintados con el color actual.
• 10 colores en la paleta y un hueco personalizado; 26 colores más y 4 pinturas especiales (purpurina, arcoíris, pastel, lunares).
• Deshacer (10 pasos), borrar todo con confirmación (se puede deshacer), zoom con dos dedos o la rueda del ratón.
• Ceremonia final con estrellas y confeti, guardar la imagen en PNG (o compartirla en el móvil), dibujo siguiente; galería con todas las pinturas.
• Las pinturas se guardan solas en el navegador. Efectos de sonido generados por código, una música, vibración en el móvil, opción "menos movimiento", 14 idiomas en Ajustes.
• Vertical y horizontal, móvil, tableta y ordenador. Sin servidor, cuenta, anuncios, pagos, rastreo ni peticiones externas; solo fuentes del sistema.

Contenido del paquete y mapa de archivos: mira abajo.

Las recetas paso a paso para cambiar imágenes, categorías, colores, sonidos y textos están en CUSTOMIZATION.html.

2 Instalación (FTP)

El juego en game/ está listo: no necesita compilación, base de datos, PHP ni Node.js.

1. Extrae el ZIP en tu ordenador.
2. Abre tu programa de FTP (por ejemplo FileZilla, gratuito) y conéctate con el servidor, usuario y contraseña de tu hosting.
3. En el servidor, abre la carpeta pública (normalmente public_html o www). Crea una carpeta para el juego si lo quieres en una dirección como /colorear/.
4. Sube el contenido de game/ (index.html, css, src, assets, DOCUMENTATION.txt), no la carpeta game en sí ni source/.
5. Abre la dirección en el navegador, por ejemplo https://tu-sitio.com/colorear/. Se recomienda HTTPS.

Abrir game/index.html con doble clic (file://) no funciona: los navegadores bloquean los módulos ES así. Para probarlo en tu ordenador usa npm run serve (sección Desarrollo) o cualquier servidor web local.

3 Requisitos y sonido

Un navegador actual (Chrome, Edge, Firefox, Safari, Opera; Android e iOS) con JavaScript, Canvas, Web Audio, localStorage e IndexedDB. Funciona con ratón, toque y lápiz.

Los navegadores solo permiten sonido tras el primer toque o clic; la música empieza entonces. Sin toques la música baja a los 30 s y se pausa a los 60 s; vuelve con el siguiente toque. Una pestaña oculta queda en silencio.

4 Cómo jugar

1. Toca Jugar, elige una categoría en el carrusel (flechas o deslizar) y toca un dibujo.
2. Elige un color y toca un área: el cubo la rellena. Tocar la línea pinta el área más cercana.
3. Pincel: arrastra para pintar libremente; la pintura queda dentro del área donde empezó el trazo. Goma: toca un área o arrastra.
4. Pegatinas y sellos: elige uno en el cajón y toca el papel (arrastra con el sello para hacer un rastro).
5. Zoom con dos dedos o la rueda del ratón; arrastra con un dedo para mover el dibujo ampliado; el botón de la esquina vuelve al dibujo entero. Ctrl+Z deshace, Esc cierra la ventana.
6. La mascota celebra a la mitad y al 100% pintado. El botón de check abre la pantalla final: guardar la imagen, ir al dibujo siguiente o seguir pintando.
7. Cada pintura se guarda sola; la Galería las muestra todas, las terminadas con una cinta. El botón atrás de Android cierra la ventana y luego vuelve una pantalla.

5 Pantallas (capturas reales)

Capturas en móvil (390 x 844) de esta misma versión. Los números corresponden a la lista bajo cada imagen.

1 2 3

1. Jugar: abre los dibujos
2. Ajustes (sonido, música, movimiento, idioma)
3. Galería de pinturas guardadas

1 2 3 4 5

1. Inicio
2. Categoría anterior
3. Carrusel de categorías (la elegida se destaca)
4. Categoría siguiente
5. Un dibujo: tócalo para pintarlo

1 2 3 4 5 6 7 8 9 10 11 12

1. Volver
2. Cubo: rellena un área entera
3. Pincel: pintura libre que no sale del área
4. Pegatinas
5. Sellos (pintados con el color actual)
6. Goma
7. Paleta
8. Más colores y pinturas especiales
9. Borrar todo (pregunta antes)
10. Deshacer
11. Ajustes (sonido, música, movimiento, idioma)
12. Terminado: pantalla final

1 2

1. Elige una pegatina y toca el papel
2. Cerrar

1 2 3

1. Colores
2. Pinturas especiales: purpurina, arcoíris, pastel, lunares
3. Cerrar

1 2 3 4 5 6

1. Volumen de los efectos
2. Volumen de la música
3. Vibración (móviles y tabletas)
4. Menos movimiento
5. Idioma (14)
6. OK

1 2

1. Conservar la pintura
2. Borrar todo (se puede deshacer)

1

1. Volver al dibujo entero

1 2 3 4

1. Inicio
2. Guardar la imagen (PNG) o compartirla
3. Dibujo siguiente
4. Seguir pintando

1 2 3

1. Volver
2. Una pintura guardada (cinta = terminada)
3. Empezar otro dibujo

Capturas de ordenador y tableta (1280 x 720): mira abajo.

6 Archivos

game/ y source/ tienen los mismos archivos del juego; source/ añade pruebas, herramientas y archivos del proyecto. Edita en source/ y ejecuta npm run build (o copia a mano los archivos cambiados a game/: no hay compilación).

El mapa completo de archivos está abajo.

Qué cambiar y dónde, paso a paso: CUSTOMIZATION.html.

7 Idiomas

El juego solo tiene texto en la ventana de Ajustes, en 14 idiomas: inglés, portugués, español, francés, alemán, italiano, neerlandés, polaco, turco, ruso, japonés, coreano, chino e indonesio. En la primera visita usa el idioma del navegador (inglés si no es uno de los 14); el jugador lo cambia en Ajustes. Los textos están en src/i18n.js. Esta guía está en inglés, portugués y español.

8 Datos guardados

Todo queda en el navegador del jugador, solo para esta dirección; nada se envía. Borrar los datos del sitio lo elimina.

localStorage  doodle-dragon.template.settings   volumes, vibration, less motion, language, custom colour
IndexedDB     doodle-dragon.template.art        one record per drawing: colours, brush and sticker layers, thumbnail, finished

Los dos nombres están en src/main.js. Cámbialos si alojas dos copias del juego en el mismo dominio y quieres guardados separados. Si el almacenamiento está bloqueado (algunos modos privados) el juego funciona, solo no recuerda.

9 Desarrollo con Node.js (opcional)

Node.js no es necesario para jugar ni alojar el juego. Solo sirve para las pruebas, el servidor local, la copia del build y el formateo. Requisito: Node.js 26.13 o posterior (línea LTS actual); npm viene incluido.

Instalar Node.js

• Windows: descarga el instalador LTS (.msi) de nodejs.org, ejecútalo con las opciones por defecto y abre un nuevo Símbolo del sistema o PowerShell.
• macOS: descarga el instalador LTS (.pkg) de nodejs.org (o brew install node) y abre un nuevo Terminal.
• Linux: usa los paquetes de nodejs.org o un gestor como nvm (nvm install 26); la versión de los repositorios antiguos de la distribución puede ser demasiado vieja.
• Comprueba: node -v debe mostrar v26.13 o posterior y npm -v un número de versión.

Comandos

Abre el terminal dentro de source/ (la carpeta con package.json) y ejecuta:

cd source
npm ci
npm test
npm run build
npm run serve
# open http://localhost:5193/  (Ctrl+C stops the server)

• npm ci instala exactamente la herramienta bloqueada en package-lock.json (Prettier), incluidas las devDependencies.
• npm test ejecuta las comprobaciones de test/: detección de áreas, cada archivo de dibujo y su tamaño, iconos de categoría, pegatinas, sellos, poses, música, los 14 idiomas, imports y archivos completos.
• npm run build vacía dist/ y copia index.html, css/, src/ y assets/; dist/ queda idéntico a game/. Sube el contenido de dist/.
• npm run serve abre source/ en http://localhost:5193/ (npm run serve -- dist abre el build). npm run format formatea el código con Prettier.

Errores comunes

• node o npm no se reconoce: vuelve a abrir el terminal tras instalar o añade Node.js al PATH.
• PowerShell dice npm.ps1 cannot be loaded: usa npm.cmd ci (y npm.cmd test …) o el Símbolo del sistema.
• ENOENT ... package.json: el terminal no está dentro de source/.
• EBADENGINE o errores raros: Node.js es anterior a 26.13; actualízalo.
• Errores de red, proxy o certificado en npm ci: revisa la conexión o el proxy de npm (npm config get proxy).
• npm ci dice que el lock no coincide: no edites package-lock.json a mano; borra node_modules y ejecuta npm ci otra vez.
• Puerto 5193 ocupado: PORT=8080 npm run serve (en PowerShell de Windows: $env:PORT=8080; npm run serve).

10 Actualización y caché del navegador

Tras subir archivos nuevos, el navegador puede seguir mostrando la versión antigua de su caché. Para ver la actualización:

• Recarga forzada: Ctrl+F5 o Ctrl+Shift+R (Windows/Linux), Cmd+Shift+R (macOS).
• Borra solo "imágenes y archivos en caché" en la configuración del navegador: así se conservan las pinturas (no borres cookies y datos del sitio, que las eliminan).
• Abre la dirección en una ventana privada (incógnito) para ver lo que reciben los visitantes.
• Si el hosting o una CDN (Cloudflare y otras) guarda caché, púrgala tras la subida.
• Para comprobar que se sirve la página nueva, ábrela con algo como ?v=2. Sube siempre todos los archivos cambiados juntos y mantén la misma dirección, para que las pinturas guardadas sigan.

11 Nombres internos

Algunos nombres del código y los archivos vienen del proyecto original. Funcionan tal como están; esta tabla explica qué significan.

12 Licencias y terceros

El arte, la música y el código del juego se entregan bajo la licencia de CodeCanyon que compraste. El juego no contiene código, fuentes, imágenes ni sonidos de terceros: usa las fuentes del sistema del dispositivo y JavaScript puro. El único paquete de terceros es Prettier (licencia MIT), herramienta opcional de desarrollo que npm ci instala en source/node_modules; su licencia está en THIRD-PARTY-LICENSES/. No forma parte de game/.

13 Solución de problemas

• Página en blanco: comprueba que todas las carpetas de game/ se subieron junto a index.html, que la página se abre por http(s) y no file://, y mira la consola (F12) y la pestaña Red buscando archivos que faltan (404).
• El servidor debe enviar los .js como JavaScript (text/javascript); casi todos los hostings lo hacen. Si la consola se queja del tipo MIME, pídelo al hosting o añade AddType text/javascript .js a .htaccess (Apache).
• Sin sonido: toca una vez (el navegador exige un gesto), revisa el volumen del dispositivo, el interruptor de silencio del iPhone y los volúmenes en Ajustes.
• Las pinturas desaparecen: se borraron los datos del sitio, se usa otro navegador o dirección, o el almacenamiento está bloqueado (modo privado).
• Versión antigua tras actualizar: mira "Actualización y caché del navegador".

14 Soporte

Soporte y trabajos a medida: willian@polargames.com.br. Envía la versión (1.0.0), el navegador y el dispositivo, la dirección donde está alojado el juego, los pasos para reproducirlo y una captura.

doodle-dragon-static-1.0.0/
  START-HERE.txt           first steps
  DOCUMENTATION.html       opens this guide
  CUSTOMIZATION.html       step-by-step recipes to change the game
  CHANGELOG.txt            version history
  THIRD-PARTY-LICENSES/    licence of the development tool (Prettier)
  documentation/           this guide and its screenshots
  game/                    the ready-to-host game: upload its CONTENTS
  source/                  the editable project (same files + tests and tools)

source/
  index.html               page skeleton: screens, mascot, modal window, effects canvas
  css/style.css            all styles and layouts (portrait and landscape)
  src/main.js              categories and drawings (CATS), colours, screens, settings, saving, finish screen
  src/paint.js             painting engine: areas, paint wave, brush, stickers, stamps, eraser, undo, zoom
  src/feel.js              timings and sizes (how the game feels)
  src/fx.js                particles, confetti, spring, button press
  src/audio.js             sound effects (generated by code) and the music track
  src/i18n.js              texts of the Settings window, 14 languages
  assets/draw/             the 64 line drawings (PNG 1200 x 900)
  assets/ui/               buttons, tools, category icons, backgrounds, frame, island, logo
  assets/mascot/           mascot poses
  assets/stickers/         16 stickers
  assets/stamps/           8 stamp shapes
  assets/audio/music.mp3   music
  test/                    checks run by npm test
  tools/build.mjs          npm run build: copies the game into dist/
  tools/serve.mjs          npm run serve: local test server
  package.json, package-lock.json, .prettierrc.json, README.md

Desktop and tablet · Computador e tablet · Ordenador y tableta (1280 x 720)