diff options
| author | elioat <elioat@tilde.institute> | 2024-10-25 22:18:10 -0400 |
|---|---|---|
| committer | elioat <elioat@tilde.institute> | 2024-10-25 22:18:10 -0400 |
| commit | 543efafc4374c81f9a6aaf3d5110527267515a53 (patch) | |
| tree | dc3acc7e25cbccaf8fd96d328b934cad620aa8c0 | |
| parent | 34cbefb94ade577ca18a0adfa5ef0db841b41820 (diff) | |
| download | tour-543efafc4374c81f9a6aaf3d5110527267515a53.tar.gz | |
*
| -rw-r--r-- | html/broughlike/index.html | 51 |
1 files changed, 50 insertions, 1 deletions
diff --git a/html/broughlike/index.html b/html/broughlike/index.html index cb1326c..cebc5cf 100644 --- a/html/broughlike/index.html +++ b/html/broughlike/index.html @@ -20,10 +20,41 @@ margin: 0 auto; background-color: #f0f0f0; } + @keyframes shake { + 0% { transform: translate(0.5px, 0.5px) rotate(0deg); } + 10% { transform: translate(-0.5px, -1px) rotate(-0.5deg); } + 20% { transform: translate(-1.5px, 0px) rotate(0.5deg); } + 30% { transform: translate(1.5px, 1px) rotate(0deg); } + 40% { transform: translate(0.5px, -0.5px) rotate(0.5deg); } + 50% { transform: translate(-0.5px, 1px) rotate(-0.5deg); } + 60% { transform: translate(-1.5px, 0.5px) rotate(0deg); } + 70% { transform: translate(1.5px, 0.5px) rotate(-0.5deg); } + 80% { transform: translate(-0.5px, -0.5px) rotate(0.5deg); } + 90% { transform: translate(0.5px, 1px) rotate(0deg); } + 100% { transform: translate(0.5px, -1px) rotate(-0.5deg); } + } + .shake { + animation: shake 0.5s; + animation-iteration-count: 1; + } + .header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 0.5em; + background-color: #f0f0f0; + } + .toggleShake { + padding: 0.75em; + margin: 0.5em; + } </style> </head> <body> - <p><a href="about.html">About</a></p> + <div class="header"> + <p><a href="about.html">About</a></p> + <button class="toggleShake" id="toggleShake" onclick="toggleShake()">Turn Shake Off</button> + </div> <canvas id="gameCanvas"></canvas> <script> @@ -441,6 +472,20 @@ return []; } + let combatAnimationEnabled = true; + function toggleShake() { + combatAnimationEnabled = !combatAnimationEnabled; + document.getElementById('toggleShake').textContent = combatAnimationEnabled ? 'Turn Shake Off' : 'Turn Shake On'; + } + + function combatAnimation() { + const canvas = document.getElementById('gameCanvas'); + canvas.classList.add('shake'); + canvas.addEventListener('animationend', () => { + canvas.classList.remove('shake'); + }, { once: true }); + } + function handleDamage(player, enemy) { const enemyMisses = Math.random() < 0.5; // 50% chance the enemy misses you const cellX = player.x; @@ -460,6 +505,10 @@ addCombatDots(cellX, cellY, COLORS.combatDotEnemy); // Add dots for enemy damage console.log("Player hit! Enemy health: " + enemy.health); + if (combatAnimationEnabled) { + combatAnimation(); // Trigger the shake animation + } + if (enemy.health <= 0) { player.killCount++; enemies = enemies.filter(e => e !== enemy); |