En este tutorial crearemos un sencillo rompecabezas de un tamaño de 4×6 con 24 piezas que se podrán mover haciendo uso del mouse. En el siguiente video veras de lo que hablamos.
Necesitamos:
Nivel: Básico
Tiempo: 15 minutos
Proyecto
1. Crea un nuevo proyecto WPF Aplication que se llamara «Puzzle»
– Crea una carpeta «piezas»
– Crea una clase llamada Game.cs
– Al crear un proyecto WPF, se crea por defecto un archivo Window1.xaml, déjalo como esta, no lo borres.
2. Para este rompecabezas haremos uso de una imagen en formato JPG de 400×600 pixeles, utiliza la imagen que desees o puedes hacer uso de la imagen e este tutorial.
Utilizando un editor de imágenes, divide esta imagen en 24 piezas de 100×100 pixeles y nombralas del 1 al 24, es decir 1.jpg, 2.jpg. etc.
– Con el editor de imágenes crea una imagen de 100×100 pixeles de color blanco que se llamara noimage.jpg.
– En la carpeta «piezas» que se creo en el paso 1, clic derecho -> ADD -> EXISTING ITEM… y añade las 24 imágenes que forman el puzzle + la imagen en blanco.
3. Interfaz
Abre el archivo Window1.xaml y pega el siguiente código:
<Window x:Class="Puzzle.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Puzzle - https://www.jc-mouse.net/" Height="640" Width="540"> <Grid> <DockPanel Margin="0" Name="dockPanel1"> <Grid Name="gridMenu" DockPanel.Dock="Left" Margin="10"> <Grid.RowDefinitions> <RowDefinition Height="70" /> <RowDefinition Height="120" /> <RowDefinition /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="100" /> </Grid.ColumnDefinitions> <Button Height="60" Margin="0" Name="btnPlay" Click="btnPlay_Click" VerticalAlignment="Top">PLAY</Button> <Image AllowDrop="True" Drop="pza_Drop" MouseLeftButtonDown="pza_MouseLeftButtonDown" Grid.Row="1" Width="100" Height="100" Margin="0" Name="pzaLibre" Stretch="Fill" Source="/Puzzle;component/piezas/noimage.jpg" /> </Grid> <Grid Name="gridMatriz" DockPanel.Dock="Right" Margin="10"> <Grid.RowDefinitions> <RowDefinition /> <RowDefinition /> <RowDefinition /> <RowDefinition /> <RowDefinition /> <RowDefinition /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition /> <ColumnDefinition /> <ColumnDefinition /> <ColumnDefinition /> </Grid.ColumnDefinitions> <Image AllowDrop="True" Drop="pza_Drop" MouseLeftButtonDown="pza_MouseLeftButtonDown" Margin="0" Grid.Column="0" Grid.Row="0" Name="pzaA" Stretch="Fill" Source="/Puzzle;component/piezas/noimage.jpg" /> <Image AllowDrop="True" Drop="pza_Drop" MouseLeftButtonDown="pza_MouseLeftButtonDown" Margin="0" Grid.Column="1" Grid.Row="0" Name="pzaB" Stretch="Fill" Source="/Puzzle;component/piezas/noimage.jpg" /> <Image AllowDrop="True" Drop="pza_Drop" MouseLeftButtonDown="pza_MouseLeftButtonDown" Margin="0" Grid.Column="2" Grid.Row="0" Name="pzaC" Stretch="Fill" Source="/Puzzle;component/piezas/noimage.jpg" /> <Image AllowDrop="True" Drop="pza_Drop" MouseLeftButtonDown="pza_MouseLeftButtonDown" Margin="0" Grid.Column="3" Grid.Row="0" Name="pzaD" Stretch="Fill" Source="/Puzzle;component/piezas/noimage.jpg" /> <Image AllowDrop="True" Drop="pza_Drop" MouseLeftButtonDown="pza_MouseLeftButtonDown" Margin="0" Grid.Column="0" Grid.Row="1" Name="pzaE" Stretch="Fill" Source="/Puzzle;component/piezas/noimage.jpg" /> <Image AllowDrop="True" Drop="pza_Drop" MouseLeftButtonDown="pza_MouseLeftButtonDown" Margin="0" Grid.Column="1" Grid.Row="1" Name="pzaF" Stretch="Fill" Source="/Puzzle;component/piezas/noimage.jpg" /> <Image AllowDrop="True" Drop="pza_Drop" MouseLeftButtonDown="pza_MouseLeftButtonDown" Margin="0" Grid.Column="2" Grid.Row="1" Name="pzaG" Stretch="Fill" Source="/Puzzle;component/piezas/noimage.jpg" /> <Image AllowDrop="True" Drop="pza_Drop" MouseLeftButtonDown="pza_MouseLeftButtonDown" Margin="0" Grid.Column="3" Grid.Row="1" Name="pzaH" Stretch="Fill" Source="/Puzzle;component/piezas/noimage.jpg" /> <Image AllowDrop="True" Drop="pza_Drop" MouseLeftButtonDown="pza_MouseLeftButtonDown" Margin="0" Grid.Column="0" Grid.Row="2" Name="pzaI" Stretch="Fill" Source="/Puzzle;component/piezas/noimage.jpg" /> <Image AllowDrop="True" Drop="pza_Drop" MouseLeftButtonDown="pza_MouseLeftButtonDown" Margin="0" Grid.Column="1" Grid.Row="2" Name="pzaJ" Stretch="Fill" Source="/Puzzle;component/piezas/noimage.jpg" /> <Image AllowDrop="True" Drop="pza_Drop" MouseLeftButtonDown="pza_MouseLeftButtonDown" Margin="0" Grid.Column="2" Grid.Row="2" Name="pzaK" Stretch="Fill" Source="/Puzzle;component/piezas/noimage.jpg" /> <Image AllowDrop="True" Drop="pza_Drop" MouseLeftButtonDown="pza_MouseLeftButtonDown" Margin="0" Grid.Column="3" Grid.Row="2" Name="pzaL" Stretch="Fill" Source="/Puzzle;component/piezas/noimage.jpg" /> <Image AllowDrop="True" Drop="pza_Drop" MouseLeftButtonDown="pza_MouseLeftButtonDown" Margin="0" Grid.Column="0" Grid.Row="3" Name="pzaM" Stretch="Fill" Source="/Puzzle;component/piezas/noimage.jpg" /> <Image AllowDrop="True" Drop="pza_Drop" MouseLeftButtonDown="pza_MouseLeftButtonDown" Margin="0" Grid.Column="1" Grid.Row="3" Name="pzaN" Stretch="Fill" Source="/Puzzle;component/piezas/noimage.jpg" /> <Image AllowDrop="True" Drop="pza_Drop" MouseLeftButtonDown="pza_MouseLeftButtonDown" Margin="0" Grid.Column="2" Grid.Row="3" Name="pzaO" Stretch="Fill" Source="/Puzzle;component/piezas/noimage.jpg" /> <Image AllowDrop="True" Drop="pza_Drop" MouseLeftButtonDown="pza_MouseLeftButtonDown" Margin="0" Grid.Column="3" Grid.Row="3" Name="pzaP" Stretch="Fill" Source="/Puzzle;component/piezas/noimage.jpg" /> <Image AllowDrop="True" Drop="pza_Drop" MouseLeftButtonDown="pza_MouseLeftButtonDown" Margin="0" Grid.Column="0" Grid.Row="4" Name="pzaQ" Stretch="Fill" Source="/Puzzle;component/piezas/noimage.jpg" /> <Image AllowDrop="True" Drop="pza_Drop" MouseLeftButtonDown="pza_MouseLeftButtonDown" Margin="0" Grid.Column="1" Grid.Row="4" Name="pzaR" Stretch="Fill" Source="/Puzzle;component/piezas/noimage.jpg" /> <Image AllowDrop="True" Drop="pza_Drop" MouseLeftButtonDown="pza_MouseLeftButtonDown" Margin="0" Grid.Column="2" Grid.Row="4" Name="pzaS" Stretch="Fill" Source="/Puzzle;component/piezas/noimage.jpg" /> <Image AllowDrop="True" Drop="pza_Drop" MouseLeftButtonDown="pza_MouseLeftButtonDown" Margin="0" Grid.Column="3" Grid.Row="4" Name="pzaT" Stretch="Fill" Source="/Puzzle;component/piezas/noimage.jpg" /> <Image AllowDrop="True" Drop="pza_Drop" MouseLeftButtonDown="pza_MouseLeftButtonDown" Margin="0" Grid.Column="0" Grid.Row="5" Name="pzaU" Stretch="Fill" Source="/Puzzle;component/piezas/noimage.jpg" /> <Image AllowDrop="True" Drop="pza_Drop" MouseLeftButtonDown="pza_MouseLeftButtonDown" Margin="0" Grid.Column="1" Grid.Row="5" Name="pzaV" Stretch="Fill" Source="/Puzzle;component/piezas/noimage.jpg" /> <Image AllowDrop="True" Drop="pza_Drop" MouseLeftButtonDown="pza_MouseLeftButtonDown" Margin="0" Grid.Column="2" Grid.Row="5" Name="pzaW" Stretch="Fill" Source="/Puzzle;component/piezas/noimage.jpg" /> <Image AllowDrop="True" Drop="pza_Drop" MouseLeftButtonDown="pza_MouseLeftButtonDown" Margin="0" Grid.Column="3" Grid.Row="5" Name="pzaX" Stretch="Fill" Source="/Puzzle;component/piezas/noimage.jpg" /> </Grid> </DockPanel> </Grid> </Window>
debes tener algo como esto:
4. Game.cs
Abre la clase Game.cs y pega el siguiente código:
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Collections; using System.Windows.Controls; using System.Windows.Media.Imaging; namespace Puzzle { class Game { public string noimage = "pack://application:,,,/Puzzle;component/piezas/noimage.jpg"; /** * crea un puzzle desordenado */ public void newGame(Grid g) { //obtiene lista desordenada ArrayList list = generateGame(); //obtiene los Image var pics = g.Children.OfType<Image>(); int count = 0; //coloca imagenes foreach (Image i in pics) { BitmapImage img = new BitmapImage(); img.BeginInit(); img.UriSource = new Uri(@"pack://application:,,,/Puzzle;component/piezas/" + list[count] + ".jpg"); img.EndInit(); i.Source = img; count++; } } /** * Coloca la imagen "noimage" a un control Image */ public void setNoneImage(Image i) { BitmapImage img = new BitmapImage(); img.BeginInit(); img.UriSource = new Uri(@"pack://application:,,,/Puzzle;component/piezas/noimage.jpg"); img.EndInit(); i.Source = img; } /** * Retorna un arraylist con numeros del 1 al 24 desordenados * que corresponde a cada una de las piezas del puzzle */ private ArrayList generateGame() { ArrayList ar = new ArrayList(); for (int rr = 1; rr <= 24; rr++) ar.Add(rr); ArrayList arrDes = new ArrayList(); Random randNum = new Random(); while (ar.Count > 0) { int val = randNum.Next(0, ar.Count - 1); arrDes.Add(ar[val]); ar.RemoveAt(val); } return arrDes; } } }
5. Abre el archivo Window1.xaml.cs
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Windows; using System.Windows.Controls; using System.Windows.Data; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Imaging; using System.Windows.Navigation; using System.Windows.Shapes; namespace Puzzle { /// <summary> /// Interaction logic for Window1.xaml /// </summary> public partial class Window1 : Window { private Game game = new Game(); private Image origen; public Window1() { InitializeComponent(); } private void btnPlay_Click(object sender, RoutedEventArgs e) { game.newGame(gridMatriz); game.setNoneImage(pzaLibre); } private void pza_Drop(object sender, DragEventArgs e) { Image img = e.Source as Image; //Si control origen es diferente al destino if (img != origen) { //Si control destino no esta ocupado if (String.Compare(img.Source + "", game.noimage) == 0) { //obtiene el valor de data (source de la imagen) y asigna a la Image destino img.Source = (BitmapSource)e.Data.GetData(DataFormats.Text); //a la Image fuente, se le coloca una imagen en blanco game.setNoneImage(origen); } } } private void pza_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) { Image img = e.Source as Image; origen = img; //Coloca el Source de la imagen en data de tipo DataObject que permite la transferencia de datos DataObject data = new DataObject(DataFormats.Text, img.Source); //Inicia una operación de arrastrar y colocar donde //e.Source = Una referencia al objeto de dependencia que es el origen de datos que se arrastran. //data = variable que contiene los datos que se arrastran //DragDropEffects = Especifica la operacion de arrastrar y colocar, en este caso es un COPY DragDrop.DoDragDrop((DependencyObject)e.Source, data, DragDropEffects.Copy); } } }
6. Ejecuta el programa y si no tienes errores debes tener algo como esto:
enjoy!!! 🙂
¿Qué es una vista? Una vista (View) o Tabla Virtual, es una forma lógica de ver los datos ubicados en varias tablas, es[...]
Alda es un lenguaje de programación desarrollado por Dave Yarwood el cual esta basado en texto para composición musical,[...]
Continuando con los tutoriales sobre fragmentos en android, en esta oportunidad veremos como añadir Fragments dinámicame[...]
En este post iremos conociendo de un modo práctico que es y como se utiliza un Array en java, para esto partiremos de un[...]
Lo que veremos en este post es la configuración del driver para PHP de SQL Server que ha creado Microsoft el cual permit[...]
Lenguaje: C# Nivel: Básico 1) Se desea desarrollar un programa que permita introducir una oración por teclado y contar l[...]
