- Two-timer architecture: game timer + 60fps render timer for smooth interpolation - Snake body: StreamGeometry path with teal gradient, rounded joins - Directional head with white eyes and dark pupils - Food: pulsating glow, highlight, green leaf animation - Modern dark theme (#0D1117), glassmorphism HUD - Speed indicator bar, score +N popup - High score persistence to JSON - All keyboard shortcuts: Arrows, WASD, Space/P pause, Enter start, R restart, Esc quit - Window resizable, 640x540 default New files: AnimationHelper.cs, HighScoreManager.cs, SnakeRenderer.cs
387 lines
15 KiB
C#
387 lines
15 KiB
C#
using Avalonia;
|
|
using Avalonia.Controls;
|
|
using Avalonia.Media;
|
|
using Snake.Core;
|
|
|
|
namespace Snake.Avalonia.Views;
|
|
|
|
/// <summary>
|
|
/// Custom control that renders the snake, food, and grid using Avalonia's DrawingContext.
|
|
/// All rendering is done in the Render override for maximum performance at 60fps.
|
|
/// </summary>
|
|
public sealed class SnakeRenderer : Control
|
|
{
|
|
// Grid
|
|
public int BoardWidth { get; set; } = 20;
|
|
public int BoardHeight { get; set; } = 15;
|
|
public double CellSize { get; set; } = 28;
|
|
|
|
// Snake state
|
|
public IReadOnlyList<Position>? Segments { get; set; }
|
|
public IReadOnlyList<Position>? PreviousSegments { get; set; }
|
|
public Direction SnakeDirection { get; set; } = Direction.Right;
|
|
|
|
// Food state
|
|
public Position FoodPosition { get; set; }
|
|
public bool FoodJustEaten { get; set; }
|
|
|
|
// Animation
|
|
public double InterpolationT { get; set; }
|
|
public double TotalElapsedSeconds { get; set; }
|
|
public double FoodEatenElapsed { get; set; }
|
|
|
|
// Score popup
|
|
public int ScorePopup { get; set; }
|
|
public double ScorePopupElapsed { get; set; }
|
|
public Position? ScorePopupPosition { get; set; }
|
|
|
|
// Colors
|
|
private static readonly IBrush BackgroundBrush = Brush.Parse("#0D1117");
|
|
private static readonly IBrush GridDotBrush = Brush.Parse("#1E3A3A");
|
|
private static readonly ISolidColorBrush SnakeHeadBrush = (ISolidColorBrush)Brush.Parse("#14B8A6");
|
|
private static readonly ISolidColorBrush SnakeBodyBrush = (ISolidColorBrush)Brush.Parse("#0D9488");
|
|
private static readonly ISolidColorBrush SnakeTailBrush = (ISolidColorBrush)Brush.Parse("#0F766E");
|
|
private static readonly ISolidColorBrush EyeWhiteBrush = Brushes.White;
|
|
private static readonly ISolidColorBrush EyePupilBrush = (ISolidColorBrush)Brush.Parse("#0D1117");
|
|
private static readonly ISolidColorBrush FoodBrush = (ISolidColorBrush)Brush.Parse("#EF4444");
|
|
private static readonly ISolidColorBrush FoodGlowBrush = (ISolidColorBrush)Brush.Parse("#F87171");
|
|
private static readonly ISolidColorBrush FoodHighlightBrush = (ISolidColorBrush)Brush.Parse("#FCA5A5");
|
|
private static readonly ISolidColorBrush ScorePopupBrush = (ISolidColorBrush)Brush.Parse("#FBBF24");
|
|
private static readonly ISolidColorBrush TrailBrush = (ISolidColorBrush)Brush.Parse("#0F766E");
|
|
private static readonly IPen GridDotPen = new Pen(GridDotBrush, 2);
|
|
private static readonly IPen ScorePopupPen = new Pen(ScorePopupBrush, 1);
|
|
|
|
static SnakeRenderer()
|
|
{
|
|
// We invalidate manually from the render timer, no AffectsRender needed
|
|
}
|
|
|
|
public override void Render(DrawingContext context)
|
|
{
|
|
var width = Bounds.Width;
|
|
var height = Bounds.Height;
|
|
|
|
// Background
|
|
context.FillRectangle(BackgroundBrush, new Rect(0, 0, width, height));
|
|
|
|
// Draw grid (subtle dots)
|
|
DrawGrid(context, width, height);
|
|
|
|
// Draw trail
|
|
if (Segments != null && PreviousSegments != null && PreviousSegments.Count > 0)
|
|
DrawTrail(context);
|
|
|
|
// Draw food
|
|
DrawFood(context);
|
|
|
|
// Draw snake
|
|
if (Segments != null && Segments.Count > 0)
|
|
DrawSnake(context);
|
|
|
|
// Draw score popup
|
|
if (ScorePopup > 0 && ScorePopupElapsed < 1.5)
|
|
DrawScorePopup(context);
|
|
}
|
|
|
|
private void DrawGrid(DrawingContext context, double width, double height)
|
|
{
|
|
for (var x = 0; x < BoardWidth; x++)
|
|
{
|
|
for (var y = 0; y < BoardHeight; y++)
|
|
{
|
|
var cx = x * CellSize + CellSize * 0.5;
|
|
var cy = y * CellSize + CellSize * 0.5;
|
|
context.DrawEllipse(GridDotBrush, null, new Point(cx, cy), 1.0, 1.0);
|
|
}
|
|
}
|
|
|
|
// Subtle border
|
|
var borderRect = new Rect(0, 0, BoardWidth * CellSize, BoardHeight * CellSize);
|
|
context.DrawRectangle(new Pen(Brush.Parse("#1E3A3A"), 1), borderRect);
|
|
}
|
|
|
|
private void DrawTrail(DrawingContext context)
|
|
{
|
|
if (Segments == null || PreviousSegments == null || PreviousSegments.Count == 0)
|
|
return;
|
|
|
|
// Draw a subtle trail for the last few segments behind the snake
|
|
var trailLength = Math.Min(3, PreviousSegments.Count);
|
|
for (var i = 0; i < trailLength; i++)
|
|
{
|
|
var prevIdx = PreviousSegments.Count - 1 - i;
|
|
if (prevIdx < 0) break;
|
|
|
|
var pos = PreviousSegments[prevIdx];
|
|
var centerX = pos.X * CellSize + CellSize * 0.5;
|
|
var centerY = pos.Y * CellSize + CellSize * 0.5;
|
|
var radius = CellSize * 0.3 * (1.0 - i * 0.3);
|
|
var opacity = 0.15 - i * 0.05;
|
|
if (opacity <= 0) break;
|
|
|
|
context.DrawEllipse(
|
|
new SolidColorBrush(TrailBrush.Color, opacity),
|
|
null,
|
|
new Point(centerX, centerY),
|
|
radius, radius);
|
|
}
|
|
}
|
|
|
|
private void DrawSnake(DrawingContext context)
|
|
{
|
|
if (Segments == null || Segments.Count == 0) return;
|
|
|
|
var t = InterpolationT;
|
|
var segmentsList = Segments;
|
|
var prevList = PreviousSegments;
|
|
|
|
// Build path for body (all segments except head)
|
|
var bodyGeometry = new StreamGeometry();
|
|
using (var ctx = bodyGeometry.Open())
|
|
{
|
|
for (var i = segmentsList.Count - 1; i >= 1; i--)
|
|
{
|
|
var current = segmentsList[i];
|
|
var (vx, vy) = GetVisualPosition(current, i, t);
|
|
|
|
if (i == segmentsList.Count - 1 && segmentsList.Count > 2)
|
|
{
|
|
ctx.BeginFigure(new Point(vx, vy), false);
|
|
}
|
|
else if (i == segmentsList.Count - 1)
|
|
{
|
|
ctx.BeginFigure(new Point(vx, vy), false);
|
|
}
|
|
|
|
// Draw line segment
|
|
if (i > 1)
|
|
{
|
|
var (px, py) = GetVisualPosition(segmentsList[i - 1], i - 1, t);
|
|
ctx.LineTo(new Point(px, py));
|
|
}
|
|
}
|
|
|
|
if (segmentsList.Count >= 2)
|
|
{
|
|
var (hx, hy) = GetVisualPosition(segmentsList[0], 0, t);
|
|
ctx.LineTo(new Point(hx, hy));
|
|
}
|
|
}
|
|
|
|
// Calculate body thickness based on segment position (tail thinner)
|
|
var maxThickness = CellSize * 0.7;
|
|
var minThickness = CellSize * 0.35;
|
|
|
|
// Draw body as a thick stroke
|
|
var bodyThickness = Math.Max(minThickness, maxThickness * 0.85);
|
|
var bodyPen = new Pen(SnakeBodyBrush, bodyThickness, lineCap: PenLineCap.Round, lineJoin: PenLineJoin.Round);
|
|
context.DrawGeometry(null, bodyPen, bodyGeometry);
|
|
|
|
// Draw a slightly thinner inner stroke for gradient effect
|
|
if (segmentsList.Count >= 2)
|
|
{
|
|
var innerPen = new Pen(
|
|
new SolidColorBrush(SnakeHeadBrush.Color, 0.4),
|
|
bodyThickness * 0.5,
|
|
lineCap: PenLineCap.Round,
|
|
lineJoin: PenLineJoin.Round);
|
|
context.DrawGeometry(null, innerPen, bodyGeometry);
|
|
}
|
|
|
|
// Draw head
|
|
DrawHead(context, t);
|
|
|
|
// Draw eyes
|
|
DrawEyes(context, t);
|
|
}
|
|
|
|
private void DrawHead(DrawingContext context, double t)
|
|
{
|
|
if (Segments == null || Segments.Count == 0) return;
|
|
|
|
var (cx, cy) = GetVisualPosition(Segments[0], 0, t);
|
|
var dir = SnakeDirection;
|
|
var headSize = CellSize * 0.45;
|
|
|
|
// Rounded triangle/arrow pointing in movement direction
|
|
var headGeo = new StreamGeometry();
|
|
using (var ctx = headGeo.Open())
|
|
{
|
|
Point tip, left, right;
|
|
switch (dir)
|
|
{
|
|
case Direction.Right:
|
|
tip = new Point(cx + headSize, cy);
|
|
left = new Point(cx - headSize * 0.7, cy - headSize * 0.7);
|
|
right = new Point(cx - headSize * 0.7, cy + headSize * 0.7);
|
|
break;
|
|
case Direction.Left:
|
|
tip = new Point(cx - headSize, cy);
|
|
left = new Point(cx + headSize * 0.7, cy - headSize * 0.7);
|
|
right = new Point(cx + headSize * 0.7, cy + headSize * 0.7);
|
|
break;
|
|
case Direction.Up:
|
|
tip = new Point(cx, cy - headSize);
|
|
left = new Point(cx + headSize * 0.7, cy + headSize * 0.7);
|
|
right = new Point(cx - headSize * 0.7, cy + headSize * 0.7);
|
|
break;
|
|
case Direction.Down:
|
|
tip = new Point(cx, cy + headSize);
|
|
left = new Point(cx - headSize * 0.7, cy - headSize * 0.7);
|
|
right = new Point(cx + headSize * 0.7, cy - headSize * 0.7);
|
|
break;
|
|
default:
|
|
tip = new Point(cx + headSize, cy);
|
|
left = new Point(cx - headSize * 0.7, cy - headSize * 0.7);
|
|
right = new Point(cx - headSize * 0.7, cy + headSize * 0.7);
|
|
break;
|
|
}
|
|
|
|
ctx.BeginFigure(tip, true);
|
|
ctx.LineTo(left);
|
|
ctx.LineTo(right);
|
|
ctx.LineTo(tip); // Close back
|
|
}
|
|
|
|
// Fill head with gradient
|
|
var headFill = new SolidColorBrush(SnakeHeadBrush.Color);
|
|
context.DrawGeometry(headFill, null, headGeo);
|
|
|
|
// Highlight edge
|
|
var headEdgePen = new Pen(
|
|
new SolidColorBrush(SnakeHeadBrush.Color, 0.8),
|
|
1.5,
|
|
lineCap: PenLineCap.Round,
|
|
lineJoin: PenLineJoin.Round);
|
|
context.DrawGeometry(null, headEdgePen, headGeo);
|
|
}
|
|
|
|
private void DrawEyes(DrawingContext context, double t)
|
|
{
|
|
if (Segments == null || Segments.Count == 0) return;
|
|
|
|
var (cx, cy) = GetVisualPosition(Segments[0], 0, t);
|
|
var dir = SnakeDirection;
|
|
|
|
// Eye offset from center based on direction
|
|
var eyeOffset = CellSize * 0.22;
|
|
var eyeRadius = CellSize * 0.1;
|
|
var pupilRadius = eyeRadius * 0.55;
|
|
|
|
(double ex1, double ey1, double ex2, double ey2) = dir switch
|
|
{
|
|
Direction.Right => (cx + eyeOffset * 0.3, cy - eyeOffset, cx + eyeOffset * 0.3, cy + eyeOffset),
|
|
Direction.Left => (cx - eyeOffset * 0.3, cy - eyeOffset, cx - eyeOffset * 0.3, cy + eyeOffset),
|
|
Direction.Up => (cx - eyeOffset, cy - eyeOffset * 0.3, cx + eyeOffset, cy - eyeOffset * 0.3),
|
|
Direction.Down => (cx - eyeOffset, cy + eyeOffset * 0.3, cx + eyeOffset, cy + eyeOffset * 0.3),
|
|
_ => (cx + eyeOffset * 0.3, cy - eyeOffset, cx + eyeOffset * 0.3, cy + eyeOffset),
|
|
};
|
|
|
|
// White of eyes
|
|
context.DrawEllipse(EyeWhiteBrush, null, new Point(ex1, ey1), eyeRadius, eyeRadius);
|
|
context.DrawEllipse(EyeWhiteBrush, null, new Point(ex2, ey2), eyeRadius, eyeRadius);
|
|
|
|
// Pupils (slightly offset towards movement direction)
|
|
var pupilShiftX = dir switch { Direction.Right => 1.5, Direction.Left => -1.5, _ => 0 };
|
|
var pupilShiftY = dir switch { Direction.Down => 1.5, Direction.Up => -1.5, _ => 0 };
|
|
|
|
context.DrawEllipse(EyePupilBrush, null,
|
|
new Point(ex1 + pupilShiftX, ey1 + pupilShiftY), pupilRadius, pupilRadius);
|
|
context.DrawEllipse(EyePupilBrush, null,
|
|
new Point(ex2 + pupilShiftX, ey2 + pupilShiftY), pupilRadius, pupilRadius);
|
|
}
|
|
|
|
private void DrawFood(DrawingContext context)
|
|
{
|
|
var pos = FoodPosition;
|
|
var cx = pos.X * CellSize + CellSize * 0.5;
|
|
var cy = pos.Y * CellSize + CellSize * 0.5;
|
|
var baseRadius = CellSize * 0.38;
|
|
|
|
// Pulsating glow
|
|
var glowRadius = AnimationHelper.PulsateRadius(baseRadius * 1.6, TotalElapsedSeconds, 0.12, 2.5);
|
|
var glowBrush = new SolidColorBrush(FoodGlowBrush.Color, 0.25);
|
|
context.DrawEllipse(glowBrush, null, new Point(cx, cy), glowRadius, glowRadius);
|
|
|
|
// Outer glow ring
|
|
var outerGlow = new SolidColorBrush(FoodGlowBrush.Color, 0.15);
|
|
context.DrawEllipse(outerGlow, null, new Point(cx, cy), glowRadius * 1.3, glowRadius * 1.3);
|
|
|
|
// Main food circle
|
|
var foodRadius = AnimationHelper.PulsateRadius(baseRadius, TotalElapsedSeconds, 0.06, 2.5);
|
|
context.DrawEllipse(FoodBrush, null, new Point(cx, cy), foodRadius, foodRadius);
|
|
|
|
// Highlight shine
|
|
var highlightX = cx - foodRadius * 0.35;
|
|
var highlightY = cy - foodRadius * 0.35;
|
|
var highlightRadius = foodRadius * 0.3;
|
|
context.DrawEllipse(FoodHighlightBrush, null,
|
|
new Point(highlightX, highlightY), highlightRadius, highlightRadius);
|
|
|
|
// Small green leaf/stem on top
|
|
var stemBaseX = cx;
|
|
var stemBaseY = cy - foodRadius;
|
|
var stemTipX = cx + foodRadius * 0.15;
|
|
var stemTipY = cy - foodRadius - CellSize * 0.18;
|
|
|
|
var stemGeo = new StreamGeometry();
|
|
using (var ctx = stemGeo.Open())
|
|
{
|
|
ctx.BeginFigure(new Point(stemBaseX - 1.5, stemBaseY), false);
|
|
ctx.LineTo(new Point(stemTipX, stemTipY));
|
|
ctx.LineTo(new Point(stemBaseX + 2, stemBaseY + 1));
|
|
ctx.LineTo(new Point(stemBaseX - 1, stemBaseY + 2));
|
|
}
|
|
context.DrawGeometry(Brush.Parse("#22C55E"), null, stemGeo);
|
|
|
|
// Small leaf
|
|
var leafGeo = new StreamGeometry();
|
|
using (var ctx = leafGeo.Open())
|
|
{
|
|
ctx.BeginFigure(new Point(stemTipX, stemTipY), false);
|
|
ctx.LineTo(new Point(stemTipX + CellSize * 0.1, stemTipY - CellSize * 0.06));
|
|
ctx.LineTo(new Point(stemTipX + CellSize * 0.05, stemTipY + CellSize * 0.02));
|
|
}
|
|
context.DrawGeometry(Brush.Parse("#22C55E"), null, leafGeo);
|
|
}
|
|
|
|
private void DrawScorePopup(DrawingContext context)
|
|
{
|
|
if (!ScorePopupPosition.HasValue) return;
|
|
|
|
var pos = ScorePopupPosition.Value;
|
|
var cx = pos.X * CellSize + CellSize * 0.5;
|
|
var cy = pos.Y * CellSize + CellSize * 0.5;
|
|
var opacity = AnimationHelper.FadeOutOpacity(ScorePopupElapsed, 1.2);
|
|
if (opacity <= 0) return;
|
|
|
|
var offsetY = ScorePopupElapsed * CellSize * -2.0; // Float upward
|
|
var y = cy + offsetY;
|
|
|
|
var text = $"+{ScorePopup}";
|
|
var formattedText = new FormattedText(
|
|
text,
|
|
System.Globalization.CultureInfo.InvariantCulture,
|
|
FlowDirection.LeftToRight,
|
|
new Typeface("Inter, Arial, sans-serif"),
|
|
CellSize * 0.7,
|
|
new SolidColorBrush(ScorePopupBrush.Color, opacity * 0.9));
|
|
|
|
var textX = cx - formattedText.Width / 2;
|
|
context.DrawText(formattedText, new Point(textX, y - formattedText.Height / 2));
|
|
}
|
|
|
|
private (double X, double Y) GetVisualPosition(Position pos, int segmentIndex, double t)
|
|
{
|
|
if (Segments == null)
|
|
return (pos.X * CellSize + CellSize * 0.5, pos.Y * CellSize + CellSize * 0.5);
|
|
|
|
var from = PreviousSegments != null && PreviousSegments.Count > 0
|
|
? AnimationHelper.GetPreviousPosition(segmentIndex, Segments, PreviousSegments, SnakeDirection)
|
|
: pos;
|
|
|
|
var useEasing = segmentIndex == 0; // Head gets easing for snappy feel
|
|
return AnimationHelper.InterpolatePosition(from, pos, t, CellSize, useEasing);
|
|
}
|
|
}
|