WPF játék - képek sorba rendezése

WPF játék - képek sorba rendezése
2015-02-21T17:27:22+01:00
2015-03-05T12:02:27+01:00
2022-10-15T23:20:37+02:00
maxiw
Sziasztok!

Egy olyan játékot szeretnék készíteni, ami drag&drop módon működik, és a lényege pedig az, hogy a képernyőn látható elemeket kell sorba rendezni. Teszem azt, legyen három négyzet, és akkor sikeres a játék szintje, ha a negyedik helyre is négyzetet "illesztünk". Tehát valamilyen szabály szerint folytatjuk a sorozatot. Tudnátok javaslatokat, hogy merre induljak el, ennek a készítésében? A drag&drop-ról rengeteget olvastam már a neten, viszont az még nem fogalmazódott meg bennem, hogy hogyan tudom leellenőrizni, hogy az elkészített sorozat helyes-e. A válaszokat előre is köszönöm! :)
Mutasd a teljes hozzászólást!
elég nehéz úgy segíteni, hogy nem látjuk pontosan mit szeretnél.
A canvas-t se értem igazán
egyszerű hekkeléssel

<Window x:Class="DragAndDrop.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:DragAndDrop" mc:Ignorable="d" Title="MainWindow" Height="600" Width="525"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="*"/> <RowDefinition Height="Auto"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <StackPanel Grid.Row="0" Grid.Column="0" Background="Yellow" Name="SourceStackPanel"> <Ellipse Name="RedEllipse" Height="50" Width="50" Fill="Red" MouseMove="ShapeMouseMove" AllowDrop="True"/> <Rectangle Name="GreenRectangle" Height="50" Width="50" Fill="Green" MouseMove="ShapeMouseMove" AllowDrop="True"/> <Ellipse Name="BlueEllipse" Height="50" Width="100" Fill="Blue" MouseMove="ShapeMouseMove" AllowDrop="True"/> <Rectangle Name="MagentaRectangle" Height="50" Width="200" Fill="Magenta" MouseMove="ShapeMouseMove" AllowDrop="True"/> <Ellipse Name="BlackEllipse" Height="50" Width="50" Fill="Black" MouseMove="ShapeMouseMove" AllowDrop="True"/> </StackPanel> <StackPanel Grid.Row="0" Grid.Column="1" Background="Cyan" AllowDrop="True" Drop="Grid_Drop" Name="TargetStackPanel"/> <TextBlock Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" Text="Right side in order:"/> <TextBox Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" Name="InfoTextBox"/> </Grid> </Window> using System.Linq; using System.Text; using System.Windows; using System.Windows.Input; using System.Windows.Shapes; namespace DragAndDrop { public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); } private void ShapeMouseMove(object sender, MouseEventArgs e) { var shape = sender as UIElement; if (shape != null && e.LeftButton == MouseButtonState.Pressed) { DragDrop.DoDragDrop(shape, shape, DragDropEffects.Copy); } } private void Grid_Drop(object sender, DragEventArgs e) { var formats = e.Data.GetFormats(); var shape = e.Data.GetData(formats[0]) as UIElement; SourceStackPanel.Children.Remove(shape); TargetStackPanel.Children.Add(shape); CreateInfo(); } private void CreateInfo() { var sb = new StringBuilder(); foreach(var uiChildren in TargetStackPanel.Children.OfType<Shape>()) { sb.Append(uiChildren.Name).Append("\r\n"); } InfoTextBox.Text = sb.ToString(); } } }


