lelgenio/contador-da-viagem
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

split

Browse source
This commit is contained in:
lelgenio 2025-03-21 19:41:02 -03:00
parent 53a9634926
commit b3b1afe4f9
No known key found for this signature in database
GPG key ID: 2F8F21CE8721456B
5 changed files with 262 additions and 231 deletions
Download patch file Download diff file Expand all files Collapse all files

130
fireworks.js Normal file
View 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 };

6
index.html
View file

@ -11,7 +11,7 @@
<body> <body>
<canvas id="fireworks-canvas"></canvas> <canvas id="fireworks-canvas"></canvas>
<div class="container"> <div class="container">
<h1>Contador até a viagem</h1> <h1>Contador da Viagem</h1>
<div id="countdown-container"> <div id="countdown-container">
<div class="countdown"> <div class="countdown">
<div class="time-section"> <div class="time-section">
@ -34,14 +34,14 @@
<div class="time-label">Segundos</div> <div class="time-label">Segundos</div>
</div> </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>
<div class="target-date-container"> <div class="target-date-container">
<p>Contando até: <span id="target-date">10 de Abril de 2025</span></p> <p>Contando até: <span id="target-date">10 de Abril de 2025</span></p>
</div> </div>
</div> </div>
<script src="script.js"></script> <script type="module" src="main.js"></script>
</body> </body>
</html> </html>

94
main.js Normal file
View 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
View 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
View file

@ -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();
}