Neste tutorial, você aprenderá a criar um projeto em HTML e JavaScript para celebrar o Ano Novo. O projeto inclui animações de fogos de artifício, mensagens animadas e áudio sincronizado para uma experiência completa.
Veja o projeto ao vivo neste link. Happy New Year with Fireworks.
Veja o vídeo no YouTube:
O que você vai criar?
- Animação de mensagens festivas como "FELIZ", "ANO", "NOVO", "2025".
- Fogos de artifício coloridos no fundo.
- Áudio de fogos para completar a celebração.
- Um design responsivo que funciona em dispositivos móveis e desktops.
Pré-requisitos
Antes de começar, você precisará de:
- Um editor de texto ou IDE (como Visual Studio Code, Sublime Text ou outro de sua escolha).
- Um navegador moderno (Google Chrome, Firefox, Edge, etc.).
- Conhecimentos básicos de HTML e JavaScript.
- Um arquivo de áudio de fogos de artifício em formato
.mp3.
Estrutura do Projeto
O projeto terá os seguintes arquivos:
Feliz-Ano-Novo/ ├── index.html # Estrutura da página ├── script.js # Código de animação e lógica ├── fireworks.mp3 # Áudio de fogos de artifício
Passo a Passo
1. Criando o arquivo index.html
Crie o arquivo index.html com a seguinte estrutura:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Feliz Ano Novo com Fogos de Artifício</title>
</head>
<body>
<button id="play-audio" style="position: absolute; z-index: 10; top: 20px; left: 20px; padding: 10px; font-size: 16px;">Iniciar Fogos</button>
<script src="script.js"></script>
</body>
</html>
Este arquivo cria a estrutura principal da página e um botão para iniciar o áudio.
2. Criando o arquivo script.js
Agora crie o arquivo script.js, que será responsável por:
- Exibir as mensagens animadas.
- Criar a animação dos fogos de artifício.
- Reproduzir o som dos fogos.
Aqui está o código completo do script.js:
let chars, particles, canvas, ctx, w, h, current;
let duration = 5000;
let str = ['FELIZ', 'ANO', 'NOVO', '2025'];
let audio; // Variável para o áudio
init();
resize();
requestAnimationFrame(render);
addEventListener('resize', resize);
function makeChar(c) {
let tmp = document.createElement('canvas');
let size = tmp.width = tmp.height = w < 400 ? 200 : 300;
let tmpCtx = tmp.getContext('2d');
tmpCtx.font = 'bold ' + size + 'px Arial';
tmpCtx.fillStyle = 'white';
tmpCtx.textBaseline = "middle";
tmpCtx.textAlign = "center";
tmpCtx.fillText(c, size / 2, size / 2);
let char2 = tmpCtx.getImageData(0, 0, size, size);
let char2particles = [];
for (var i = 0; char2particles.length < particles; i++) {
let x = size * Math.random();
let y = size * Math.random();
let offset = parseInt(y) * size * 4 + parseInt(x) * 4;
if (char2.data[offset])
char2particles.push([x - size / 2, y - size / 2]);
}
return char2particles;
}
function init() {
canvas = document.createElement('canvas');
document.body.append(canvas);
document.body.style.margin = 0;
document.body.style.overflow = 'hidden';
document.body.style.background = 'black';
ctx = canvas.getContext('2d');
// Configurar o áudio
audio = new Audio('fireworks.mp3'); // Certifique-se de ter o arquivo "fireworks.mp3" no mesmo diretório
audio.loop = true; // Repetir áudio
audio.volume = 0.5;
// Adicionar evento ao botão para iniciar o áudio
const playButton = document.getElementById('play-audio');
playButton.addEventListener('click', () => {
audio.play();
playButton.style.display = 'none'; // Esconder o botão após o clique
});
}
function resize() {
w = canvas.width = innerWidth;
h = canvas.height = innerHeight;
particles = innerWidth < 400 ? 55 : 99;
}
function makeChars(t) {
let actual = parseInt(t / duration) % str.length;
if (current === actual)
return;
current = actual;
chars = [...str[actual]].map(makeChar);
}
function render(t) {
makeChars(t);
requestAnimationFrame(render);
ctx.fillStyle = '#00000010';
ctx.fillRect(0, 0, w, h);
chars.forEach((pts, i) => firework(t, i, pts));
}
function firework(t, i, pts) {
t -= i * 200;
let id = i + chars.length * parseInt(t - t % duration);
t = t % duration / duration;
let dx = (i + 1) * w / (1 + chars.length);
dx += Math.min(0.33, t) * 100 * Math.sin(id);
let dy = h * 0.5;
dy += Math.sin(id * 4547.411) * h * 0.1;
if (t < 0.33) {
rocket(dx, dy, id, t * 3);
} else {
explosion(pts, dx, dy, id, Math.min(1, Math.max(0, t - 0.33) * 2));
}
}
function rocket(x, y, id, t) {
ctx.fillStyle = 'white';
let r = 2 - 2 * t + Math.pow(t, 15 * t) * 16;
y = h - y * t;
circle(x, y, r);
}
function explosion(pts, x, y, id, t) {
let dy = (t * t * t) * 20;
let r = Math.sin(id) * 1 + 3;
r = t < 0.5 ? (t + 0.5) * t * r : r - t * r;
ctx.fillStyle = `hsl(${id * 55}, 55%, 55%)`;
pts.forEach((xy, i) => {
if (i % 20 === 0)
ctx.fillStyle = `hsl(${id * 55}, 55%, ${55 + t * Math.sin(t * 55 + i) * 45}%)`;
circle(t * xy[0] + x, h - y + t * xy[1] + dy, r);
});
}
function circle(x, y, r) {
ctx.beginPath();
ctx.ellipse(x, y, r, r, 0, 0, 6.283);
ctx.fill();
}
3. Adicionando o áudio
Coloque um arquivo de som chamado fireworks.mp3 na mesma pasta dos seus arquivos. Você pode baixar sons gratuitos de fogos de artifício no Freesound ou em outros bancos de som.
4. Testando o projeto
Abra o arquivo index.html no navegador. Você verá:
- Mensagens animadas na tela ("FELIZ", "ANO", "NOVO", "2025").
- Fogos de artifício coloridos.
- Um botão no canto superior esquerdo para ativar o som.
Personalização
- Mensagens: Edite o array
strnoscript.jspara alterar os textos animados.
- Cores: Modifique as cores no método
explosion()noscript.js.
- Som: Substitua o arquivo
fireworks.mp3por outro de sua escolha.
Se preferir, os códigos estão no meu Repositório no GitHub.
Conclusão
Parabéns! Você criou um projeto interativo para celebrar o Ano Novo. Este projeto é uma ótima introdução ao uso criativo de HTML5 Canvas e áudio com JavaScript.
🎉 Feliz Ano Novo e boas programações! 🎇
Comentários
Postar um comentário
Obrigado pelo seu feedback!