Select Git revision
clicker.html
Code owners
Assign users and groups as approvers for specific file changes. Learn more.
clicker.html 5.56 KiB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Capy-Clicker</title>
<link rel="stylesheet" href="style.css">
<style>
body {
background-color: #dcedc8; /* Light green background */
overflow: hidden; /* Prevent scrollbars */
}
#clicker-container {
text-align: center;
padding: 20px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
margin: 20px auto;
max-width: 800px;
position: relative; /* For positioning the counter */
}
h1 {
color: #689f38; /* Green header */
font-size: 2.5em;
margin-bottom: 10px;
}
#click-count {
font-size: 2em;
color: #689f38;
margin-top: 20px;
}
.emoji {
font-size: 1.5em;
}
.capybara {
width: 100px;
height: 100px;
border-radius: 50%; /* Make it round */
position: absolute;
cursor: pointer;
animation: fall 5s linear forwards; /* Same slow speed */
overflow: hidden; /* Clip the image to the circle */
transition: transform 0.2s ease-out, opacity 0.2s ease-out; /* Smooth transition for pop animation */
}
.capybara img {
width: 100%;
height: 100%;
object-fit: cover; /* Ensure the image fills the circle */
}
@keyframes fall {
0% {
top: -100px; /* Start above the viewport */
}
100% {
top: 100vh;
}
}
</style>
</head>
<body>
<header>
<h1>Capy-Clicker 🌟</h1> </header>
<nav>
<ul>
<li><a href="index.html">Stella</a></li>
<li><a href="clicker.html">Capy-Clicker</a></li>
<li><a href="capy-pet.html">Capy-Pet</a></li>
<li><a href="capy-facts.html">Capy-Facts</a></li>
<li><a href="story.html">Capy-Story</a></li>
<li><a href="capy-runner.html">Capy-Runner</a></li>
<li><a href="notes.html">Capy-Notes</a></li>
<li><a href="soundboard.html">Soundboard</a></li>
</ul>
</nav>
<main>
<div id="clicker-container">
<h1>Click the Capybaras! <span class="emoji">🖱️</span></h1>
<div id="click-count">Capybaras Popped: 0</div>
</div>
</main>
<footer>
<p>© 2024 CapybaraSimulator.com</p>
</footer>
<script>
const clickCountDisplay = document.getElementById('click-count');
const clickerContainer = document.getElementById('clicker-container');
let clickCount = 0;
async function fetchCapybaraImage() {
try {
const response = await fetch('https://api.capy.lol/v1/capybara?json=true');
if (!response.ok) {
throw new Error('Failed to fetch capybara image');
}
const data = await response.json();
return data.data.url; // Adjust based on actual JSON structure
} catch (error) {
console.error('Error fetching capybara image:', error);
return 'capybara-sprite.png'; // Fallback image
}
}
async function createCapybara() {
const capybara = document.createElement('div');
capybara.classList.add('capybara');
capybara.style.left = Math.random() * (window.innerWidth - 100) + 'px'; // Ensure capybara stays within bounds
const img = document.createElement('img');
try{
img.src = await fetchCapybaraImage(); // Fetch a new image for each capybara
} catch(e){
img.src = 'capybara-sprite.png';
}
capybara.appendChild(img);
capybara.addEventListener('click', popCapybara);
clickerContainer.appendChild(capybara);
capybara.addEventListener('animationend', () => {
capybara.remove(); // Remove capybara when it reaches the bottom
});
}
function popCapybara(event) {
const capybara = event.currentTarget;
clickCount++;
clickCountDisplay.textContent = `Capybaras Popped: ${clickCount}`;
// "Pop" animation
capybara.style.transform = 'scale(1.5)'; // Enlarge
capybara.style.opacity = '0'; // Fade out
// Play ding sound (create a simple tone)
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const oscillator = audioContext.createOscillator();
const gainNode = audioContext.createGain();
oscillator.connect(gainNode);
gainNode.connect(audioContext.destination);
oscillator.type = 'sine';
oscillator.frequency.setValueAtTime(440, audioContext.currentTime); // A4 frequency
gainNode.gain.setValueAtTime(0.5, audioContext.currentTime);
oscillator.start();
oscillator.stop(audioContext.currentTime + 0.1); // Short beep
// Remove after animation
setTimeout(() => {
capybara.remove(); // Remove immediately on click
}, 200);
}
// Create capybaras every 1 second
setInterval(createCapybara, 1000);
</script>
</body>
</html>