first commit
This commit is contained in:
Ronnie
commit
a7aeb25397
6 changed files with 435 additions and 0 deletions
260
script.js
Normal file
260
script.js
Normal file
|
|
@ -0,0 +1,260 @@
|
|||
let clickCount = 0;
|
||||
const button = document.getElementById('dangerButton');
|
||||
const container = document.querySelector('.container');
|
||||
const body = document.body;
|
||||
const clickCountElement = document.getElementById('clickCount');
|
||||
|
||||
const effects = [
|
||||
// Effect 1: Shake the button
|
||||
() => {
|
||||
button.classList.add('shake');
|
||||
setTimeout(() => button.classList.remove('shake'), 500);
|
||||
},
|
||||
// Effect 2: Invert colors
|
||||
() => {
|
||||
body.style.filter = 'invert(1)';
|
||||
},
|
||||
// Effect 3: Rotate the container
|
||||
() => {
|
||||
container.style.transform = 'rotate(180deg)';
|
||||
},
|
||||
// Effect 4: Make text unreadable
|
||||
() => {
|
||||
const elements = document.querySelectorAll('h1, p');
|
||||
elements.forEach(el => {
|
||||
el.style.letterSpacing = '5px';
|
||||
el.style.fontFamily = 'Wingdings';
|
||||
});
|
||||
},
|
||||
// Effect 5: Make everything spin
|
||||
() => {
|
||||
document.querySelectorAll('*').forEach(el => {
|
||||
el.classList.add('spin');
|
||||
});
|
||||
},
|
||||
// Effect 6: Change background to rainbow
|
||||
() => {
|
||||
body.style.background = 'linear-gradient(45deg, red, orange, yellow, green, blue, indigo, violet)';
|
||||
body.style.backgroundSize = '400% 400%';
|
||||
body.style.animation = 'rainbow 5s ease infinite';
|
||||
},
|
||||
// Effect 7: Make everything tiny
|
||||
() => {
|
||||
container.style.transform = 'scale(0.5)';
|
||||
},
|
||||
// Effect 8: Flip everything upside down
|
||||
() => {
|
||||
body.style.transform = 'rotate(180deg)';
|
||||
},
|
||||
// Effect 9: Make text rainbow
|
||||
() => {
|
||||
const style = document.createElement('style');
|
||||
style.textContent = `
|
||||
@keyframes rainbow {
|
||||
0% { color: red; }
|
||||
20% { color: orange; }
|
||||
40% { color: yellow; }
|
||||
60% { color: green; }
|
||||
80% { color: blue; }
|
||||
100% { color: purple; }
|
||||
}
|
||||
h1, p { animation: rainbow 2s linear infinite; }
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
},
|
||||
// Effect 10: Make everything bouncy
|
||||
() => {
|
||||
const style = document.createElement('style');
|
||||
style.textContent = `
|
||||
@keyframes bounce {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-20px); }
|
||||
}
|
||||
* { animation: bounce 0.5s ease infinite; }
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
},
|
||||
// Effect 11: Matrix rain effect
|
||||
() => {
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.style.position = 'fixed';
|
||||
canvas.style.top = '0';
|
||||
canvas.style.left = '0';
|
||||
canvas.style.zIndex = '-1';
|
||||
canvas.style.opacity = '0.5';
|
||||
document.body.appendChild(canvas);
|
||||
|
||||
const ctx = canvas.getContext('2d');
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
|
||||
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789@#$%^&*';
|
||||
const charArray = chars.split('');
|
||||
const fontSize = 14;
|
||||
const columns = canvas.width / fontSize;
|
||||
const drops = [];
|
||||
|
||||
for(let i = 0; i < columns; i++) {
|
||||
drops[i] = 1;
|
||||
}
|
||||
|
||||
function draw() {
|
||||
ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
ctx.fillStyle = '#0F0';
|
||||
ctx.font = fontSize + 'px monospace';
|
||||
|
||||
for(let i = 0; i < drops.length; i++) {
|
||||
const text = charArray[Math.floor(Math.random() * charArray.length)];
|
||||
ctx.fillText(text, i * fontSize, drops[i] * fontSize);
|
||||
if(drops[i] * fontSize > canvas.height && Math.random() > 0.975) {
|
||||
drops[i] = 0;
|
||||
}
|
||||
drops[i]++;
|
||||
}
|
||||
}
|
||||
|
||||
setInterval(draw, 33);
|
||||
},
|
||||
// Effect 12: Glitch effect
|
||||
() => {
|
||||
const style = document.createElement('style');
|
||||
style.textContent = `
|
||||
@keyframes glitch {
|
||||
0% { transform: translate(0); }
|
||||
20% { transform: translate(-2px, 2px); }
|
||||
40% { transform: translate(-2px, -2px); }
|
||||
60% { transform: translate(2px, 2px); }
|
||||
80% { transform: translate(2px, -2px); }
|
||||
100% { transform: translate(0); }
|
||||
}
|
||||
* { animation: glitch 0.3s infinite; }
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
},
|
||||
// Effect 13: Random emoji rain
|
||||
() => {
|
||||
const emojis = ['💥', '🔥', '💣', '⚠️', '🚫', '❌', '💢', '⚡', '💫', '✨'];
|
||||
setInterval(() => {
|
||||
const emoji = document.createElement('div');
|
||||
emoji.textContent = emojis[Math.floor(Math.random() * emojis.length)];
|
||||
emoji.style.position = 'fixed';
|
||||
emoji.style.left = Math.random() * window.innerWidth + 'px';
|
||||
emoji.style.top = '-20px';
|
||||
emoji.style.fontSize = '24px';
|
||||
emoji.style.zIndex = '1000';
|
||||
document.body.appendChild(emoji);
|
||||
|
||||
const animation = emoji.animate([
|
||||
{ transform: 'translateY(0) rotate(0deg)', opacity: 1 },
|
||||
{ transform: `translateY(${window.innerHeight}px) rotate(360deg)`, opacity: 0 }
|
||||
], {
|
||||
duration: 2000,
|
||||
easing: 'linear'
|
||||
});
|
||||
|
||||
animation.onfinish = () => emoji.remove();
|
||||
}, 200);
|
||||
},
|
||||
// Effect 14: Random cursor trails
|
||||
() => {
|
||||
const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff'];
|
||||
let trail = [];
|
||||
|
||||
document.addEventListener('mousemove', (e) => {
|
||||
const dot = document.createElement('div');
|
||||
dot.style.position = 'fixed';
|
||||
dot.style.width = '10px';
|
||||
dot.style.height = '10px';
|
||||
dot.style.borderRadius = '50%';
|
||||
dot.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
|
||||
dot.style.left = e.clientX + 'px';
|
||||
dot.style.top = e.clientY + 'px';
|
||||
dot.style.pointerEvents = 'none';
|
||||
document.body.appendChild(dot);
|
||||
|
||||
trail.push(dot);
|
||||
if (trail.length > 20) {
|
||||
trail[0].remove();
|
||||
trail.shift();
|
||||
}
|
||||
|
||||
setTimeout(() => dot.remove(), 1000);
|
||||
});
|
||||
},
|
||||
// Effect 15: Random element explosion
|
||||
() => {
|
||||
const elements = document.querySelectorAll('*');
|
||||
elements.forEach(el => {
|
||||
if (el !== button && el !== container) {
|
||||
const rect = el.getBoundingClientRect();
|
||||
const particles = 10;
|
||||
|
||||
for (let i = 0; i < particles; i++) {
|
||||
const particle = document.createElement('div');
|
||||
particle.style.position = 'fixed';
|
||||
particle.style.width = '5px';
|
||||
particle.style.height = '5px';
|
||||
particle.style.backgroundColor = `hsl(${Math.random() * 360}, 100%, 50%)`;
|
||||
particle.style.left = rect.left + rect.width/2 + 'px';
|
||||
particle.style.top = rect.top + rect.height/2 + 'px';
|
||||
particle.style.borderRadius = '50%';
|
||||
particle.style.pointerEvents = 'none';
|
||||
document.body.appendChild(particle);
|
||||
|
||||
const angle = (Math.random() * Math.PI * 2);
|
||||
const velocity = 5 + Math.random() * 5;
|
||||
const vx = Math.cos(angle) * velocity;
|
||||
const vy = Math.sin(angle) * velocity;
|
||||
|
||||
let posX = rect.left + rect.width/2;
|
||||
let posY = rect.top + rect.height/2;
|
||||
|
||||
const animate = () => {
|
||||
posX += vx;
|
||||
posY += vy;
|
||||
particle.style.left = posX + 'px';
|
||||
particle.style.top = posY + 'px';
|
||||
particle.style.opacity = parseFloat(particle.style.opacity || 1) - 0.02;
|
||||
|
||||
if (parseFloat(particle.style.opacity) > 0) {
|
||||
requestAnimationFrame(animate);
|
||||
} else {
|
||||
particle.remove();
|
||||
}
|
||||
};
|
||||
|
||||
requestAnimationFrame(animate);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
];
|
||||
|
||||
button.addEventListener('click', () => {
|
||||
clickCount++;
|
||||
clickCountElement.textContent = clickCount;
|
||||
|
||||
// Apply a random effect
|
||||
const randomEffect = effects[Math.floor(Math.random() * effects.length)];
|
||||
randomEffect();
|
||||
|
||||
// Make the button more dangerous looking
|
||||
button.style.transform = `scale(${1 + clickCount * 0.1})`;
|
||||
button.style.background = `hsl(${clickCount * 20}, 100%, 50%)`;
|
||||
|
||||
// Add more chaos as clicks increase
|
||||
if (clickCount > 5) {
|
||||
button.style.position = 'absolute';
|
||||
button.style.left = `${Math.random() * window.innerWidth}px`;
|
||||
button.style.top = `${Math.random() * window.innerHeight}px`;
|
||||
}
|
||||
|
||||
// Make it harder to click after 10 clicks
|
||||
if (clickCount > 10) {
|
||||
button.style.pointerEvents = 'none';
|
||||
setTimeout(() => {
|
||||
button.style.pointerEvents = 'auto';
|
||||
}, 1000);
|
||||
}
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue