feat: add damageflash

2025-07-12 14:51:47 +02:00
parent 16c94b9c57
commit 183d074267
1 changed files with 26 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -135,6 +135,23 @@
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(255, 68, 68, 0.5);
        }
+        
+        .damage-flash {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100vw;
+            height: 100vh;
+            background: rgba(255, 0, 0, 0.5);
+            pointer-events: none;
+            z-index: 500;
+            opacity: 0;
+            transition: opacity 0.1s ease-out;
+        }
+        
+        .damage-flash.active {
+            opacity: 1;
+        }
    </style>
 </head>
 <body>
@ -159,6 +176,8 @@
        </div>
    </div>
    
+    <div id="damageFlash" class="damage-flash"></div>
+    
    <script>
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');
@ -1021,6 +1040,13 @@
                        game.player.health -= 10;
                        game.player.lastDamage = now;
                        
+                        // Flash red screen
+                        const damageFlash = document.getElementById('damageFlash');
+                        damageFlash.classList.add('active');
+                        setTimeout(() => {
+                            damageFlash.classList.remove('active');
+                        }, 150);
+                        
                        // Play player ouch sound
                        sounds.playerOuch.currentTime = 0;
                        sounds.playerOuch.play().catch(e => console.log('Audio play failed:', e));