split
This commit is contained in:
parent
53a9634926
commit
b3b1afe4f9
130
fireworks.js
Normal file
130
fireworks.js
Normal file
|
|
@ -0,0 +1,130 @@
|
|||
import { Particle } from './particles.js';
|
||||
|
||||
// Fireworks variables
|
||||
let context;
|
||||
let fireworks = [];
|
||||
let particles = [];
|
||||
let fireworksActive = false;
|
||||
let canvas;
|
||||
let body;
|
||||
|
||||
// Canvas setup
|
||||
function setupCanvas() {
|
||||
if (!canvas) return;
|
||||
|
||||
context = canvas.getContext('2d');
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
|
||||
// Event to resize canvas when window resizes
|
||||
window.addEventListener('resize', () => {
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
});
|
||||
}
|
||||
|
||||
// Firework class
|
||||
class Firework {
|
||||
constructor() {
|
||||
this.x = Math.random() * canvas.width;
|
||||
this.y = canvas.height;
|
||||
this.targetX = Math.random() * canvas.width;
|
||||
this.targetY = Math.random() * canvas.height / 2;
|
||||
this.speed = 2 + Math.random() * 3;
|
||||
this.angle = Math.atan2(this.targetY - this.y, this.targetX - this.x);
|
||||
this.velocityX = Math.cos(this.angle) * this.speed;
|
||||
this.velocityY = Math.sin(this.angle) * this.speed;
|
||||
this.size = 2;
|
||||
this.color = `hsl(${Math.random() * 360}, 100%, 50%)`;
|
||||
this.particleCount = 80 + Math.floor(Math.random() * 40);
|
||||
}
|
||||
|
||||
update() {
|
||||
this.x += this.velocityX;
|
||||
this.y += this.velocityY;
|
||||
|
||||
// Check if firework reached its target
|
||||
if (Math.abs(this.x - this.targetX) < 10 && Math.abs(this.y - this.targetY) < 10) {
|
||||
this.explode();
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
explode() {
|
||||
for (let i = 0; i < this.particleCount; i++) {
|
||||
particles.push(new Particle(this.x, this.y, this.color));
|
||||
}
|
||||
}
|
||||
|
||||
draw() {
|
||||
context.fillStyle = this.color;
|
||||
context.beginPath();
|
||||
context.arc(this.x, this.y, this.size, 0, Math.PI * 2);
|
||||
context.fill();
|
||||
}
|
||||
}
|
||||
|
||||
// Animation loop for fireworks
|
||||
function animateFireworks() {
|
||||
if (!fireworksActive) return;
|
||||
|
||||
requestAnimationFrame(animateFireworks);
|
||||
|
||||
// Clear canvas with semi-transparent black for trail effect
|
||||
context.fillStyle = 'rgba(0, 0, 0, 0.1)';
|
||||
context.fillRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
// Random chance to create a new firework
|
||||
if (fireworks.length < 5 && Math.random() < 0.03) {
|
||||
fireworks.push(new Firework());
|
||||
}
|
||||
|
||||
// Update and draw fireworks
|
||||
fireworks = fireworks.filter(firework => {
|
||||
firework.draw();
|
||||
return firework.update();
|
||||
});
|
||||
|
||||
// Update and draw particles
|
||||
particles = particles.filter(particle => {
|
||||
particle.draw(context);
|
||||
return particle.update();
|
||||
});
|
||||
}
|
||||
|
||||
// Start fireworks
|
||||
function startFireworks() {
|
||||
if (fireworksActive) return;
|
||||
|
||||
setupCanvas();
|
||||
fireworksActive = true;
|
||||
body.classList.add('fireworks-active');
|
||||
canvas.style.display = 'block';
|
||||
|
||||
// Create initial fireworks
|
||||
for (let i = 0; i < 3; i++) {
|
||||
fireworks.push(new Firework());
|
||||
}
|
||||
|
||||
animateFireworks();
|
||||
console.log("Fireworks started");
|
||||
}
|
||||
|
||||
// Reset fireworks
|
||||
function resetFireworks() {
|
||||
if (!fireworksActive) return;
|
||||
|
||||
fireworksActive = false;
|
||||
body.classList.remove('fireworks-active');
|
||||
fireworks = [];
|
||||
particles = [];
|
||||
}
|
||||
|
||||
// Initialize fireworks with DOM elements
|
||||
function initFireworks(canvasElement, bodyElement) {
|
||||
canvas = canvasElement;
|
||||
body = bodyElement;
|
||||
}
|
||||
|
||||
export { startFireworks, resetFireworks, initFireworks };
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
<body>
|
||||
<canvas id="fireworks-canvas"></canvas>
|
||||
<div class="container">
|
||||
<h1>Contador até a viagem</h1>
|
||||
<h1>Contador da Viagem</h1>
|
||||
<div id="countdown-container">
|
||||
<div class="countdown">
|
||||
<div class="time-section">
|
||||
|
|
@ -34,14 +34,14 @@
|
|||
<div class="time-label">Segundos</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="expired-message" class="hidden">Estou indo para Santana!</div>
|
||||
<div id="expired-message" class="hidden">A data já passou!</div>
|
||||
</div>
|
||||
<div class="target-date-container">
|
||||
<p>Contando até: <span id="target-date">10 de Abril de 2025</span></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="script.js"></script>
|
||||
<script type="module" src="main.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
94
main.js
Normal file
94
main.js
Normal file
|
|
@ -0,0 +1,94 @@
|
|||
import { initFireworks, startFireworks, resetFireworks } from './fireworks.js';
|
||||
|
||||
// Target date for countdown (YYYY, Month-1, Day, Hour, Minute, Second)
|
||||
// Default date is set to April 10, 2025
|
||||
let targetDate = new Date(2025, 3, 10, 0, 0, 0).getTime();
|
||||
|
||||
const test = true;
|
||||
|
||||
if (test) {
|
||||
// Para teste: descomentar a linha abaixo para simular que a data já passou
|
||||
targetDate = new Date().getTime() - 1000; // 1 segundo no passado
|
||||
}
|
||||
|
||||
// Elements
|
||||
const daysElement = document.getElementById('days');
|
||||
const hoursElement = document.getElementById('hours');
|
||||
const minutesElement = document.getElementById('minutes');
|
||||
const secondsElement = document.getElementById('seconds');
|
||||
const countdownElement = document.querySelector('.countdown');
|
||||
const expiredMessageElement = document.getElementById('expired-message');
|
||||
const canvas = document.getElementById('fireworks-canvas');
|
||||
const body = document.body;
|
||||
|
||||
// Initialize the fireworks
|
||||
initFireworks(canvas, body);
|
||||
|
||||
// Update the target date display
|
||||
document.getElementById('target-date').textContent = new Date(targetDate).toLocaleDateString('pt-BR', {
|
||||
day: 'numeric',
|
||||
month: 'long',
|
||||
year: 'numeric'
|
||||
});
|
||||
|
||||
// Update the countdown every second
|
||||
function updateCountdown() {
|
||||
// Get the current date and time
|
||||
const now = new Date().getTime();
|
||||
|
||||
// Find the distance between now and the target date
|
||||
const distance = targetDate - now;
|
||||
|
||||
// Check if the target date has passed
|
||||
if (distance < 0) {
|
||||
// Hide countdown and show expired message
|
||||
countdownElement.classList.add('hidden');
|
||||
expiredMessageElement.classList.remove('hidden');
|
||||
startFireworks();
|
||||
return;
|
||||
}
|
||||
|
||||
// Time calculations for days, hours, minutes and seconds
|
||||
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
|
||||
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
|
||||
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
|
||||
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
|
||||
|
||||
// Display the results
|
||||
daysElement.innerHTML = days.toString().padStart(2, '0');
|
||||
hoursElement.innerHTML = hours.toString().padStart(2, '0');
|
||||
minutesElement.innerHTML = minutes.toString().padStart(2, '0');
|
||||
secondsElement.innerHTML = seconds.toString().padStart(2, '0');
|
||||
}
|
||||
|
||||
// Function to change the target date
|
||||
function changeTargetDate(newDate) {
|
||||
// You can call this function to change the target date dynamically
|
||||
targetDate = new Date(newDate).getTime();
|
||||
|
||||
// Update the target date display
|
||||
document.getElementById('target-date').textContent = new Date(targetDate).toLocaleDateString('pt-BR', {
|
||||
day: 'numeric',
|
||||
month: 'long',
|
||||
year: 'numeric'
|
||||
});
|
||||
|
||||
// Reset the countdown display
|
||||
countdownElement.classList.remove('hidden');
|
||||
expiredMessageElement.classList.add('hidden');
|
||||
|
||||
// Reset fireworks if active
|
||||
resetFireworks();
|
||||
|
||||
// Update the countdown immediately
|
||||
updateCountdown();
|
||||
}
|
||||
|
||||
// Make changeTargetDate available globally
|
||||
window.changeTargetDate = changeTargetDate;
|
||||
|
||||
// Initial call to set correct values
|
||||
updateCountdown();
|
||||
|
||||
// Update the countdown every second
|
||||
const countdownInterval = setInterval(updateCountdown, 1000);
|
||||
35
particles.js
Normal file
35
particles.js
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
// Particle class (for explosion)
|
||||
export class Particle {
|
||||
constructor(x, y, color) {
|
||||
this.x = x;
|
||||
this.y = y;
|
||||
this.velocityX = (Math.random() - 0.5) * 5;
|
||||
this.velocityY = (Math.random() - 0.5) * 5;
|
||||
this.size = Math.random() * 4 + 1; // Tamanho maior para melhor visibilidade
|
||||
this.color = color;
|
||||
this.alpha = 1;
|
||||
this.gravity = 0.05;
|
||||
this.resistance = 0.92;
|
||||
}
|
||||
|
||||
update() {
|
||||
this.velocityX *= this.resistance;
|
||||
this.velocityY *= this.resistance;
|
||||
this.velocityY += this.gravity;
|
||||
|
||||
this.x += this.velocityX;
|
||||
this.y += this.velocityY;
|
||||
this.alpha -= 0.01;
|
||||
|
||||
return this.alpha > 0;
|
||||
}
|
||||
|
||||
draw(context) {
|
||||
context.globalAlpha = this.alpha;
|
||||
context.fillStyle = this.color;
|
||||
context.beginPath();
|
||||
context.arc(this.x, this.y, this.size, 0, Math.PI * 2);
|
||||
context.fill();
|
||||
context.globalAlpha = 1;
|
||||
}
|
||||
}
|
||||
228
script.js
228
script.js
|
|
@ -1,228 +0,0 @@
|
|||
// Target date for countdown (YYYY, Month-1, Day, Hour, Minute, Second)
|
||||
// Default date is set to December 31, 2023
|
||||
let targetDate = new Date(2025, 3, 10, 0, 0, 0).getTime();
|
||||
|
||||
const test = true;
|
||||
|
||||
if (test) {
|
||||
// Para teste: descomentar a linha abaixo para simular que a data já passou
|
||||
// targetDate = new Date().getTime() - 1000; // 1 segundo no passado
|
||||
targetDate = new Date(2025, 2, 10, 0, 0, 0).getTime();
|
||||
}
|
||||
|
||||
// Update the target date display
|
||||
document.getElementById('target-date').textContent = new Date(targetDate).toLocaleDateString('pt-BR', {
|
||||
day: 'numeric',
|
||||
month: 'long',
|
||||
year: 'numeric'
|
||||
});
|
||||
|
||||
// Elements
|
||||
const daysElement = document.getElementById('days');
|
||||
const hoursElement = document.getElementById('hours');
|
||||
const minutesElement = document.getElementById('minutes');
|
||||
const secondsElement = document.getElementById('seconds');
|
||||
const countdownElement = document.querySelector('.countdown');
|
||||
const expiredMessageElement = document.getElementById('expired-message');
|
||||
const canvas = document.getElementById('fireworks-canvas');
|
||||
const body = document.body;
|
||||
|
||||
// Fireworks variables
|
||||
let context;
|
||||
let fireworks = [];
|
||||
let particles = [];
|
||||
let fireworksActive = false;
|
||||
|
||||
// Canvas setup
|
||||
function setupCanvas() {
|
||||
if (!canvas) return;
|
||||
|
||||
context = canvas.getContext('2d');
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
|
||||
// Event to resize canvas when window resizes
|
||||
window.addEventListener('resize', () => {
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
});
|
||||
}
|
||||
|
||||
// Firework class
|
||||
class Firework {
|
||||
constructor() {
|
||||
this.x = Math.random() * canvas.width;
|
||||
this.y = canvas.height;
|
||||
this.targetX = Math.random() * canvas.width;
|
||||
this.targetY = Math.random() * canvas.height / 2;
|
||||
this.speed = 2 + Math.random() * 3;
|
||||
this.angle = Math.atan2(this.targetY - this.y, this.targetX - this.x);
|
||||
this.velocityX = Math.cos(this.angle) * this.speed;
|
||||
this.velocityY = Math.sin(this.angle) * this.speed;
|
||||
this.size = 2;
|
||||
this.color = `hsl(${Math.random() * 360}, 100%, 50%)`;
|
||||
this.particleCount = 80 + Math.floor(Math.random() * 40);
|
||||
}
|
||||
|
||||
update() {
|
||||
this.x += this.velocityX;
|
||||
this.y += this.velocityY;
|
||||
|
||||
// Check if firework reached its target
|
||||
if (Math.abs(this.x - this.targetX) < 10 && Math.abs(this.y - this.targetY) < 10) {
|
||||
this.explode();
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
explode() {
|
||||
for (let i = 0; i < this.particleCount; i++) {
|
||||
particles.push(new Particle(this.x, this.y, this.color));
|
||||
}
|
||||
}
|
||||
|
||||
draw() {
|
||||
context.fillStyle = this.color;
|
||||
context.beginPath();
|
||||
context.arc(this.x, this.y, this.size, 0, Math.PI * 2);
|
||||
context.fill();
|
||||
}
|
||||
}
|
||||
|
||||
// Particle class (for explosion)
|
||||
class Particle {
|
||||
constructor(x, y, color) {
|
||||
this.x = x;
|
||||
this.y = y;
|
||||
this.velocityX = (Math.random() - 0.5) * 5;
|
||||
this.velocityY = (Math.random() - 0.5) * 5;
|
||||
this.size = Math.random() * 3;
|
||||
this.color = color;
|
||||
this.alpha = 1;
|
||||
this.gravity = 0.05;
|
||||
this.resistance = 0.92;
|
||||
}
|
||||
|
||||
update() {
|
||||
this.velocityX *= this.resistance;
|
||||
this.velocityY *= this.resistance;
|
||||
this.velocityY += this.gravity;
|
||||
|
||||
this.x += this.velocityX;
|
||||
this.y += this.velocityY;
|
||||
this.alpha -= 0.01;
|
||||
|
||||
return this.alpha > 0;
|
||||
}
|
||||
|
||||
draw() {
|
||||
context.globalAlpha = this.alpha;
|
||||
context.fillStyle = this.color;
|
||||
context.beginPath();
|
||||
context.arc(this.x, this.y, this.size, 0, Math.PI * 2);
|
||||
context.fill();
|
||||
context.globalAlpha = 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Animation loop for fireworks
|
||||
function animateFireworks() {
|
||||
if (!fireworksActive) return;
|
||||
|
||||
requestAnimationFrame(animateFireworks);
|
||||
|
||||
context.fillStyle = 'rgba(0, 0, 0, 0.1)';
|
||||
context.fillRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
// Random chance to create a new firework
|
||||
if (fireworks.length < 5 && Math.random() < 0.03) {
|
||||
fireworks.push(new Firework());
|
||||
}
|
||||
|
||||
// Update and draw fireworks
|
||||
fireworks = fireworks.filter(firework => {
|
||||
firework.draw();
|
||||
return firework.update();
|
||||
});
|
||||
|
||||
// Update and draw particles
|
||||
particles = particles.filter(particle => {
|
||||
particle.draw();
|
||||
return particle.update();
|
||||
});
|
||||
}
|
||||
|
||||
// Start fireworks
|
||||
function startFireworks() {
|
||||
if (fireworksActive) return;
|
||||
|
||||
setupCanvas();
|
||||
fireworksActive = true;
|
||||
body.classList.add('fireworks-active');
|
||||
animateFireworks();
|
||||
}
|
||||
|
||||
// Update the countdown every second
|
||||
function updateCountdown() {
|
||||
// Get the current date and time
|
||||
const now = new Date().getTime();
|
||||
|
||||
// Find the distance between now and the target date
|
||||
const distance = targetDate - now;
|
||||
|
||||
// Check if the target date has passed
|
||||
if (distance < 0) {
|
||||
// Hide countdown and show expired message
|
||||
countdownElement.classList.add('hidden');
|
||||
expiredMessageElement.classList.remove('hidden');
|
||||
startFireworks();
|
||||
return;
|
||||
}
|
||||
|
||||
// Time calculations for days, hours, minutes and seconds
|
||||
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
|
||||
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
|
||||
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
|
||||
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
|
||||
|
||||
// Display the results
|
||||
daysElement.innerHTML = days.toString().padStart(2, '0');
|
||||
hoursElement.innerHTML = hours.toString().padStart(2, '0');
|
||||
minutesElement.innerHTML = minutes.toString().padStart(2, '0');
|
||||
secondsElement.innerHTML = seconds.toString().padStart(2, '0');
|
||||
}
|
||||
|
||||
// Initial call to set correct values
|
||||
updateCountdown();
|
||||
|
||||
// Update the countdown every second
|
||||
const countdownInterval = setInterval(updateCountdown, 1000);
|
||||
|
||||
// Function to change the target date
|
||||
function changeTargetDate(newDate) {
|
||||
// You can call this function to change the target date dynamically
|
||||
targetDate = new Date(newDate).getTime();
|
||||
|
||||
// Update the target date display
|
||||
document.getElementById('target-date').textContent = new Date(targetDate).toLocaleDateString('pt-BR', {
|
||||
day: 'numeric',
|
||||
month: 'long',
|
||||
year: 'numeric'
|
||||
});
|
||||
|
||||
// Reset the countdown display
|
||||
countdownElement.classList.remove('hidden');
|
||||
expiredMessageElement.classList.add('hidden');
|
||||
|
||||
// Reset fireworks if active
|
||||
if (fireworksActive) {
|
||||
fireworksActive = false;
|
||||
body.classList.remove('fireworks-active');
|
||||
fireworks = [];
|
||||
particles = [];
|
||||
}
|
||||
|
||||
// Update the countdown immediately
|
||||
updateCountdown();
|
||||
}
|
||||
Loading…
Reference in a new issue