Sigueme en Facebook Sigueme en Twitter Sigueme en Instagram Sigueme en Youtube
JC Mouse Bolivia
Index / C Sharp / Rompecabezas en C# (Tutorial)

Rompecabezas en C# (Tutorial)

Autor jc mouse Martes, Octubre 7, 2014

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:

  • Conocimientos básico sobre C# y XAML
  • Visual Studio 2008 o superior
  • .NET Framework 3.5 o superior
  • Editor de imágenes (Photoshop, GIMP, Corel, etc)

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.

proyecto puzzle

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.

cosplay elyuin

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 - http://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:

gui xaml

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:

rompecabezas c sharp

enjoy!!! 🙂

Tags

Si te ha gustado podrías compartirlo o dejar un comentario. ¡Muchas gracias!
Autor: JC Mouse

Yo soy yo :) JC Mouse, Soy orgullosamente boliviano soy fundador y CEO de la web jc-Mouse.net uno de las pocas web en emprendimiento y tecnología en Bolivia.

Toda la información que encuentres en este sitio es y sera completamente gratis siempre, puedes copiar, descargar y re-publicar si así lo deseas en otros blogs o sitios web, solo te pido a cambio que dejes una referencia a esta web. Esto nos ayuda a crecer y seguir aportando. Bye

Enjoy! :)

También Te Podría Interesar

Sistema de gestión de stock – El Controlador (Parte 5)

Sistema de gestión de stock – El Controlador (Parte 5)

Para terminar el tutorial, debemos unir tanto la VISTA como el MODELO y para eso esta el CONTROLADOR. o.O El controlador...

Gráfico de lineas con jfreechart

Gráfico de lineas con jfreechart

Los gráficos de líneas muestran una serie como un conjunto de puntos conectados mediante una línea. Los valores se repre...

Gestión de Stock (Parte 2)

Gestión de Stock (Parte 2)

Continuando con el desarrollo de la aplicación (Parte 1), abrimos Netbeans y creamos un nuevo proyecto al que llamaremos...

Creación de GUI con Matlab GUIDE

Creación de GUI con Matlab GUIDE

En este videotutorial se vera la creación de Interfaces Gráficas de Usuario (GUI) utilizando MatLab GUIDE herramienta vi...

Control de Paginación (Pagination) en tus Apps FX

Control de Paginación (Pagination) en tus Apps FX

El control de paginación de JavaFX (Pagination) se usa para navegar a través de varias paginas de contenido divididas en...

Animación básica en java2d – Pelota de Futbol

Animación básica en java2d – Pelota de Futbol

En este tutorial se muestran los pasos para crear una animación sencilla utilizando Java2d y el IDE Netbeans. La animaci...

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*

Comparte lo que sabes

Categorias

Últimas entradas

“Material Design es una guía integral para el diseño visual, de movimientos y de interacción en distintas platafor...

Un TextView autocompletado nos facilita el ingreso de información en aplicaciones móviles ya que te muestra posibles opc...

Un Tabbed Activity te permite cambiar la vista entre  fragmentos desplazando el dedo  de izquierda a derecha o de derech...

Este 12 de Mayo de 2017 se produjo un ataque masivo mundial del ransomware WannaCry  el  que afecto a más de 200000 comp...

Android Bolivia

Bandera en Alto