Moving Heart Emoji with Attacks

❤️

Crash on Hit

body { font-family: monospace; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f0f0f0; overflow: hidden; } #game-container { position: relative; width: 800px; height: 600px; border: 2px dashed #ccc; margin-bottom: 20px; } #heart { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 2em; color: red; } .attack { position: absolute; width: 20px; height: 20px; background-color: blue; border-radius: 50%; } /* Switch Styles */ .switch { position: relative; display: inline-block; width: 60px; height: 34px; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; } .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; transition: .4s; } input:checked + .slider { background-color: #2196F3; } input:focus + .slider { box-shadow: 0 0 1px #2196F3; } input:checked + .slider:before { transform: translateX(26px); } .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; } #controls { display: flex; align-items: center; } .switch-text { margin-left: 10px; } const heart = document.getElementById('heart'); const gameContainer = document.getElementById('game-container'); const crashSwitch = document.getElementById('crash-switch'); let x = 0; let y = 0; const speed = 5; let attacks = []; let isCrashEnabled = false; // Crash disabled by default crashSwitch.addEventListener('change', function() { isCrashEnabled = this.checked; console.log("Crash on hit: ", isCrashEnabled ? "Enabled" : "Disabled"); }); function updateHeartPosition() { heart.style.transform = `translate(${x}px, ${y}px)`; } document.addEventListener('keydown', (event) => { switch (event.key) { case 'w': y -= speed; break; case 'a': x -= speed; break; case 's': y += speed; break; case 'd': x += speed; break; } const containerRect = gameContainer.getBoundingClientRect(); const heartRect = heart.getBoundingClientRect(); if (heartRect.left + x < containerRect.left) { x = containerRect.left - heartRect.left; } if (heartRect.right + x > containerRect.right) { x = containerRect.right - heartRect.right; } if (heartRect.top + y < containerRect.top) { y = containerRect.top - heartRect.top; } if (heartRect.bottom + y > containerRect.bottom) { y = containerRect.bottom - heartRect.bottom; } updateHeartPosition(); }); function createAttack() { const attack = document.createElement('div'); attack.classList.add('attack'); gameContainer.appendChild(attack); let startX, startY; const side = Math.floor(Math.random() * 4); const containerRect = gameContainer.getBoundingClientRect(); const heartRect = heart.getBoundingClientRect(); const heartCenterX = heartRect.left + heartRect.width / 2 - containerRect.left; const heartCenterY = heartRect.top + heartRect.height / 2 - containerRect.top; if (side === 0) { startX = heartCenterX; startY = -20; } else if (side === 1) { startY = heartCenterY; startX = containerRect.width + 20; } else if (side === 2) { startX = heartCenterX; startY = containerRect.height + 20; } else { startY = heartCenterY; startX = -20; } attack.style.left = `${startX}px`; attack.style.top = `${startY}px`; attacks.push(attack); } function moveAttacks() { const containerRect = gameContainer.getBoundingClientRect(); const heartRect = heart.getBoundingClientRect(); const heartCenterX = heartRect.left + heartRect.width / 2 - containerRect.left; const heartCenterY = heartRect.top + heartRect.height / 2 - containerRect.top; attacks.forEach(attack => { const attackRect = attack.getBoundingClientRect(); let dx = heartCenterX - (attackRect.left + attackRect.width / 2 - containerRect.left); let dy = heartCenterY - (attackRect.top + attackRect.height / 2 - containerRect.top); const distance = Math.sqrt(dx * dx + dy * dy); const speed = 3; const moveX = (dx / distance) * speed; const moveY = (dy / distance) * speed; attack.style.left = `${parseFloat(attack.style.left) + moveX}px`; attack.style.top = `${parseFloat(attack.style.top) + moveY}px`; const distanceToHeart = Math.sqrt( Math.pow(heartRect.left + heartRect.width / 2 - (attackRect.left + attackRect.width / 2), 2) + Math.pow(heartRect.top + heartRect.height / 2 - (attackRect.top + attackRect.height / 2), 2) ); if (distanceToHeart < 30) { attack.remove(); attacks = attacks.filter(a => a !== attack); console.log("Hit!"); if (isCrashEnabled) { window.location.reload(); // Crash the tab if enabled } } else if ( attackRect.right < containerRect.left || attackRect.left > containerRect.right || attackRect.bottom < containerRect.top || attackRect.top > containerRect.bottom ) { attack.remove(); attacks = attacks.filter(a => a !== attack); } }); } setInterval(createAttack, 1500); function gameLoop() { moveAttacks(); requestAnimationFrame(gameLoop); } gameLoop(); updateHeartPosition();