ha a TargetStackPanel-t egyszerűen átírod Canvas-ra, akkor is megy ha mindenáron canvas kell
Mutasd a teljes hozzászólást!

  • Erről is rengeteget tudsz olvasni, itt van mindjárt ez. Amire keresgélni érdemes, az a rendezés, elvégre az kell neked. Például mint a példában van egy listboxod és azon belül rendezel.
    Mutasd a teljes hozzászólást!
  • Jelenleg úgy néz ki a program, hogy van egy listboxom amiből a képeket ki tudom húzni egy canvasra. A kérdésem az lenne, hogy ezeket valami módon tudom rendezni? Vagy egy canvas-on nem tudom őket meghatározott sorrendbe visszakapni?
    Mutasd a teljes hozzászólást!
  • Sajnos még mindig nem sikerült megírnom a canvasen való rendezés részét. Gondoltam, hátha jó úgy, hogy a kihúzott képek X koordinátáját vizsgálom hogy melyik van előrébb. Ez sem sikerült, mert nem tudom, hogy hányadik húzás hajtódott végre a listboxból. Valakinek valami ötlet a rendezésre?
    Mutasd a teljes hozzászólást!
  • elég nehéz úgy segíteni, hogy nem látjuk pontosan mit szeretnél.
    A canvas-t se értem igazán
    egyszerű hekkeléssel

    <Window x:Class="DragAndDrop.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:DragAndDrop" mc:Ignorable="d" Title="MainWindow" Height="600" Width="525"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="*"/> <RowDefinition Height="Auto"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <StackPanel Grid.Row="0" Grid.Column="0" Background="Yellow" Name="SourceStackPanel"> <Ellipse Name="RedEllipse" Height="50" Width="50" Fill="Red" MouseMove="ShapeMouseMove" AllowDrop="True"/> <Rectangle Name="GreenRectangle" Height="50" Width="50" Fill="Green" MouseMove="ShapeMouseMove" AllowDrop="True"/> <Ellipse Name="BlueEllipse" Height="50" Width="100" Fill="Blue" MouseMove="ShapeMouseMove" AllowDrop="True"/> <Rectangle Name="MagentaRectangle" Height="50" Width="200" Fill="Magenta" MouseMove="ShapeMouseMove" AllowDrop="True"/> <Ellipse Name="BlackEllipse" Height="50" Width="50" Fill="Black" MouseMove="ShapeMouseMove" AllowDrop="True"/> </StackPanel> <StackPanel Grid.Row="0" Grid.Column="1" Background="Cyan" AllowDrop="True" Drop="Grid_Drop" Name="TargetStackPanel"/> <TextBlock Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" Text="Right side in order:"/> <TextBox Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" Name="InfoTextBox"/> </Grid> </Window> using System.Linq; using System.Text; using System.Windows; using System.Windows.Input; using System.Windows.Shapes; namespace DragAndDrop { public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); } private void ShapeMouseMove(object sender, MouseEventArgs e) { var shape = sender as UIElement; if (shape != null && e.LeftButton == MouseButtonState.Pressed) { DragDrop.DoDragDrop(shape, shape, DragDropEffects.Copy); } } private void Grid_Drop(object sender, DragEventArgs e) { var formats = e.Data.GetFormats(); var shape = e.Data.GetData(formats[0]) as UIElement; SourceStackPanel.Children.Remove(shape); TargetStackPanel.Children.Add(shape); CreateInfo(); } private void CreateInfo() { var sb = new StringBuilder(); foreach(var uiChildren in TargetStackPanel.Children.OfType<Shape>()) { sb.Append(uiChildren.Name).Append("\r\n"); } InfoTextBox.Text = sb.ToString(); } } }


    ha a TargetStackPanel-t egyszerűen átírod Canvas-ra, akkor is megy ha mindenáron canvas kell
    Mutasd a teljes hozzászólást!
  • Köszönöm a kódot! Segített :) 

    Az alap koncepció az egyébként, hogy van baloldalt egy listboxom, amiben szerepel 3 kép. Ezeket ki tudom húzni egy canvasra(nem ragaszkodom hozzá hogy canvas legyen), és ott is lehet őket mozgatni. A lényeg az lenne, hogy a 3 képet egy bizonyos sorrendben kapjam vissza. Tehát van 3 kép, teszem azt kör, négyzet, háromszög. A canvasra úgy kell kihúzni hogy ez ilyen sorrendben legyen - négyzet, háromszög, kör. És a problémám az, hogy a sorrendet miként kaphatom vissza a canvasról.
    Mutasd a teljes hozzászólást!
  • Ne a canvasról keress vissza. (bár a tartalmat visszakeresheted onnan, de nem az a célszerűbb).

    Létrehozol egy strukturát, ami leírja a kép azonosítóját és a canvasra helyezés pozícióját. (property lehet, nem 'valós' adatot tartalmaz, hanem kapja a kép adatát ill. a canvasról a pozíciót)

    Amikor a canvasra húzol egy képet, akkor felveszed a listád elemei közé és ezzel eltárolod hogy látható és hogy az "odaejtés" pozíciója mi.
    Ha mozgatja a canvason, akkor aktualizálódik a pozíció infód a listában.

    A listádat rendezed minden canvas változtatásra egy algoritmussal (ami megmondja az elemek 'sorrendjét'). [Érdemes a lista elemekre implementálni a comparáló interfacet. ]

    Minden rendezés után ellenőrzöd a 'megoldás' tartalommal és sorrendel, ha egyezik (vagy letelt az idő, de nem egyezik) vége a játéknak.
    Mutasd a teljes hozzászólást!
Tetszett amit olvastál? Szeretnél a jövőben is értesülni a hasonló érdekességekről?
abcd