Essa é uma ferramenta simples para criar pixel arts, dada uma paleta de cores e um quadro composto por pixels. É possível testar a aplicação aqui: Pixel Art Tool.
Demonstração Pixel Art Tool
- Pixel Art Tool - HTML, CSS e JavaScript
- Recursos Pixel Art Tool
- Linguagens
- Instruções
- Ferramentas
- Observações
A aplicação utiliza uma paleta de cores com quatro cores, a primeira sempre será preta enquanto as demais são geradas aleatoriamente sempre que a aplicação é atualizada.
O quadro pode ser customizado de acordo com o usuário através do campo de texto de tamanho do quadro. É possível alterar a dimensão do quadro entre 5x5 e 20x20. O tamanho padrão é 5x5 e alertas de erro são exibidos caso o usuário digite um valor inválido.
O botão de limpar serve apenas para limpar o quadro, mas não altera a paleta de cores ou o tamanho do quadro.
O quadro é composto por pixels, cada pixel se inicia com a cor branca, e conforme for clicado, o pixel tem a cor alterada de acordo com a cor selecionada na paleta de cores.
HTML é utilizado para estruturar a aplicação, CSS é utilizado para estilizar a aplicação e JavaScript é utilizado para executar os recursos da aplicação.
O projeto não necessita instalação para ser executado. A instalação só é necessária para o linter que é opcional. Caso seja do interesse do usuário, o linter pode ser instalado através do comando:
npm install
O projeto pode ser executado através do arquivo index.html que está na raiz do projeto.
Este projeto foi desenvolvido utilizando o linter ESLint seguindo as boas práticas definidas na Trybe.
Comando para execução do Lint:
npm run lint
Caso algum CSS seja adicionado a aplicação é possível rodar o styleLint com:
npm run lint:styles
-
Este é um projeto de estudo desenvolvido durante minha formação na Trybe. 🚀
-
Este repositório está sendo monitorado pelo SonarCloud para avaliação de qualidade.
-
Quer saber mais sobre mim? Veja o meu LinkedIn.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent