NeonSnake: stop music when snake dies or when leaving the page. Add WASM AOT related build parameters.

Author: iSeiryu

.github/workflows/main.yml

@@ -34,7 +34,7 @@ jobs:
       - name: Publish .NET Project
         run: dotnet publish BlazorExperiments/BlazorExperiments.UI.csproj -c Release -o release --nologo
       - name: Publish .NET Project with AOT
-        run: dotnet publish BlazorExperiments/BlazorExperiments.UI.csproj -c Release -p:RunAOTCompilation=true -p:WasmStripILAfterAOT=true -o release-aot --nologo
+        run: dotnet publish BlazorExperiments/BlazorExperiments.UI.csproj -c Release -p:RunAOTCompilation=true -p:WasmStripILAfterAOT=true -p:PublishTrimmed=true -p:TrimMode=full -o release-aot --nologo
       - name: check current directory
         run: ls -la release-aot/wwwroot && pwd 
       - name: Fix base path for Blazor AOT app

BlazorExperiments/BlazorExperiments.UI.csproj

@@ -7,8 +7,8 @@
     <InvariantGlobalization>true</InvariantGlobalization>
     <BlazorEnableTimeZoneSupport>false</BlazorEnableTimeZoneSupport>
     <BlazorWebAssemblyPreserveCollationData>false</BlazorWebAssemblyPreserveCollationData>
-    <WasmExceptionHandling>false</WasmExceptionHandling>
-    <WasmSIMD>true</WasmSIMD>
+    <WasmEnableExceptionHandling>true</WasmEnableExceptionHandling>
+    <WasmEnableSIMD>true</WasmEnableSIMD>
   </PropertyGroup>
 
   <ItemGroup>

BlazorExperiments/Layout/NavMenu.razor

@@ -14,9 +14,14 @@
                 <span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> Home
             </NavLink>
         </div>
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="neon-snake">
+                <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Neon Snake
+            </NavLink>
+        </div>
         <div class="nav-item px-3">
             <NavLink class="nav-link" href="snake">
-                <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Snake
+                <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Old Snake
             </NavLink>
         </div>
         <div class="nav-item px-3">

BlazorExperiments/Pages/NeonSnake.razor.cs

@@ -10,7 +10,7 @@
 
 namespace BlazorExperiments.UI.Pages;
 
-public partial class NeonSnake {
+public partial class NeonSnake : IAsyncDisposable {
     const int KeyUp = 38;
     const int KeyDown = 40;
     const int KeyLeft = 37;
@@ -39,6 +39,7 @@ public partial class NeonSnake {
     string _scoreText = "Score: 0";
     string _bestText = "Best: 0";
     bool _hudDirty = true;
+    bool _loopInProgress = false;
     const string BestScoreKey = "neonSnakeBestScore";
 
     public async Task InitializeAsync() {
@@ -72,9 +73,11 @@ public async Task InitializeAsync() {
     }
 
     private async ValueTask LoopAsync(ElapsedEventArgs elapsedEvent) {
+        if (_loopInProgress) return;
+
+        _loopInProgress = true;
         var now = elapsedEvent.SignalTime;
         var dt = (now - _lastTick).TotalMilliseconds;
-        if (dt < 16.67) return;
         _lastTick = now;
 
         var scoreBefore = _snake.Score;
@@ -89,6 +92,7 @@ private async ValueTask LoopAsync(ElapsedEventArgs elapsedEvent) {
         if (_snake.Score > scoreBefore) await PlaySoundAsync("neonSnakeAudio.playEatSound");
         if (_snake.Health < healthBefore) await PlaySoundAsync("neonSnakeAudio.playHitSound");
         if (!deadBefore && _snake.Dead) {
+            await PlaySoundAsync("neonSnakeAudio.stopMusic");
             await PlaySoundAsync("neonSnakeAudio.playDeathSound");
             await JS.InvokeVoidAsync("localStorage.setItem", BestScoreKey, _snake.BestScore);
         }
@@ -101,6 +105,7 @@ private async ValueTask LoopAsync(ElapsedEventArgs elapsedEvent) {
 
         await using var batch = _canvas.Context.CreateBatch();
         await DrawAsync(batch);
+        _loopInProgress = false;
     }
 
     async ValueTask PlaySoundAsync(string fn) {
@@ -622,7 +627,8 @@ async ValueTask DrawMonstersAsync(Batch2D ctx) {
                     await ctx.ArcAsync(ex, ey, eyeR * 0.52, 0, DoublePI);
                     await ctx.FillAsync(FillRule.NonZero);
                 }
-            } else {
+            }
+            else {
                 // Sleeping: closed-eye lines
                 await ctx.StrokeStyleAsync("rgba(180,140,255,0.7)");
                 await ctx.LineWidthAsync(2);
@@ -855,14 +861,19 @@ await ctx.FillStyleAsync(0, NeonSnakeGame.Snake.HudH, 0, _screenH,
         await ctx.TextAlignAsync(TextAlign.Start);
     }
 
+    async ValueTask RestartGame() {
+        _snake = new NeonSnakeGame.Snake(_cellSize, _canvas.CellsPerRow, _visibleRows);
+        _hudDirty = true;
+        _lastTick = DateTime.UtcNow;
+        _ = PlaySoundAsync("neonSnakeAudio.startMusic");
+    }
+
     #region Input Handling
     void HandleInput(KeyboardEventArgs e) {
         if (_snake is null) return;
 
         if (_snake.ShowDeathScreen && (e.Code == "Space" || e.Key == " " || e.Key == "Spacebar")) {
-            _snake = new NeonSnakeGame.Snake(_cellSize, _canvas.CellsPerRow, _visibleRows);
-            _hudDirty = true;
-            _lastTick = DateTime.UtcNow;
+            _ = RestartGame();
             return;
         }
 
@@ -887,9 +898,7 @@ void HandleInput(KeyboardEventArgs e) {
 
     void HandleTouchStart(TouchEventArgs e) {
         if (_snake.ShowDeathScreen) {
-            _snake = new NeonSnakeGame.Snake(_cellSize, _canvas.CellsPerRow, _visibleRows);
-            _hudDirty = true;
-            _lastTick = DateTime.UtcNow;
+            _ = RestartGame();
             return;
         }
 
@@ -918,4 +927,8 @@ void HandleTouchMove(TouchEventArgs e) {
         _previousTouch = e.Touches[^1];
     }
     #endregion
+
+    public async ValueTask DisposeAsync() {
+        await PlaySoundAsync("neonSnakeAudio.dispose");
+    }
 }

BlazorExperiments/wwwroot/js/neon-snake-audio.js

@@ -1,13 +1,10 @@
 window.neonSnakeAudio = (() => {
-    const AudioCtx = window.AudioContext || window.webkitAudioContext;
     let audioCtx = null;
     let masterGain = null;
 
     const getCtx = () => {
-        if (!AudioCtx) return null;
-
         if (!audioCtx) {
-            audioCtx = new AudioCtx();
+            audioCtx = new AudioContext();
             masterGain = audioCtx.createGain();
             masterGain.connect(audioCtx.destination);
         }
@@ -117,8 +114,6 @@ window.neonSnakeAudio = (() => {
         }
     };
 
-    audioCtx = getCtx();
-
     // ── Monster death: electronic zap burst ─────────────────────────────────
     const playMonsterDeathSound = () => {
         try {
@@ -191,6 +186,8 @@ window.neonSnakeAudio = (() => {
         { f: 220,   v: 0.075 }, // A3 (accent)
     ];
 
+    audioCtx = getCtx();
+
     let musicPlaying = false;
     let musicNoteIndex = 0;
     let nextNoteTime = 0;
@@ -293,13 +290,19 @@ window.neonSnakeAudio = (() => {
         droneOscs = []; droneGains = [];
     };
 
+    const dispose = () => {
+        audioCtx && audioCtx.close();
+        audioCtx = null;
+    }
+
     return {
         playEatSound,
         playHitSound,
         playDeathSound,
         playMonsterDeathSound,
         playEggHatchSound,
         startMusic,
-        stopMusic
+        stopMusic,
+        dispose
     };
 })();