Reemplazar textos por imágenes y hacer la animación para el movimiento

Clase 38 de 40 • Curso de Swift 2017

Contenido del curso

Conceptos básicos del lenguaje de Swift

Funciones en Swift

Clases y estructuras en Swift

Extensiones y protocolos en Swift

Genéricos y manejo de errores en Swift

Proyecto del Curso de Swift

Sesiones en vivo

40
Lanzamiento del curso
27:23 min

Tomar examen

Comentarios

Jonathan Macalupu Reyes

student•

Para el reto, implementé una variable contador, una función y por el lado del StoryBoard un Label que aparece en el ViewController como contadorLabel:

   @IBOutlet weak var contadorLabel: UILabel!
    var contador : Int = 0

    func contadorMasUno(contador: Int) {
        self.contador = contador
        contadorLabel.text = "Movimiento \(self.contador)"
    }

Esta función la implemento dentro del botón de Resetear y de la condicional que se encuentra dentro de la función touchesEnded:

En la función de resetear el juego:

    @IBAction func btnRandom(_ sender: Any) {
        randomTiles()
     contadorMasUno(contador: 0) //aquí está
    }

En la función touchesEnded:

override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
        let currentTouch : UITouch = touches.first!
        if (self.tileArray.contains(currentTouch.view as Any)) {
            //currentTouch.view?.alpha = 0
            let touchLabel : CustomLabel = currentTouch.view as! CustomLabel
            let xDif: CGFloat = touchLabel.center.x - self.tileEmptyCenter.x
            let yDif: CGFloat = touchLabel.center.y - self.tileEmptyCenter.y
            let distance : CGFloat = sqrt(pow(xDif,2) + pow(yDif,2))
            
            if distance == self.tileWidth {
                let tempCenter : CGPoint = touchLabel.center
                UIView.beginAnimations(nil, context: nil) 
                UIView.setAnimationDuration(0.2) 
                touchLabel.center = self.tileEmptyCenter
                
                UIView.commitAnimations()
                self.tileEmptyCenter = tempCenter
                
                contadorMasUno(contador: self.contador + 1) //Función de contador
            }
            
        }
        
    }

Carlos Adrián Quiroga Pérez

student•

Dejo el código comentado en casi cada linea (en la respuesta)
Le agregue el temporizador, no me gusta que al reiniciar por un segundo el formato se ve mal.
No Supe implementar un botón de resolver ya que al volver ejecutar la función de makeTiles por segunda vez el cuadro vacío sale con una imagen y todavía no encuentro al responsable.
Seria bueno complementar el video con algún documento que explicara como interactuan los arrays.

Carlos Adrián Quiroga Pérez

student•

//  ViewController.swift
//  Platzzel
//
//  Created by Developer on 22/01/18.
//  Copyright © 2018 Multinf S.A. de C.V. All rights reserved.
//

import UIKit

class ViewController: UIViewController {
    
    
    @IBOutlet weak var temporizadorLabel: UILabel!
    
    
    @IBAction func btnResolver(_ sender: Any) {
        makeTiles()
    }
    
    
    @IBAction func btnRandom(_ sender: Any) {
        timeEnds()
        randomTiles()
        startTime()
        
    }
    
    @IBOutlet weak var board: UIView!
    var tileWidth : CGFloat = 0.0
    var tileCenterX : CGFloat = 0.0
    var tileCenterY : CGFloat = 0.0
    var timer = Timer()
    var counter = 0
    //var isTimeRunning = false
   
    
    var tileArray : NSMutableArray = [] //coleccion de puro label, mutuable q nos permite agregarle elementos
    var tileCenterArray : NSMutableArray = [] //coleccion de cgpoints (puntos centrales)
    var tileEmptyCenter: CGPoint = CGPoint(x:0, y:0) //variable del espacio vacio
    
    override func viewDidLoad() {
        super.viewDidLoad()
        makeTiles()
        randomTiles()
        startTime()

    }
    
    func startTime(){
        timer.invalidate()
        timer = Timer.scheduledTimer(timeInterval: 1, target: self,   selector: (#selector(ViewController.timeBegins)), userInfo: nil, repeats: true)
    }
    
    func timeString(time:TimeInterval) -> String {
        let hours = Int(time) / 3600
        let minutes = Int(time) / 60 % 60
        let seconds = Int(time) % 60
        return String(format:"%02i:%02i:%02i", hours, minutes, seconds)
    }
    
    @objc func timeBegins(){
       counter += 1
        //temporizadorLabel.text = "\(counter)" //ejecuta el contador en el label pero sin formato
        temporizadorLabel.text = timeString(time: TimeInterval(counter)) //ejecuta el contador con formato de 00:00:00
    }
    
    func timeEnds(){
        timer.invalidate()
        counter = 0
        temporizadorLabel.text = "\(counter)"

Carlos Adrián Quiroga Pérez

student•

func makeTiles() {
        self.tileArray = [] //para que empiecen los array en cero
        self.tileCenterArray = [] //al llamar a la funcion
        
        
        let boardWidth = self.board.frame.width //le da a la variable el valor del ancho del cuadro del view
        self.tileWidth = boardWidth / 4 //divide el ancho del cuadro entre el numero de cuadros ejemplo: 400/4=100
        self.tileCenterX = self.tileWidth / 2 //guarda la ubicacion del centro en "x" del cuadro ejemplo: 100/2= 50
        self.tileCenterY = self.tileWidth / 2 //guarda la ubicacion del centro en "y" del cuadro ejemplo: 100/2= 50
        var tileNumber : Int = 1 //para que empiece a contar iniciando en el 1 y no 0
        
        
        for _ in 0..<4 {
            for _ in 0..<4 {
                let tileFrame : CGRect = CGRect(x: 0, y: 0, width: self.tileWidth - 2, height: self.tileWidth - 2) //tile frame de tipo CGRect (core graphic) se le asigna punto de origen y medidas de ancho y alto
                let tile : CustomLabel = CustomLabel(frame: tileFrame) //tile = baldosa, sobre un Label se inicializa con un frame (area q va a cubrir)
                let currentCenter : CGPoint = CGPoint(x: self.tileCenterX, y: self.tileCenterY)    //guarda los valores tileCenterX y tileCenterY
                tile.center = currentCenter //asigna como centro del label la posicion dada por currentCenter
                tile.origenCenter = currentCenter //guarda la posicion inicial de todos
                //tile.backgroundColor = UIColor.red //asiga el color del fondo
                //tile.text = "\(tileNumber)"  //asigna un string a cada tile
                if tileNumber <= 16 {
                    tile.backgroundColor = UIColor(patternImage: UIImage(named: "\(tileNumber).jpg")!) //coloca imagenes en los cuadros
                } else {
                    tile.backgroundColor = UIColor.gray //establece a la unica celda que queda color gis
                }
                tile.textAlignment = NSTextAlignment.center //propiedad textAligment recibe valor posicion
                tile.isUserInteractionEnabled = true //habilitamos interraciones del usuario
                
                self.tileCenterArray.add(currentCenter) //guarda los valores de "x" y "y" (centros de cada label)
                
                self.board.addSubview(tile) //se agrega el tile a la vista
                tileNumber = tileNumber + 1 //guarda el valor del numero
                
        
                self.tileArray.add(tile) //al tileArray se le agrego el objeto tile
                
                self.tileCenterX = self.tileCenterX + self.tileWidth //empieza con 50 ,50 + 100 = 150, 150 + 100 = 250
                } //cierra el FOR de las filas
        self.tileCenterY = self.tileCenterY + self.tileWidth //avanza a la siguiente fila
        self.tileCenterX = self.tileWidth / 2 //para restablecer el valor de las columnas al reiniciar el for
        }
        
        let lastTile : CustomLabel = self.tileArray.lastObject as! CustomLabel //guarda en la variable el ultimo elemento del array, castea el CustomLabel para que se comporte como label
        lastTile.removeFromSuperview() //elimina el tile de la vista
       // self.tileArray.removeObject(at: 15) //elimina el elemento 15 del tileArray
        self.tileArray.removeLastObject() //elimina el ultimo elemento del tileArray
        self.tileEmptyCenter = tileCenterArray[0] as! CGPoint
        
    }
    
    func randomTiles(){
        let tempTileCenterArray : NSMutableArray = self.tileCenterArray.mutableCopy() as! NSMutableArray
        for anyTile in self.tileArray{ //el FOR toma cada elemento del tileArray
            let randomIndex : Int = Int(arc4random()) % tempTileCenterArray.count //guarda un numero aleatorio generado segun el numero de elementos en el arreglo del tempTileCenterArray (0- 15), arc4Random funcion de ios que devuelve un numero aleatorio, ejmplo #5
            let randomCenter : CGPoint = tempTileCenterArray[randomIndex] as! CGPoint //colecciones de de posiciones de x y que accesede al randomIndex que dio por resultado y casteado a CGPoint, ejemplo: x:50, y:50
            (anyTile as! CustomLabel).center = randomCenter //(anyTile se comporta como CustumLabel)(parentesis para que no se mezcle) y le asigna el centro segun lo que se guardo en random center, ejemplo: [5 :x:50,y:50]
            tempTileCenterArray.removeObject(at: randomIndex) //elimina el indice del tempTileCenterArray que acaba de poner el randomIndex
        } //termina FOR
        self.tileEmptyCenter = tempTileCenterArray[0] as! CGPoint //como se borraron todos los elementos del arreglo la ubicacion de este es la primera en el arreglo
    }

Alvaro Gonzalez

student•

Como podriamos hacer el seccionado de una imagen de forma dinamica, que el sisttema lo hada dinamica mente.

Victor Aliaga

student•

en el ejemplo usamos el indice de cada elemento para cargar cada imagen, mas o menos a que te refieres con cargarla dinamicamente? desde un servidor web o algo asi?

Alvaro Gonzalez

student•

Mas bien, es por medio de una funcion separar la imagen en cuadros y presentarla para que la orden.

Lo que veo en el ejemplo es que el cortado de la imagen es de forma manual, se puede hacer con una función, fraccionar la imagen en n cuadros ?

Esnor Noel Enrique Vaca Moreno

student•

Sería bueno también avisar al usuario cuando gane (ya se encuentre en orden la imágen)

Ignacio Bogarín Alvarez

student•

Existe un detalle en el código que en ocaciones el random hace que no se pueda resolver el rompecabezas, queda volteado una ficha …

   @IBOutlet weak var contadorLabel: UILabel!
    var contador : Int = 0

    func contadorMasUno(contador: Int) {
        self.contador = contador
        contadorLabel.text = "Movimiento \(self.contador)"
    }

override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
        let currentTouch : UITouch = touches.first!
        if (self.tileArray.contains(currentTouch.view as Any)) {
            //currentTouch.view?.alpha = 0
            let touchLabel : CustomLabel = currentTouch.view as! CustomLabel
            let xDif: CGFloat = touchLabel.center.x - self.tileEmptyCenter.x
            let yDif: CGFloat = touchLabel.center.y - self.tileEmptyCenter.y
            let distance : CGFloat = sqrt(pow(xDif,2) + pow(yDif,2))
            
            if distance == self.tileWidth {
                let tempCenter : CGPoint = touchLabel.center
                UIView.beginAnimations(nil, context: nil) 
                UIView.setAnimationDuration(0.2) 
                touchLabel.center = self.tileEmptyCenter
                
                UIView.commitAnimations()
                self.tileEmptyCenter = tempCenter
                
                contadorMasUno(contador: self.contador + 1) //Función de contador
            }
            
        }
        
    }

//  ViewController.swift
//  Platzzel
//
//  Created by Developer on 22/01/18.
//  Copyright © 2018 Multinf S.A. de C.V. All rights reserved.
//

import UIKit

class ViewController: UIViewController {
    
    
    @IBOutlet weak var temporizadorLabel: UILabel!
    
    
    @IBAction func btnResolver(_ sender: Any) {
        makeTiles()
    }
    
    
    @IBAction func btnRandom(_ sender: Any) {
        timeEnds()
        randomTiles()
        startTime()
        
    }
    
    @IBOutlet weak var board: UIView!
    var tileWidth : CGFloat = 0.0
    var tileCenterX : CGFloat = 0.0
    var tileCenterY : CGFloat = 0.0
    var timer = Timer()
    var counter = 0
    //var isTimeRunning = false
   
    
    var tileArray : NSMutableArray = [] //coleccion de puro label, mutuable q nos permite agregarle elementos
    var tileCenterArray : NSMutableArray = [] //coleccion de cgpoints (puntos centrales)
    var tileEmptyCenter: CGPoint = CGPoint(x:0, y:0) //variable del espacio vacio
    
    override func viewDidLoad() {
        super.viewDidLoad()
        makeTiles()
        randomTiles()
        startTime()

    }
    
    func startTime(){
        timer.invalidate()
        timer = Timer.scheduledTimer(timeInterval: 1, target: self,   selector: (#selector(ViewController.timeBegins)), userInfo: nil, repeats: true)
    }
    
    func timeString(time:TimeInterval) -> String {
        let hours = Int(time) / 3600
        let minutes = Int(time) / 60 % 60
        let seconds = Int(time) % 60
        return String(format:"%02i:%02i:%02i", hours, minutes, seconds)
    }
    
    @objc func timeBegins(){
       counter += 1
        //temporizadorLabel.text = "\(counter)" //ejecuta el contador en el label pero sin formato
        temporizadorLabel.text = timeString(time: TimeInterval(counter)) //ejecuta el contador con formato de 00:00:00
    }
    
    func timeEnds(){
        timer.invalidate()
        counter = 0
        temporizadorLabel.text = "\(counter)"

func makeTiles() {
        self.tileArray = [] //para que empiecen los array en cero
        self.tileCenterArray = [] //al llamar a la funcion
        
        
        let boardWidth = self.board.frame.width //le da a la variable el valor del ancho del cuadro del view
        self.tileWidth = boardWidth / 4 //divide el ancho del cuadro entre el numero de cuadros ejemplo: 400/4=100
        self.tileCenterX = self.tileWidth / 2 //guarda la ubicacion del centro en "x" del cuadro ejemplo: 100/2= 50
        self.tileCenterY = self.tileWidth / 2 //guarda la ubicacion del centro en "y" del cuadro ejemplo: 100/2= 50
        var tileNumber : Int = 1 //para que empiece a contar iniciando en el 1 y no 0
        
        
        for _ in 0..<4 {
            for _ in 0..<4 {
                let tileFrame : CGRect = CGRect(x: 0, y: 0, width: self.tileWidth - 2, height: self.tileWidth - 2) //tile frame de tipo CGRect (core graphic) se le asigna punto de origen y medidas de ancho y alto
                let tile : CustomLabel = CustomLabel(frame: tileFrame) //tile = baldosa, sobre un Label se inicializa con un frame (area q va a cubrir)
                let currentCenter : CGPoint = CGPoint(x: self.tileCenterX, y: self.tileCenterY)    //guarda los valores tileCenterX y tileCenterY
                tile.center = currentCenter //asigna como centro del label la posicion dada por currentCenter
                tile.origenCenter = currentCenter //guarda la posicion inicial de todos
                //tile.backgroundColor = UIColor.red //asiga el color del fondo
                //tile.text = "\(tileNumber)"  //asigna un string a cada tile
                if tileNumber <= 16 {
                    tile.backgroundColor = UIColor(patternImage: UIImage(named: "\(tileNumber).jpg")!) //coloca imagenes en los cuadros
                } else {
                    tile.backgroundColor = UIColor.gray //establece a la unica celda que queda color gis
                }
                tile.textAlignment = NSTextAlignment.center //propiedad textAligment recibe valor posicion
                tile.isUserInteractionEnabled = true //habilitamos interraciones del usuario
                
                self.tileCenterArray.add(currentCenter) //guarda los valores de "x" y "y" (centros de cada label)
                
                self.board.addSubview(tile) //se agrega el tile a la vista
                tileNumber = tileNumber + 1 //guarda el valor del numero
                
        
                self.tileArray.add(tile) //al tileArray se le agrego el objeto tile
                
                self.tileCenterX = self.tileCenterX + self.tileWidth //empieza con 50 ,50 + 100 = 150, 150 + 100 = 250
                } //cierra el FOR de las filas
        self.tileCenterY = self.tileCenterY + self.tileWidth //avanza a la siguiente fila
        self.tileCenterX = self.tileWidth / 2 //para restablecer el valor de las columnas al reiniciar el for
        }
        
        let lastTile : CustomLabel = self.tileArray.lastObject as! CustomLabel //guarda en la variable el ultimo elemento del array, castea el CustomLabel para que se comporte como label
        lastTile.removeFromSuperview() //elimina el tile de la vista
       // self.tileArray.removeObject(at: 15) //elimina el elemento 15 del tileArray
        self.tileArray.removeLastObject() //elimina el ultimo elemento del tileArray
        self.tileEmptyCenter = tileCenterArray[0] as! CGPoint
        
    }
    
    func randomTiles(){
        let tempTileCenterArray : NSMutableArray = self.tileCenterArray.mutableCopy() as! NSMutableArray
        for anyTile in self.tileArray{ //el FOR toma cada elemento del tileArray
            let randomIndex : Int = Int(arc4random()) % tempTileCenterArray.count //guarda un numero aleatorio generado segun el numero de elementos en el arreglo del tempTileCenterArray (0- 15), arc4Random funcion de ios que devuelve un numero aleatorio, ejmplo #5
            let randomCenter : CGPoint = tempTileCenterArray[randomIndex] as! CGPoint //colecciones de de posiciones de x y que accesede al randomIndex que dio por resultado y casteado a CGPoint, ejemplo: x:50, y:50
            (anyTile as! CustomLabel).center = randomCenter //(anyTile se comporta como CustumLabel)(parentesis para que no se mezcle) y le asigna el centro segun lo que se guardo en random center, ejemplo: [5 :x:50,y:50]
            tempTileCenterArray.removeObject(at: randomIndex) //elimina el indice del tempTileCenterArray que acaba de poner el randomIndex
        } //termina FOR
        self.tileEmptyCenter = tempTileCenterArray[0] as! CGPoint //como se borraron todos los elementos del arreglo la ubicacion de este es la primera en el arreglo
    }

Reemplazar textos por imágenes y hacer la animación para el movimiento

¡Espera pronto la actualización de este curso!

¡Nos estamos renovando!

Pre lanzamiento del curso

Nuevo Curso de Swift en Platzi

Introducción al Curso de Swift

Swift playgrounds

Conceptos básicos del lenguaje de Swift

Variables y constantes en Swift

Estructuras de control: if - else en Swift

Estructuras de control: while en Swift

Estructuras de control: for en Swift

Estructuras de control: switch en Swift

Colecciones: arrays en Swift

Colecciones: diccionarios en Swift

Colecciones: sets en Swift

Opcionales y Strings: Introducción, unwrapping and binding

Opcionales y Strings: Strings en Swift

Funciones en Swift

Introducción a las funciones en Swift

Function types en Swift

Introducción y ejemplos de closures

Ejemplo de implementación de closures en Swift

Clases y estructuras en Swift

Enum en Swift

Clases y objetos en Swift

Estructuras en Swift

Herencia en Swift

Polimorfismo en Swift

Extensiones y protocolos en Swift

Extensiones en Swift

Introducción a los protocolos en Swift

Protocol types

Protocol extensions

Genéricos y manejo de errores en Swift

Introducción a los genéricos

Tipos de genéricos

Control de acceso

Manejo de errores

Proyecto del Curso de Swift

Proyecto Platzzel: Un rompecabezas en Swift utilizando Xcode

Implementación del rompecabezas

Creando las filas del rompecabezas con 'for'

Creando las columnas del rompecabezas

Mezclando los tiles

Agregar un botón y capturar el evento touch

Hacer la lógica del juego

Reemplazar textos por imágenes y hacer la animación para el movimiento

Conclusiones del curso

Sesiones en vivo

Lanzamiento del curso