NeonSnake: improve canvas drawing on mobile devices

Author: iSeiryu

BlazorExperiments/Layout/MainLayout.razor

@@ -9,7 +9,7 @@
     </div>
 
     <main>
-        <article class="content px-4">
+        <article class="content px-2">
             @Body
         </article>
     </main>

BlazorExperiments/Models/NeonSnakeGame/Snake.cs

@@ -12,7 +12,6 @@ public class Snake {
     public const double DeathAnimDuration = 1500;
 
     public readonly Vector2[] CenterCoords;
-    readonly Dictionary<(int Col, int Row), int> _validCells = [];
 
     public List<SnakeBodyPart> Parts = [];
     public SnakeBodyPart Head => Parts[0];
@@ -33,7 +32,10 @@ public class Snake {
     public double DeathTimer;
     public List<DeathSegment> DeathSegments = [];
     public bool ShowDeathScreen;
-    public Queue<int> KeyQueue = new();
+    public Queue<int> KeyQueue = new(3);
+
+    readonly double _eatDistSq;
+    readonly Dictionary<(int Col, int Row), int> _validCells;
 
     static readonly string[] EatColors = ["#ffe080", "#ffb840", "#fff4c0", "#ff9420", Neon.TextAccent];
     static readonly string[] DeathColors = [Neon.Danger, "#ff6a9d", Neon.TextAccent, "#8b5dff", "#ffc2ff"];
@@ -46,6 +48,9 @@ public Snake(int cellSize, int visibleCols, int visibleRows) {
         Rows = visibleRows * 5;
         WorldW = Cols * CellSize;
         WorldH = Rows * CellSize;
+        _eatDistSq = CellSize * (double)CellSize;
+        _validCells = new(Rows * Cols);
+
         CenterCoords = new Vector2[Cols * Rows];
         float centerOffset = CellSize * 0.5f;
         for (int y = 0; y < Rows; y++)
@@ -67,8 +72,9 @@ public Snake(int cellSize, int visibleCols, int visibleRows) {
         }
 
         int numObstacles = (int)(Cols * Rows * 0.02);
+        const int numFood = 50;
         for (int i = 0; i < numObstacles; i++) SpawnObstacle();
-        for (int i = 0; i < 50; i++) SpawnFood();
+        for (int i = 0; i < numFood; i++) SpawnFood();
     }
 
     public int GetIndex(int col, int row) {
@@ -130,7 +136,7 @@ bool EggBlocked(int x, int y, Egg skipEgg) {
     }
 
     void StepEgg(Egg egg) {
-        Span<int> order = stackalloc int[4] { 0, 1, 2, 3 };
+        Span<int> order = [0, 1, 2, 3];
         for (int i = order.Length - 1; i > 0; i--) {
             int j = Random.Shared.Next(i + 1);
             (order[i], order[j]) = (order[j], order[i]);
@@ -236,6 +242,11 @@ public void Update(double deltaTime, double screenW, double screenH) {
         }
 
         if (Dead) {
+            if (DeathTimer >= DeathAnimDuration) {
+                ShowDeathScreen = true;
+                return;
+            }
+
             DeathTimer += deltaTime;
             double progress = Math.Min(1, DeathTimer / DeathAnimDuration);
             for (int si = 0; si < DeathSegments.Count; si++) {
@@ -246,7 +257,6 @@ public void Update(double deltaTime, double screenW, double screenH) {
                 seg.Alpha = Math.Max(0, 1 - progress * 0.8);
                 DeathSegments[si] = seg;
             }
-            if (DeathTimer >= DeathAnimDuration) ShowDeathScreen = true;
             return;
         }
 
@@ -300,11 +310,11 @@ public void Update(double deltaTime, double screenW, double screenH) {
     }
 
     void CheckFoodCollision() {
-        double eatDistSq = CellSize * (double)CellSize;
+
         for (int fi = Food.Count - 1; fi >= 0; fi--) {
             var egg = Food[fi];
             double dx = Head.CurrentScreenPos.X - egg.ScreenX, dy = Head.CurrentScreenPos.Y - egg.ScreenY;
-            if (dx * dx + dy * dy >= eatDistSq) continue;
+            if (dx * dx + dy * dy >= _eatDistSq) continue;
             Score++;
             for (int p = 0; p < 8; p++) {
                 double angle = (p / 8.0) * Math.PI * 2 + Random.Shared.NextDouble() * 0.5;
@@ -336,6 +346,10 @@ void CheckFoodCollision() {
         }
     }
 
+    public void AddCommand(int key) {
+        if (KeyQueue.Count < 3) KeyQueue.Enqueue(key);
+    }
+
     void ProcessInput() {
         bool processed = false;
         var dir = Head.Direction;

BlazorExperiments/Pages/NeonSnake.razor.cs

@@ -708,11 +708,9 @@ async ValueTask DrawHeartAsync(Batch2D ctx, double cx, double cy, double size, s
         await ctx.BezierCurveToAsync(cx + size, cy - size * 0.6, cx, cy - size * 0.2, cx, cy + size * 0.35);
         await ctx.ClosePathAsync();
         await ctx.FillAsync(FillRule.NonZero);
-        if (!isOff) {
-            await ctx.RestoreAsync();
-        }
 
         if (!isOff) {
+            await ctx.RestoreAsync();
             await ctx.FillStyleAsync("rgba(255,255,255,0.45)");
             await ctx.BeginPathAsync();
             await ctx.ArcAsync(cx - size * 0.35, cy + size * 0.05, size * 0.25, 0, DoublePI);
@@ -776,7 +774,7 @@ void HandleInput(KeyboardEventArgs e) {
         };
 
         if (mapped.HasValue) {
-            _snake.KeyQueue.Enqueue(mapped.Value);
+            _snake.AddCommand(mapped.Value);
         }
     }
 
@@ -804,10 +802,10 @@ void HandleTouchMove(TouchEventArgs e) {
 
         // most significant
         if (Math.Abs(xDiff) > Math.Abs(yDiff)) {
-            _snake.KeyQueue.Enqueue(xDiff > 0 ? KeyLeft : KeyRight);
+            _snake.AddCommand(xDiff > 0 ? KeyLeft : KeyRight);
         }
         else {
-            _snake.KeyQueue.Enqueue(yDiff > 0 ? KeyUp : KeyDown);
+            _snake.AddCommand(yDiff > 0 ? KeyUp : KeyDown);
         }
 
         _previousTouch = e.Touches[^1];

BlazorExperiments/Shared/CanvasComponent.razor

@@ -5,7 +5,7 @@
 
 <div id="canvas-container"
      tabindex="0"
-     style="width: @(Width + 4)px; height: @(Height + 4)px !important; display: grid; align-items: center; justify-content: center;touch-action: none;"
+     style="width: @(Width + 4)px; height: @(Height + 4)px !important; display: grid; align-items: center; justify-content: center; touch-action: pinch-zoom;"
      @onkeydown="HandleKeyDown"
      @onkeydown:preventDefault="true"
      @onmouseup="@(async (mouseEventArgs) => await HandleMouseUp(mouseEventArgs))"

BlazorExperiments/Shared/CanvasComponent.razor.cs

@@ -9,10 +9,10 @@ namespace BlazorExperiments.UI.Shared;
 public partial class CanvasComponent : IAsyncDisposable {
     string _style = "";
     double _devicePixelRatio = 1;
-    const int Margin = 50;
+    const int Margin = 20;
     const int MediaMinWidth = 641;
     const int SideBarWidth = 250;
-    const double Interval = 1_000 / 60; // 60 fps
+    const double Interval = 1_000 / 30; // 60 fps
 
     double _fps = 0;