Add game over mechanic - dangerous squares now end the game

- Entering any dangerous square (visual or audio) now ends the game
- Added game over sound effect with descending melody
- Game over triggers restart from beginning
- Updated UI messages to reflect deadly nature of dangers
- Enhanced challenge: no second chances, must complete without touching dangers
- Updated documentation to reflect new high-stakes gameplay
This commit is contained in:
kuhyx 2025-08-01 16:46:54 +02:00
parent da3311c6a9
commit 684646e53e
4 changed files with 47 additions and 21 deletions

View File

@ -1,14 +1,15 @@
# Danger Field Game
A browser-based danger field game where players navigate through an open area filled with hidden and visible dangers. The game provides multiple types of feedback to enhance the gaming experience.
A challenging browser-based danger field game where players must navigate through a deadly minefield using visual and audio cues. One wrong step ends the game!
## Features
### Core Gameplay
- **Player Movement**: Navigate using WASD keys or arrow keys
- **Open Field**: No internal walls - only outer boundary is impassable
- **Mixed Dangers**: Scattered visual and audio danger squares throughout the field
- **Goal**: Reach the exit (🏁) while avoiding various types of dangers
- **Open Minefield**: No internal walls - only outer boundary is impassable
- **Deadly Dangers**: Both visual and hidden dangers end the game instantly
- **High Stakes**: Navigate carefully - there are no second chances!
- **Goal**: Reach the exit (🏁) without touching any dangerous squares
### Feedback Systems
- **Visual Feedback**:
@ -28,9 +29,8 @@ A browser-based danger field game where players navigate through an open area fi
- Built with Web Audio API with stereo panning and pitch modulation
- **Haptic Feedback**:
- **Visual danger**: Quick double vibration (no audio)
- **Audio danger**: Long vibration pattern with audio
- **Victory**: Celebration vibration pattern
- **Game Over**: Strong vibration pattern when touching dangerous squares
- **Victory**: Celebration vibration pattern when reaching the exit
- Toggle on/off functionality
### Technical Features
@ -68,15 +68,16 @@ npm run build
## How to Play
1. **Movement**: Use WASD keys or arrow keys to move your character (green circle)
2. **Visual Dangers**: Red animated squares are dangerous - avoid them for safety
3. **Hidden Audio Dangers**: Some white squares look safe but are dangerous
2. **Avoid All Dangers**: Both red squares and hidden audio dangers are **deadly**!
3. **Game Over**: Stepping on any dangerous square ends the game immediately
4. **Directional Audio Cues**:
- **Left/Right panning**: Sound comes from the side where hidden dangers are located
- **Pitch variation**: Higher pitch for dangers above, lower pitch for dangers below
- **Rhythmic patterns**: Different timing patterns indicate direction
- **Proximity warnings**: Listen carefully to avoid hidden dangers
5. **Open Navigation**: Move freely through the field - only the outer boundary blocks you
6. **Find the Exit**: Navigate to the green flag (🏁) to complete the level
7. **Headphone Recommended**: Use headphones or good speakers for optimal directional audio experience
7. **Challenge**: Complete the field without touching any dangerous squares!
8. **Headphone Recommended**: Use headphones or good speakers for optimal directional audio experience
## Game Controls

View File

@ -12,8 +12,8 @@
<h1>Danger Field Game</h1>
<div class="game-info">
<p>Use WASD or Arrow Keys to move</p>
<p class="visual-warning">⚠️ Red squares are visually dangerous!</p>
<p class="audio-warning">🔊 Listen carefully - directional audio warns of hidden dangers!</p>
<p class="visual-warning">⚠️ Red squares are deadly - avoid them!</p>
<p class="audio-warning">🔊 Hidden dangers end the game - listen carefully!</p>
<p class="audio-hint">🎧 Use headphones for best directional audio experience</p>
</div>
<canvas id="gameCanvas" width="800" height="600"></canvas>

View File

@ -181,6 +181,24 @@ export class AudioSystem {
}, 200);
}
async playGameOverSound() {
await this.ensureAudioContext();
// Create a descending game over sound
const notes = [330, 294, 262, 220]; // E, D, C, A (descending)
notes.forEach((frequency, index) => {
setTimeout(() => {
this.createOscillator(frequency, 'sawtooth', 0.5);
}, index * 150);
});
// Add a final low note
setTimeout(() => {
this.createOscillator(147, 'square', 1.0); // Low D
}, 600);
}
playMoveSound() {
if (!this.initialized) return;

View File

@ -80,21 +80,28 @@ export class Game {
}
handleVisualDanger() {
// Visual danger squares only provide vibration feedback (no audio)
if (this.vibrationEnabled && navigator.vibrate) {
navigator.vibrate([150, 50, 150]); // Quick double vibration
}
// Visual danger squares end the game
this.gameOver();
}
handleAudioDanger() {
// Audio danger squares provide both sound and vibration
// Audio danger squares end the game
this.gameOver();
}
gameOver() {
if (this.soundEnabled) {
this.audioSystem.playDangerSound();
this.audioSystem.playGameOverSound();
}
if (this.vibrationEnabled && navigator.vibrate) {
navigator.vibrate([200, 100, 200]); // Pattern: vibrate-pause-vibrate
navigator.vibrate([300, 100, 300, 100, 300]); // Game over vibration pattern
}
setTimeout(() => {
alert('Game Over! You stepped on a dangerous square.\nReturning to start...');
this.resetGame();
}, 500);
}
handleWin() {
@ -107,7 +114,7 @@ export class Game {
}
setTimeout(() => {
alert('Congratulations! You completed the labyrinth!');
alert('🎉 Congratulations! You survived the danger field!\nGenerating new challenge...');
this.resetGame();
}, 500);
}