Loading Breakout…

Mouse or ←/→ to move · Space launches · P pauses. The title screen, pause menu, HUD bindings, paddle, ball, and all 40 bricks are XAML — game systems only write coordinates and scores.

How it's built

From examples/breakout.rs — menus, HUD, paddle, ball, and all 40 bricks are XAML.

1. The playfield scales with the window

A 960x600 logical Canvas inside a Viewbox; bricks are generated markup through the same parser.

<Viewbox>
  <Canvas Width="960" Height="600">
    <Border x:Name="Brick_0_0" Canvas.Left="36" Canvas.Top="84" Width="104" Height="24" .../>
    <Border x:Name="Paddle" Canvas.Left="420" Canvas.Top="556" Width="120" Height="16"/>
    <Ellipse x:Name="Ball" Canvas.Left="473" Canvas.Top="520" Width="14" Height="14"/>
  </Canvas>
</Viewbox>
2. Physics writes Canvas offsets

Ball state lives in a resource; a system copies it into the XAML nodes.

if let Some(ball) = game.ball
    && let Ok(mut node) = nodes.get_mut(ball) {
    node.left = Val::Px(game.ball_pos.x);
    node.top = Val::Px(game.ball_pos.y);
}
3. Menus are overlay panels toggled by game phase

Title/pause/game-over screens are sibling Grids in a single-cell layout.

let panels = [("MenuPanel", *phase == Phase::Menu),
              ("PausePanel", *phase == Phase::Paused),
              ("GameOverPanel", *phase == Phase::GameOver)];
for (name, visible) in panels {
    if let Some(panel) = ui.by_name(name)
        && let Ok(mut node) = nodes.get_mut(panel) {
        node.display = if visible { Display::Grid } else { Display::None };
    }
}