Blazor - движущиеся пузырьки с использованием таймера и без использования JS и CSS ⇐ C#

[Anonymous]

Я новичок в Blazor и нуждаюсь в вашей помощи, пожалуйста. Мне нужно создать страницу, такую ​​как cryptobubbles.net, которая имеет движущиеся пузырьки, и они меняют направление, когда границы сталкиваются, а также смотрят на эффект сопротивления мыши, чтобы переместить каждый пузырь. В моем проекте нельзя использовать JS и CSS. > < /p>
Я попробовал код ниже, но результат - это не то, что я ищу. < /p>



@foreach (var bubble in bubbles)
{

}


< /code>
раздел кода: < /p>
protected override async Task OnInitializedAsync()
{
// Initialize bubbles
for (int i = 0; i < 30; i++)
{
var bubble = new Bubble
{
X = new Random().Next(10, 1400),
Y = new Random().Next(10, 1400),
Radius = new Random().Next(30, 60),
SpeedX = new Random().NextDouble() * 2 - 1, // Speed between -1 and 1
SpeedY = new Random().NextDouble() * 2 - 1, // Speed between -1 and 1
Color = $"hsl({new Random().Next(360)}, 100%, 50%)"
};

bubbles.Add(bubble);
}

// Set up a timer to update bubbles' positions
timer = new Timer(30); // 30 milliseconds interval
timer.Elapsed += TimerElapsed;
timer.Start();

await base.OnInitializedAsync();
}

private void TimerElapsed(object sender, ElapsedEventArgs e)
{
foreach (var bubble in bubbles)
{
// Update bubble's position
bubble.X += bubble.SpeedX;
bubble.Y += bubble.SpeedY;

// Check for collisions with boundaries
if (bubble.X - bubble.Radius < 0 || bubble.X + bubble.Radius > 300)
bubble.SpeedX *= -1; // Reverse direction if hits the edge

if (bubble.Y - bubble.Radius < 0 || bubble.Y + bubble.Radius > 500)
bubble.SpeedY *= -1; // Reverse direction if hits the edge

// Check for collisions with other bubbles
foreach (var otherBubble in bubbles)
{
if (bubble != otherBubble && bubble.CollidesWith(otherBubble))
{
// Change direction after collision
bubble.SpeedX *= -1;
bubble.SpeedY *= -1;
otherBubble.SpeedX *= -1;
otherBubble.SpeedY *= -1;
}
}
}

InvokeAsync(StateHasChanged); // Update the UI
}

public async ValueTask DisposeAsync()
{
// Dispose timer when no longer needed
if (timer != null)
{
timer.Stop();
timer.Dispose();
}
}

public class Bubble
{
public double X { get; set; }
public double Y { get; set; }
public double Radius { get; set; }
public double SpeedX { get; set; }
public double SpeedY { get; set; }
public string Color { get; set; }

public bool CollidesWith(Bubble other)
{
var dx = X - other.X;
var dy = Y - other.Y;
var distance = Math.Sqrt(dx * dx + dy * dy);
return distance < (Radius + other.Radius);
}
}


Подробнее здесь: https://stackoverflow.com/questions/794 ... js-and-css