Projeto Pixel Art com HTML, CSS e JavaScript
HTML-код
- Опубликовано: 1 фев 2025
- Aprenda inglês com a EnglishBay: englishbay.com.br
Playlist Inglês para programação - • Aulas de Inglês para p...
10% de desconto no plano premium com o cupom: DEV10
Repositório do projeto:
github.com/man...
Fala, pessoal!
Esse projeto tá muito legal! Vamos criar uma interface para fazer pixel art e implementar várias funcionalidades interessantes: alterar o tamanho do grid, dar zoom, selecionar e salvar histórico de cores e também baixar sua imagem! Tá legal demais!
Espero que gostem!
#html #css #javascript
![I.N "HALLUCINATION" | [Stray Kids : SKZ-PLAYER]](http://i.ytimg.com/vi/n5B5q1Hwt_U/mqdefault.jpg)
Aprenda inglês com a EnglishBay: englishbay.com.br
Playlist Inglês para programação - ruclips.net/p/PLZ65xj2SRHQAG1pn-RS9-DY1xpuuQYynN
10% de desconto no plano premium com o cupom: DEV10
Já fiz a pokedex e o jogo da cobrinha com você, agora vou ter que lançar esse também kkkkkk. Muito obrigado meu amigo, aprendi o pouco que sei majoritariamente com os seus vídeos
Sou fã desse cara oh, só conteúdo legal e didática melhor ainda !!!
Tamo junto!!
O mestre voltou!!
parabéns, mto fera!!
Já estava com saudades dos seus vídeos kkk, vlw fera !
Valeeeu, Pablo! Tamo junto!
Braboooo dms 🎉🫡
@ManualdoDev sempre tem algo a aprender. Obrigado.
Eu que agradeço pelo apoio nos vídeo! Valeu demais!
Ele voltou!
Adoro seus projetos
Muito legal pra fazer aquel projetinho do jogo do mario com sprites próprios
Aí você foi pra outro nível, em hehehe
depois de tanto tempo posso finalmente fazer esses projetos
Booaa! Vamo nessa, Victor!
Projeto sensacional, agr entendi a demora pro vídeo, estava fazendo o goku
mano, faz um video fazendo o jogo pac man, com tela de começar e com tabela de records, acho que daria um bom video e um otimo conteudo!!!!
vc tem me ajudado muito nos meus estudos, agradeço muito!!!
Boa ideia, em! Vamo fazer!
Top! Valeu!
Boa tarde ,por algum motivo a minha tag canvas não funciona no css, não aparece a cor cinza nem o quadrado, o visual code não diz que ta errado mas não aparece na minha página. Alguém tem idéia de como resolver ?
@@MariaEmiliaDuarte-qq9lc talvez você não tenha importado o css corretamente. Dá uma conferida :)
@ManualdoDev A sim obgda ❣️
@ManualdoDev voltou... primeiro like, depois assisto.
Muito obrigado pelo apoio, Geraldo! Tamo junto!
Pessoal se vocês realmente quiserem aprender a programar, vocês tem que tentar criar um desses projetos por conta ai sim vocês podem dizer que sabem alguma coisa.. caso contrário, só está fazendo o que a maioria faz, copia e cola.. a pessoa acaba tendo uma falsa impressão de aprendizado. Se forem fazer por conta é muito pior.. pq não tem ninguém te ajudando ou falando como você deve fazer e é ai que entra a pesquisa e tudo mais.. mas é assim que se aprende. Bons estudos Galera! ☺️
Qual fonte você está usando + o tema do Visual Studio Code?
Woooooooooo dahora
Heheheheh gostei muito desse projeto!
Muito bom mestrão, acho so ficou um botão de apagar "tipo borracha".
muito perfeito, cara. Parabéns, apareceu na hora certa 👏👏👏
akakakaka skill como programador = +10.000
skill como desenhista = -10.000
quanto tempo voce programa? fiquei com essa duvida pq voce tem muita confiança no que esta fazendo,
muito bom o projeto e excelente explicação.
Modifiquei um pouco e criei algumas funcionalidades que podem ser uteis
1 - Limpar as cores no canvas sem precisar recarregar a página
2 - Limpar as cores já usadas
3 - Uma mensagem irá aparecer depois de usar algumas dessas funcinalidades
o codigo do abaixo esta essas funcs
const canvas = document.querySelector('.canvas')
const inputSize = document.querySelector('.input-size')
const inputColor = document.querySelector('.input-color')
const usedColors = document.querySelector('.used-colors')
const downloadBtn = document.querySelector('.button-save')
const resetColor = document.querySelector('.button-reset-color')
const colResize = document.querySelector('.resize')
const messageText = document.querySelector('.message')
const resetCanvas = document.querySelector('.reset-canvas')
const main = document.querySelector('main')
const MIN_CANVAS_SIZE = 4
const PIXEL_DEFAULT_COLOR = '#444'
let isPainting = false
let isResizing = false
const createMessage = (message) => {
messageText.innerText = message
setTimeout(() => messageText.innerText = '', 5000)
}
const createElement = (tag, className = "") => {
const element = document.createElement(tag)
element.className = className
return element
}
const createPixel = () => {
const pixel = createElement('div', 'pixel')
pixel.addEventListener('mousedown', () => setPixelColor(pixel))
pixel.addEventListener('mouseover', () => isPainting ? setPixelColor(pixel) : false )
return pixel
}
const setPixelColor = (pixel) => pixel.style.backgroundColor = inputColor.value
const updateCanvasSize = () => inputSize.value >= MIN_CANVAS_SIZE ? loadCanvas() : createMessage('Minimum size is 4')
const changeColor = () => {
const btn = createElement('button', 'btn-color')
const currentColor = inputColor.value
btn.style.backgroundColor = currentColor
btn.setAttribute('data-color', currentColor)
btn.addEventListener('click', () => inputColor.value = currentColor)
const savedColors = Array.from(usedColors.children)
const check = (btn) => btn.getAttribute('data-color') != currentColor
savedColors.every(check) ? usedColors.append(btn) : createMessage('This color already in used colors')
}
const resizeCanvas = (cursorPositionX) => {
if(!isResizing) return
const canvasOffset = canvas.getBoundingClientRect().left
const width = `${cursorPositionX - canvasOffset - 20}px`
canvas.style.maxWidth = width
colResize.style.height = width
}
const saveCanvas = () => {
html2canvas(canvas, {
onrendered: (image) => {
const img = image.toDataURL('image/png')
const link = createElement('a')
link.href = img
link.download = 'pixelart.png'
link.click()
}
})
}
const loadCanvas = () => {
const length = inputSize.value
canvas.innerHTML = ''
for(let i = 0; i < length; i += 1) {
const row = createElement('div', 'row')
for(let j = 0; j < length; j += 1) {
row.append(createPixel())
}
canvas.append(row)
}
}
canvas.addEventListener('mousedown', () => (isPainting = true))
canvas.addEventListener('mouseup', () => (isPainting = false))
inputSize.addEventListener('change', updateCanvasSize)
inputColor.addEventListener('change', changeColor)
colResize.addEventListener('mousedown', () => (isResizing = true))
main.addEventListener('mouseup', () => (isResizing = false))
main.addEventListener('mousemove', ({ clientX }) => resizeCanvas(clientX))
resetColor.addEventListener('click', () => {
Array.from(usedColors.children).forEach((color) => color.remove())
createMessage('All colors has been deleted')
})
resetCanvas.addEventListener('click', () => {
Array.from(canvas.children).forEach((row) => {
Array.from(row.children).forEach((pixel) => {
pixel.style.backgroundColor = PIXEL_DEFAULT_COLOR
})
})
createMessage('Canvas has been cleaned')
})
downloadBtn.addEventListener('click', () => saveCanvas())
loadCanvas()
o site precisa estar publicado para o dowload da imagem funcionar ?
Primeiro, parabéns pelo vídeo, muito top mesmo, gosto de sua didática e sem enrolação, mas eu tenho uma dúvida, o download de todos aí deram certo, e só o meu que não funcionou 😢. Se funcionou pra vcs deve ser algo que errei.
Seria tão mais simples usar o próprio canvas do html do que uma div pra cada pixel, fica a recomendação pra quem quiser implementar de uma forma diferente.
Manual do Dev""""""""Pode até parecer um pouco simples""""""""""" eu: WTF ?! Kkkkkkkkkkkk
kkkkkkkkkk