PacmanESfantasmas.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "![UBU](./pics/escudo_COLOR_1L_DCHA.png)\n",
    "\n",
    "# Introducción a la programación en Python\n",
    "\n",
    "\n",
    "## Comecocos\n",
    "\n",
    "### Profesores: José Francisco Díez Pastor, Álvar Arnaiz González, Ana Serrano Mamolar, Raúl Marticorena Sanchez y José Miguel Ramírez Sanz\n",
    "### Taller del BIE 2024"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "El comecocos (en esta versión simplificada) se trata de un juego en el que un personaje (Pacman) se desplaza por un tablero, en el que tenemos casillas libres y paredes o muros. En este tablero, en las casillas libres hay alimentos. Cuando Pacman se coloca en una casilla con alimento, el alimento desaparece y se incrementan los puntos.\n",
    "\n",
    "![Comecocos](comecocos.png)\n",
    "\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## Partes del juego\n",
    "\n",
    "- Tablero: Define las partes del suelo libres o que están ocupadas por un muro. El tablero es inmutable, no cambia nunca.\n",
    "- MrPacman: Define la posición del personaje en términos de coordenadas y,x (fila, columna), su posición sí que cambia.\n",
    "- Comida: Algunas casillas tienen comida, cuando Mr. Pacman pisa una de esas casillas desaparece la comida y aumentan los puntos. La comida, por lo tanto, solo puede ir desapareciendo.\n",
    "- Puntos: Un número que se va incrementando a medida que se come la comida del tablero."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## Preguntas sobre representación de las partes del juego\n",
    "\n",
    "¿ Que tipo de dato sería cada parte del juego atendiendo a los datos anteriores?\n",
    "\n",
    "________\n",
    "_________\n",
    "_________\n",
    "________\n",
    "_________\n",
    "_________\n",
    "________\n",
    "_________\n",
    "_________\n",
    "_________\n",
    "_________\n",
    "_________"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "subslide"
    }
   },
   "source": [
    "## Preguntas sobre representación de las partes del juego\n",
    "\n",
    "¿Que tipo de dato sería cada parte del juego atendiendo a los datos anteriores?\n",
    "\n",
    "- El tablero no va a cambiar nunca, podría ser una lista de listas. Cada lista interna representando una fila. Y cada valor de la fila representaría: con 0 que es una casilla libre o con un 1 que hay un muro.\n",
    "________\n",
    "_________\n",
    "_________\n",
    "________\n",
    "_________\n",
    "_________\n",
    "________\n",
    "_________\n",
    "_________\n",
    "_________\n",
    "_________\n",
    "_________\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "subslide"
    }
   },
   "source": [
    "## Preguntas sobre representación de las partes del juego\n",
    "\n",
    "¿Que tipo de dato sería cada parte del juego atendiendo a los datos anteriores?\n",
    "\n",
    "- MrPacman va a cambiar, queremos hacer operaciones de movimiento que lo desplacen hacía arriba, abajo, derecha e izquierda, lo mejor es que sea una lista de coordenadas.\n",
    "________\n",
    "_________\n",
    "_________\n",
    "________\n",
    "_________\n",
    "_________\n",
    "________\n",
    "_________\n",
    "_________\n",
    "_________\n",
    "_________\n",
    "_________\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "subslide"
    }
   },
   "source": [
    "## Preguntas sobre representación de las partes del juego\n",
    "\n",
    "¿Que tipo de dato sería cada parte del juego atendiendo a los datos anteriores?\n",
    "\n",
    "- Comida: Se quiere saber si una determinada coordenada está entre las que tienen comida y se quieren eliminar elementos cuando la comida se consuma.\n",
    "\n",
    "Comida será una lista de listas: cada lista interna una coordenada, que indica que en dicha coordenada hay comida.\n",
    "\n",
    "Usando una lista de coordenadas se puede hacer lo primero muy facilmente con el operador **in** y lo segundo con **remove**.\n",
    "\n",
    "________\n",
    "_________\n",
    "_________\n",
    "________\n",
    "_________\n",
    "_________\n",
    "________\n",
    "_________\n",
    "_________\n",
    "_________\n",
    "_________\n",
    "_________\n",
    "\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "subslide"
    }
   },
   "source": [
    "## Preguntas sobre representación de las partes del juego\n",
    "\n",
    "¿Que tipo de dato sería cada parte del juego atendiendo a los datos anteriores?\n",
    "\n",
    "- Los puntos son una variable numérica.\n",
    "\n",
    "________\n",
    "_________\n",
    "_________\n",
    "________\n",
    "_________\n",
    "_________\n",
    "________\n",
    "_________\n",
    "_________\n",
    "_________\n",
    "_________\n",
    "_________"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## Ejemplo de representación de una partida\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "outputs": [],
   "source": [
    "# Un tablero cualquiera, pacman arriba a la izquierda, 0 puntos\n",
    "tablero = [[1,1,1,1,1,1,1,1,1,1],\n",
    "           [1,0,0,0,0,0,0,0,0,1],\n",
    "           [1,0,1,0,1,1,0,1,0,1],\n",
    "           [1,0,1,0,1,1,0,1,0,1],\n",
    "           [1,0,1,0,1,1,0,1,0,1],\n",
    "           [1,0,0,0,1,1,0,0,0,1],\n",
    "           [1,1,1,0,1,1,0,1,0,1],\n",
    "           [1,1,1,0,0,0,0,1,1,1],\n",
    "           [1,1,1,1,1,1,0,0,0,1],\n",
    "           [1,1,1,1,1,1,1,1,0,1],\n",
    "           [1,1,1,1,1,1,1,1,1,1]]\n",
    "pacman = [1,1]\n",
    "ghosts = {\"red\":[9,8],\"blue\":[1,8],\"yellow\":[7,3]}\n",
    "puntos = 0"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "[1, 0, 0, 0, 0, 0, 0, 0, 0, 1]"
      ]
     },
     "execution_count": 2,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "tablero[1]    # me da la primera fila (la lista con todos los elementos de dicha fila)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "1"
      ]
     },
     "execution_count": 3,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "tablero[0][1] # me da el valor de la celda: de la primera fila, segunda columna"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## Ejercicio\n",
    "\n",
    "Usando la representación anterior.  ¿Como se definiría una función para saber si una celda está libre? \n",
    "\n",
    "Estará libre si hay un 0.\n",
    "\n",
    "Hay que consultar el valor de una lista, completando esta función (No avances hasta haberlo intentado). \n",
    "\n",
    "\n",
    "\n",
    "```Python\n",
    "def esta_libre(tablero, coordenada):\n",
    "    return False\n",
    "```\n",
    "\n",
    "________\n",
    "_________\n",
    "_________\n",
    "________\n",
    "_________\n",
    "_________\n",
    "________\n",
    "_________\n",
    "_________\n",
    "_________\n",
    "_________\n",
    "_________\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {},
   "outputs": [],
   "source": [
    "def esta_libre(tablero, coordenada):\n",
    "    # Completar la función\n",
    "    return False\n",
    "\n",
    "\n",
    "\n",
    "\n",
    "\n",
    "\n",
    "\n",
    "\n",
    "\n",
    "\n",
    "\n",
    "\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "\n",
    "\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "outputs": [],
   "source": [
    "# Posible solución\n",
    "def esta_libre(tablero, coordenada):\n",
    "    return tablero[coordenada[0]][coordenada[1]] == 0"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## Ejercicio\n",
    "\n",
    "Para saber dónde hay que colocar la comida, primero tenemos que saber todas las celdas libres del tablero.\n",
    "Pistas: averiguar el tamaño de una lista, recorrer con un bucle dicha lista, utilizar la función anterior (añadir elementos a una lista)\n",
    "\n",
    "```Python\n",
    "def get_coordenadas_libres(tablero):\n",
    "        \n",
    "    libres = []\n",
    "    \n",
    "    # ... \n",
    "    \n",
    "    return libres\n",
    "```\n",
    "\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "[0, 0]\n",
      "[0, 1]\n",
      "[0, 2]\n",
      "[0, 3]\n",
      "[0, 4]\n",
      "[0, 5]\n",
      "[0, 6]\n",
      "[0, 7]\n",
      "[0, 8]\n",
      "[0, 9]\n",
      "[1, 0]\n",
      "[1, 1]\n",
      "[1, 2]\n",
      "[1, 3]\n",
      "[1, 4]\n",
      "[1, 5]\n",
      "[1, 6]\n",
      "[1, 7]\n",
      "[1, 8]\n",
      "[1, 9]\n",
      "[2, 0]\n",
      "[2, 1]\n",
      "[2, 2]\n",
      "[2, 3]\n",
      "[2, 4]\n",
      "[2, 5]\n",
      "[2, 6]\n",
      "[2, 7]\n",
      "[2, 8]\n",
      "[2, 9]\n",
      "[3, 0]\n",
      "[3, 1]\n",
      "[3, 2]\n",
      "[3, 3]\n",
      "[3, 4]\n",
      "[3, 5]\n",
      "[3, 6]\n",
      "[3, 7]\n",
      "[3, 8]\n",
      "[3, 9]\n",
      "[4, 0]\n",
      "[4, 1]\n",
      "[4, 2]\n",
      "[4, 3]\n",
      "[4, 4]\n",
      "[4, 5]\n",
      "[4, 6]\n",
      "[4, 7]\n",
      "[4, 8]\n",
      "[4, 9]\n",
      "[5, 0]\n",
      "[5, 1]\n",
      "[5, 2]\n",
      "[5, 3]\n",
      "[5, 4]\n",
      "[5, 5]\n",
      "[5, 6]\n",
      "[5, 7]\n",
      "[5, 8]\n",
      "[5, 9]\n",
      "[6, 0]\n",
      "[6, 1]\n",
      "[6, 2]\n",
      "[6, 3]\n",
      "[6, 4]\n",
      "[6, 5]\n",
      "[6, 6]\n",
      "[6, 7]\n",
      "[6, 8]\n",
      "[6, 9]\n",
      "[7, 0]\n",
      "[7, 1]\n",
      "[7, 2]\n",
      "[7, 3]\n",
      "[7, 4]\n",
      "[7, 5]\n",
      "[7, 6]\n",
      "[7, 7]\n",
      "[7, 8]\n",
      "[7, 9]\n",
      "[8, 0]\n",
      "[8, 1]\n",
      "[8, 2]\n",
      "[8, 3]\n",
      "[8, 4]\n",
      "[8, 5]\n",
      "[8, 6]\n",
      "[8, 7]\n",
      "[8, 8]\n",
      "[8, 9]\n",
      "[9, 0]\n",
      "[9, 1]\n",
      "[9, 2]\n",
      "[9, 3]\n",
      "[9, 4]\n",
      "[9, 5]\n",
      "[9, 6]\n",
      "[9, 7]\n",
      "[9, 8]\n",
      "[9, 9]\n",
      "[10, 0]\n",
      "[10, 1]\n",
      "[10, 2]\n",
      "[10, 3]\n",
      "[10, 4]\n",
      "[10, 5]\n",
      "[10, 6]\n",
      "[10, 7]\n",
      "[10, 8]\n",
      "[10, 9]\n"
     ]
    }
   ],
   "source": [
    "# Pista: sacar todas las posibles coordenadas del tablero\n",
    "alto = len(tablero)\n",
    "ancho = len(tablero[0])\n",
    "\n",
    "for i in range(alto):\n",
    "    for j in range(ancho):\n",
    "        print([i,j])"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "metadata": {},
   "outputs": [],
   "source": [
    "# completa la función\n",
    "def get_coordenadas_libres(tablero):\n",
    "\n",
    "    libres = []\n",
    "\n",
    "    return libres"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "________\n",
    "_________\n",
    "_________\n",
    "________\n",
    "_________\n",
    "_________\n",
    "________\n",
    "_________\n",
    "_________\n",
    "_________\n",
    "_________\n",
    "_________\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "outputs": [],
   "source": [
    "# Posible solución\n",
    "def get_coordenadas_libres(tablero):\n",
    "    alto = len(tablero)\n",
    "    ancho = len(tablero[0])\n",
    "    \n",
    "    libres = []\n",
    "    \n",
    "    for i in range(alto):\n",
    "        for j in range(ancho):\n",
    "            coord = [i,j]\n",
    "            if esta_libre(tablero,coord):\n",
    "                libres.append(coord)\n",
    "    return libres\n",
    "\n",
    "# guardo el resultado en la variable comida\n",
    "comida = get_coordenadas_libres(tablero)               "
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## Ejercicio\n",
    "\n",
    "Mover Mr. Pacman a una de sus cuatro coordenadas adyacentes consiste, básicamente, en sumar a las coordenadas de Pacman una lista pasada como argumento que puede valer [1,0] (mover a abajo), [-1,0] (mover a arriba), [0,1] (mover derecha) o [0,-1] (mover izquierda).\n",
    "\n",
    "Se puede usar un *map* o sumar las coordenadas una a una.\n",
    "\n",
    "```Python\n",
    "def mueve(pacman,mov):\n",
    "    return nuevaCoordenada\n",
    "```\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 9,
   "metadata": {},
   "outputs": [],
   "source": [
    "# completa la función\n",
    "def mueve(pacman,mov):\n",
    "    return 0\n",
    "\n",
    "\n",
    "\n",
    "\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "\n",
    "________\n",
    "_________\n",
    "_________\n",
    "________\n",
    "_________\n",
    "_________\n",
    "________\n",
    "_________\n",
    "_________\n",
    "_________\n",
    "_________\n",
    "_________\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 10,
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "outputs": [],
   "source": [
    "# Posibles soluciones\n",
    "\n",
    "# versión con map\n",
    "def mueve(pacman,mov):\n",
    "    return list(map(lambda x,y: x+y, pacman,mov))\n",
    "\n",
    "# versión sin map\n",
    "def mueve(pacman,mov):\n",
    "    return [pacman[0]+mov[0], pacman[1]+mov[1]]\n",
    "\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## Ejercicio\n",
    "\n",
    "\n",
    "Saber si hay comida. Pista: hay que usar **in**\n",
    "\n",
    "```Python\n",
    "def hay_comida(pacman,comida):\n",
    "    return False\n",
    "```\n",
    "\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 11,
   "metadata": {},
   "outputs": [],
   "source": [
    "# completa la función\n",
    "def hay_comida(pacman,comida):\n",
    "    return False\n",
    "\n",
    "\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "________\n",
    "_________\n",
    "_________\n",
    "________\n",
    "_________\n",
    "_________\n",
    "________\n",
    "_________\n",
    "_________\n",
    "_________\n",
    "_________\n",
    "_________\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 12,
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "outputs": [],
   "source": [
    "# Posible solución\n",
    "def hay_comida(pacman,comida):\n",
    "    return pacman in comida"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## Ejercicio. Pintar tablero\n",
    "\n",
    "La función recibe el tablero, pacman, comida y puntos; e imprime una cadena de texto con la representación del juego.\n",
    "1. Averiguar el tamaño del tablero.\n",
    "2. Recorrer con un bucle todas las filas y columnas.\n",
    "3. Añadir a la cadena que se va a dibujar la representación de cada elemento del juego:\n",
    "    - El muro es \"#\", la comida es \".\" y pacman es \"\\*\"\n",
    "    - Se usa if/elif/else    \n",
    "    - Las cadenas se concatenan con +\n",
    "4. Puedes añadir al final la puntuación\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 13,
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "\n"
     ]
    }
   ],
   "source": [
    "# completa la función\n",
    "def pinta_juego(tablero,pacman,comida,puntos):\n",
    "    alto = len(tablero)\n",
    "    ancho = len(tablero[0])\n",
    "    \n",
    "    rep = \"\"\n",
    "    \n",
    "    \n",
    "    # completa aqui\n",
    "                \n",
    "    print(rep)\n",
    "\n",
    "# no avances hasta haberlo intentado.\n",
    "pinta_juego(tablero,pacman,comida,puntos)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "________\n",
    "_________\n",
    "_________\n",
    "________\n",
    "_________\n",
    "_________\n",
    "________\n",
    "_________\n",
    "_________\n",
    "_________\n",
    "_________\n",
    "_________\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 14,
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "outputs": [],
   "source": [
    "def pinta_juego(tablero,pacman,comida,puntos):\n",
    "    alto = len(tablero)\n",
    "    ancho = len(tablero[0])\n",
    "    \n",
    "    rep = \"\"\n",
    "    \n",
    "    for i in range(alto):\n",
    "        for j in range(ancho):\n",
    "            coord = [i,j]\n",
    "            if not esta_libre(tablero,coord):\n",
    "                rep+=\"#\"\n",
    "            elif pacman == coord:\n",
    "                rep+=\"*\"\n",
    "            elif coord in comida:\n",
    "                rep+=\".\"\n",
    "            else:\n",
    "                rep+=\" \"\n",
    "        rep+=\"\\n\"\n",
    "    \n",
    "    rep+=\"Puntos:\"+str(puntos)\n",
    "                    \n",
    "    print(rep)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 15,
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "##########\n",
      "#*.......#\n",
      "#.#.##.#.#\n",
      "#.#.##.#.#\n",
      "#.#.##.#.#\n",
      "#...##...#\n",
      "###.##.#.#\n",
      "###....###\n",
      "######...#\n",
      "########.#\n",
      "##########\n",
      "Puntos:0\n"
     ]
    }
   ],
   "source": [
    "pinta_juego(tablero,pacman,comida,puntos)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## Pinta tablero HTML\n",
    "\n",
    "El widget HTML es capaz de mostrar código HTML.\n",
    "Una de las cosas que puede hacer es mostrar una tabla HTML con una imagen diferente por cada tipo de elemento. La siguiente función la proporciona el profesor."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 16,
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "outputs": [],
   "source": [
    "from IPython.display import display\n",
    "from ipywidgets import HTML\n",
    "\n",
    "def pinta_juegoHTML(tablero,pacman,comida,puntos,ghosts):\n",
    "    alto, ancho = len(tablero), len(tablero[0])    \n",
    "    cadenaHTML = '<table> <tr>'    \n",
    "    caracter = '<td></td>'\n",
    "    blockImg = '<td><img src=\"./spritesPacman/block.jpg\" alt=\"\" border=0 height=50 width=50></img></td>'\n",
    "    huecoImg = '<td><img src=\"./spritesPacman/hueco.jpg\" alt=\"\" border=0 height=50 width=50></img></td>'\n",
    "    comidaImg = '<td><img src=\"./spritesPacman/comida.jpg\" alt=\"\" border=0 height=50 width=50></img></td>'     \n",
    "    pacmanImg = '<td><img src=\"./spritesPacman/pacman.jpg\" alt=\"\" border=0 height=50 width=50></img></td>'\n",
    "    redImg = '<td><img src=\"./spritesPacman/red.png\" alt=\"\" border=0 height=50 width=50></img></td>'\n",
    "    blueImg  = '<td><img src=\"./spritesPacman/blue.png\" alt=\"\" border=0 height=50 width=50></img></td>'\n",
    "    yewImg = '<td><img src=\"./spritesPacman/ama.png\" alt=\"\" border=0 height=50 width=50></img></td>'\n",
    "    \n",
    "    saltoLinea = \"</tr>\"\n",
    "    \n",
    "    for i in range(alto):\n",
    "        for j in range(ancho):\n",
    "            coord = [i,j]\n",
    "            if not esta_libre(tablero,coord):\n",
    "                caracter = blockImg\n",
    "            elif pacman == coord:\n",
    "                caracter = pacmanImg\n",
    "            elif ghosts[\"red\"] == coord:\n",
    "                caracter = redImg\n",
    "            elif ghosts[\"blue\"] == coord:\n",
    "                caracter = blueImg\n",
    "            elif ghosts[\"yellow\"] == coord:\n",
    "                caracter = yewImg\n",
    "            elif coord in comida:\n",
    "                caracter = comidaImg\n",
    "            else:\n",
    "                caracter = huecoImg\n",
    "                \n",
    "            cadenaHTML += caracter\n",
    "        cadenaHTML += saltoLinea        \n",
    "        \n",
    "    cadenaHTML += saltoLinea\n",
    "    cadenaHTML += \"Puntos:\"+str(puntos)        \n",
    "    return cadenaHTML"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 17,
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "844e29c61a37434c98a856105c4c3698",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "HTML(value='<table> <tr><td><img src=\"./spritesPacman/block.jpg\" alt=\"\" border=0 height=50 width=50></img></td…"
      ]
     },
     "execution_count": 17,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "HTML(pinta_juegoHTML(tablero,pacman,comida,puntos,ghosts))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## Poniendo todo junto\n",
    "\n",
    "En jupyter notebook se pueden usar widgets para capturar la interacción del usuario y para mostrar resultados.\n",
    "\n",
    "El widget HTML nos sirve para representar el juego y los botones para capturar los movimientos.\n",
    "\n",
    "En la función asociada al evento del botón va a averiguar cual es el botón pulsado y en función de cual sea, va a hacer que el movimiento a realizar sea [-1,0], [1,0], [0,-1] o [0,1].\n",
    "\n",
    "Esta función se debería modificar para hacer el el Pacman se mueva y coma la comida."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "Cuando se pulsa un botón se ejecuta una función, en este caso la función ```on_button_clicked``` que recibe como argumento el botón pulsado. A partir de la descripción del botón, se puede saber cual ha sido el botón pulsado y que tipo de movimiento debemos usar para actualizar la posición de pacman.\n",
    "\n",
    "Las variables pacman, comida y puntos, son variables globales, por lo que dentro de la función tengo que indicar que se va a acceder a dichas variables.\n",
    "\n",
    "## Ejercicio\n",
    "\n",
    "Completa la función ```on_button_clicked```, que aparece arriba, para que el pacman se mueva por las casillas libres, coma la comida y se incrementen los puntos de manera correcta. Solamente se trata de usar las funciones definidas anteriormente"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 18,
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "outputs": [],
   "source": [
    "# Función a completar\n",
    "\n",
    "'''\n",
    "Esta será la función que se ejecutará al pulsar cada botón.\n",
    "En cada pulsación:\n",
    "- miro cuál es el botón pulsado\n",
    "- aplico el movimiento\n",
    "\n",
    "'''\n",
    "def on_button_clicked(b):\n",
    "    desc=b.description\n",
    "    mov = [0,0]\n",
    "    if desc==\"^\":\n",
    "        mov=[-1,0]\n",
    "    elif desc==\"v\":\n",
    "        mov=[1,0]\n",
    "    elif desc==\">\":\n",
    "        mov=[0,1]\n",
    "    elif desc==\"<\":\n",
    "        mov=[0,-1]\n",
    "    \n",
    "    global pacman\n",
    "    global comida\n",
    "    global puntos\n",
    "    \n",
    "    # mueve pacman usando la función mueve\n",
    "    posibleMov = mueve(pacman,mov)\n",
    "    pacman = posibleMov\n",
    "   \n",
    "    ########## modifica aquí   \n",
    "    # si está libre la celda: mover Pacman\n",
    "    # si hay comida: elimina, come e incrementa los puntos\n",
    "    ########## \n",
    "\n",
    "    # completar aquí...\n",
    "    \n",
    "    visor.value = pinta_juegoHTML(tablero,pacman,comida,puntos,ghosts)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": 19,
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "bc5df90526014ce2982fbf3171bcd66d",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "VBox(children=(HTML(value='<table> <tr><td><img src=\"./spritesPacman/block.jpg\" alt=\"\" border=0 height=50 widt…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "'''\n",
    "Celda principal del juego\n",
    "\n",
    "'''\n",
    "\n",
    "from IPython.display import display\n",
    "from ipywidgets import HTML, Dropdown ,Button, HBox, VBox, Box\n",
    "\n",
    "# En cada partida se rellena el tablero de comida\n",
    "comida = get_coordenadas_libres(tablero)               \n",
    "\n",
    "# Visor HTML donde se representará el juego\n",
    "visor = HTML()\n",
    "visor.value = pinta_juegoHTML(tablero,pacman,comida,puntos,ghosts)\n",
    "\n",
    "# Botones para las direcciones\n",
    "up = Button(description=\"^\")\n",
    "down = Button(description=\"v\")\n",
    "right = Button(description=\">\")\n",
    "left = Button(description=\"<\")\n",
    "\n",
    "empty = Button(description=\" \")\n",
    "empty.margin = 2\n",
    "\n",
    "# se añaden eventos a los botones\n",
    "up.on_click(on_button_clicked)\n",
    "down.on_click(on_button_clicked)\n",
    "right.on_click(on_button_clicked)\n",
    "left.on_click(on_button_clicked)\n",
    "\n",
    "# Estética: Se crea una caja vertical con dos cajas horizontales dentro\n",
    "# Tenemos 2 x 3 casillas para colocar los botones y los colocamos en forma de teclado\n",
    "control = VBox([HBox([empty,up,empty]),HBox([left,down,right])])\n",
    "\n",
    "# El juego es el visor y los controles\n",
    "ui = VBox(children=[visor, control])\n",
    "\n",
    "display(ui)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 20,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Posible solución\n",
    "\n",
    "'''\n",
    "Esta será la función que se ejecutará al pulsar cada botón.\n",
    "En cada pulsación:\n",
    "- miro cuál es el botón pulsado\n",
    "- aplico el movimiento\n",
    "\n",
    "'''\n",
    "import random as rand\n",
    "\n",
    "def on_button_clicked(b):\n",
    "    desc=b.description\n",
    "    mov = [0,0]\n",
    "    if desc==\"^\":\n",
    "        mov=[-1,0]\n",
    "    elif desc==\"v\":\n",
    "        mov=[1,0]\n",
    "    elif desc==\">\":\n",
    "        mov=[0,1]\n",
    "    elif desc==\"<\":\n",
    "        mov=[0,-1]\n",
    "    \n",
    "    global pacman\n",
    "    global comida\n",
    "    global puntos\n",
    "    global ghosts\n",
    "    \n",
    "    \n",
    "    posibleMov  = mueve(pacman,mov)\n",
    "    oldghosts=ghosts.copy()\n",
    "\n",
    "    ########## modifica aquí\n",
    "    posmov = [[1,0],[0,1],[-1,0],[0,-1]]\n",
    "    \n",
    "    for i in ghosts:\n",
    "        while True:\n",
    "            out=False\n",
    "            for j in posmov:\n",
    "                if mueve(ghosts[i],j)==pacman:\n",
    "                    ghosts[i]=mueve(ghosts[i],j)\n",
    "                    out=True\n",
    "                    break\n",
    "            else:\n",
    "                r = rand.randint(0, len(posmov)-1)\n",
    "                auxpos = mueve(ghosts[i],posmov[r])\n",
    "                if esta_libre(tablero,auxpos):\n",
    "                    ghosts[i]=auxpos\n",
    "                    out=True\n",
    "            if out:\n",
    "                break\n",
    "    \n",
    "    if esta_libre(tablero,posibleMov):\n",
    "        pacman = posibleMov\n",
    "    if hay_comida(pacman,comida):\n",
    "        comida.remove(pacman)\n",
    "        puntos+=1\n",
    "       \n",
    "    if pacman in ghosts.values() or pacman in oldghosts.values():\n",
    "        #Se reinicia el juego\n",
    "        ghosts = {\"red\":[9,8],\"blue\":[1,8],\"yellow\":[7,3]}\n",
    "        pacman=[1,1]\n",
    "        comida = get_coordenadas_libres(tablero)\n",
    "        print(\"Game Over! Tu puntuación ha sido de \" + str(puntos) + \" puntos.\")\n",
    "        puntos=0\n",
    "        \n",
    "    ########## coloca esto en su lugar \n",
    "    \n",
    "    visor.value = pinta_juegoHTML(tablero,pacman,comida,puntos,ghosts)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 21,
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "8b1d28900ff640b4adb876d27ab66b69",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "VBox(children=(HTML(value='<table> <tr><td><img src=\"./spritesPacman/block.jpg\" alt=\"\" border=0 height=50 widt…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "'''\n",
    "Celda principal del juego\n",
    "\n",
    "'''\n",
    "\n",
    "from IPython.display import display\n",
    "from ipywidgets import HTML, Dropdown ,Button, HBox, VBox, Box\n",
    "\n",
    "# En cada partida se rellena el tablero de comida\n",
    "comida = get_coordenadas_libres(tablero)               \n",
    "\n",
    "# Visor HTML donde se representará el juego\n",
    "visor = HTML()\n",
    "visor.value = pinta_juegoHTML(tablero,pacman,comida,puntos,ghosts)\n",
    "\n",
    "# Botones para las direcciones\n",
    "up = Button(description=\"^\")\n",
    "down = Button(description=\"v\")\n",
    "right = Button(description=\">\")\n",
    "left = Button(description=\"<\")\n",
    "\n",
    "empty = Button(description=\" \")\n",
    "empty.margin = 2\n",
    "\n",
    "# se añaden eventos a los botones\n",
    "up.on_click(on_button_clicked)\n",
    "down.on_click(on_button_clicked)\n",
    "right.on_click(on_button_clicked)\n",
    "left.on_click(on_button_clicked)\n",
    "\n",
    "# Estética: Se crea una caja vertical con dos cajas horizontales dentro\n",
    "# Tenemos 2 x 3 casillas para colocar los botones y los colocamos en forma de teclado\n",
    "control = VBox([HBox([empty,up,empty]),HBox([left,down,right])])\n",
    "\n",
    "# El juego es el visor y los controles\n",
    "ui = VBox(children=[visor, control])\n",
    "\n",
    "display(ui)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 22,
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "outputs": [],
   "source": [
    "tablero2 = [[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],\n",
    "           [1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,1],\n",
    "           [1,0,1,1,1,1,0,1,1,1,1,1,0,1,1,0,1,1,1,1,1,0,1,1,1,1,0,1],\n",
    "           [1,0,1,1,1,1,0,1,1,1,1,1,0,1,1,0,1,1,1,1,1,0,1,1,1,1,0,1],\n",
    "           [1,0,1,1,1,1,0,1,1,1,1,1,0,1,1,0,1,1,1,1,1,0,1,1,1,1,0,1],\n",
    "           [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],\n",
    "           [1,0,1,1,1,1,0,1,1,0,1,1,1,1,1,1,1,1,0,1,1,0,1,1,1,1,0,1],\n",
    "           [1,0,1,1,1,1,0,1,1,0,1,1,1,1,1,1,1,1,0,1,1,0,1,1,1,1,0,1],\n",
    "           [1,0,0,0,0,0,0,1,1,0,0,0,0,1,1,0,0,0,0,1,1,0,0,0,0,0,0,1],\n",
    "           [1,1,1,1,1,1,0,1,1,1,1,1,0,1,1,0,1,1,1,1,1,0,1,1,1,1,1,1],\n",
    "           [1,1,1,1,1,1,0,1,1,1,1,1,0,1,1,0,1,1,1,1,1,0,1,1,1,1,1,1],\n",
    "           [1,1,1,1,1,1,0,1,1,0,0,0,0,0,0,0,0,0,0,1,1,0,1,1,1,1,1,1],\n",
    "           [1,1,1,1,1,1,0,1,1,0,1,1,1,1,1,1,1,1,0,1,1,0,1,1,1,1,1,1],\n",
    "           [1,1,1,1,1,1,0,1,1,0,1,1,1,1,1,1,1,1,0,1,1,0,1,1,1,1,1,1],\n",
    "           [1,1,1,1,1,1,0,0,0,0,1,1,1,1,1,1,1,1,0,0,0,0,1,1,1,1,1,1],\n",
    "           [1,1,1,1,1,1,0,1,1,0,1,1,1,1,1,1,1,1,0,1,1,0,1,1,1,1,1,1],\n",
    "           [1,1,1,1,1,1,0,1,1,0,1,1,1,1,1,1,1,1,0,1,1,0,1,1,1,1,1,1],\n",
    "           [1,1,1,1,1,1,0,1,1,0,0,0,0,0,0,0,0,0,0,1,1,0,1,1,1,1,1,1],\n",
    "           [1,1,1,1,1,1,0,1,1,0,1,1,1,1,1,1,1,1,0,1,1,0,1,1,1,1,1,1],\n",
    "           [1,1,1,1,1,1,0,1,1,0,1,1,1,1,1,1,1,1,0,1,1,0,1,1,1,1,1,1],\n",
    "           [1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,1],\n",
    "           [1,0,1,1,1,1,0,1,1,1,1,1,0,1,1,0,1,1,1,1,1,0,1,1,1,1,0,1],\n",
    "           [1,0,1,1,1,1,0,1,1,1,1,1,0,1,1,0,1,1,1,1,1,0,1,1,1,1,0,1],\n",
    "           [1,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,1],\n",
    "           [1,1,1,0,1,1,0,1,1,0,1,1,1,1,1,1,1,1,0,1,1,0,1,1,0,1,1,1],\n",
    "           [1,1,1,0,1,1,0,1,1,0,1,1,1,1,1,1,1,1,0,1,1,0,1,1,0,1,1,1],\n",
    "           [1,0,0,0,0,0,0,1,1,0,0,0,0,1,1,0,0,0,0,1,1,0,0,0,0,0,0,1],\n",
    "           [1,0,1,1,1,1,1,1,1,1,1,1,0,1,1,0,1,1,1,1,1,1,1,1,1,1,0,1],\n",
    "           [1,0,1,1,1,1,1,1,1,1,1,1,0,1,1,0,1,1,1,1,1,1,1,1,1,1,0,1],\n",
    "           [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],\n",
    "           [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]\n",
    "           ]\n",
    "pacman2 = [1,1]\n",
    "ghosts2 = {\"red\":[29,26],\"blue\":[1,26],\"yellow\":[29,1]}\n",
    "puntos2 = 0\n",
    "comida2 = get_coordenadas_libres(tablero2)      "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 23,
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "b9636b11bb244ecb85bc7459e54cec28",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "HTML(value='<table> <tr><td><img src=\"./spritesPacman/block.jpg\" alt=\"\" border=0 height=50 width=50></img></td…"
      ]
     },
     "execution_count": 23,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "HTML(pinta_juegoHTML(tablero2,pacman2,comida2,puntos2,ghosts2))"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 24,
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "outputs": [],
   "source": [
    "# Posible solución\n",
    "\n",
    "'''\n",
    "Esta será la función que se ejecutará al pulsar cada botón.\n",
    "En cada pulsación:\n",
    "- miro cuál es el botón pulsado\n",
    "- aplico el movimiento\n",
    "\n",
    "'''\n",
    "import random as rand\n",
    "\n",
    "def on_button_clicked2(b):\n",
    "    desc=b.description\n",
    "    mov = [0,0]\n",
    "    if desc==\"^\":\n",
    "        mov=[-1,0]\n",
    "    elif desc==\"v\":\n",
    "        mov=[1,0]\n",
    "    elif desc==\">\":\n",
    "        mov=[0,1]\n",
    "    elif desc==\"<\":\n",
    "        mov=[0,-1]\n",
    "    \n",
    "    global pacman2\n",
    "    global comida2\n",
    "    global puntos2\n",
    "    global ghosts2\n",
    "    \n",
    "    \n",
    "    posibleMov  = mueve(pacman2,mov)\n",
    "    oldghosts2=ghosts2.copy()\n",
    "\n",
    "    ########## modifica aquí\n",
    "    posmov = [[1,0],[0,1],[-1,0],[0,-1]]\n",
    "    \n",
    "    for i in ghosts2:\n",
    "        while True:\n",
    "            out=False\n",
    "            for j in posmov:\n",
    "                if mueve(ghosts2[i],j)==pacman2:\n",
    "                    ghosts2[i]=mueve(ghosts2[i],j)\n",
    "                    out=True\n",
    "                    break\n",
    "            else:\n",
    "                r = rand.randint(0, len(posmov)-1)\n",
    "                auxpos = mueve(ghosts2[i],posmov[r])\n",
    "                if esta_libre(tablero2,auxpos):\n",
    "                    ghosts2[i]=auxpos\n",
    "                    out=True\n",
    "            if out:\n",
    "                break\n",
    "    \n",
    "    if esta_libre(tablero2,posibleMov):\n",
    "        pacman2 = posibleMov\n",
    "    if hay_comida(pacman2,comida2):\n",
    "        comida2.remove(pacman2)\n",
    "        puntos2+=1\n",
    "       \n",
    "    if pacman2 in ghosts2.values() or pacman2 in oldghosts2.values():\n",
    "        #Se reinicia el juego\n",
    "        ghosts2 = {\"red\":[29,26],\"blue\":[1,26],\"yellow\":[29,1]}\n",
    "        pacman2=[1,1]\n",
    "        comida2 = get_coordenadas_libres(tablero2)\n",
    "        print(\"Game Over! Tu puntuación ha sido de \" + str(puntos2) + \" puntos.\")\n",
    "        puntos2=0\n",
    "        \n",
    "    ########## coloca esto en su lugar\n",
    "    \n",
    "    visor.value = pinta_juegoHTML(tablero2,pacman2,comida2,puntos2,ghosts2)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 25,
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "72a90b171de04b78bfb6ba2fc6bc5934",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "VBox(children=(HTML(value='<table> <tr><td><img src=\"./spritesPacman/block.jpg\" alt=\"\" border=0 height=50 widt…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "'''\n",
    "Celda principal del juego\n",
    "\n",
    "'''\n",
    "\n",
    "from IPython.display import display\n",
    "from ipywidgets import HTML, Dropdown ,Button, HBox, VBox, Box\n",
    "\n",
    "# En cada partida se rellena el tablero de comida\n",
    "comida = get_coordenadas_libres(tablero)               \n",
    "\n",
    "# Visor HTML donde se representará el juego\n",
    "visor = HTML()\n",
    "visor.value = pinta_juegoHTML(tablero2,pacman2,comida2,puntos2,ghosts2)\n",
    "\n",
    "# Botones para las direcciones\n",
    "up = Button(description=\"^\")\n",
    "down = Button(description=\"v\")\n",
    "right = Button(description=\">\")\n",
    "left = Button(description=\"<\")\n",
    "\n",
    "empty = Button(description=\" \")\n",
    "empty.margin = 2\n",
    "\n",
    "# se añaden eventos a los botones\n",
    "up.on_click(on_button_clicked2)\n",
    "down.on_click(on_button_clicked2)\n",
    "right.on_click(on_button_clicked2)\n",
    "left.on_click(on_button_clicked2)\n",
    "\n",
    "# Estética: Se crea una caja vertical con dos cajas horizontales dentro\n",
    "# Tenemos 2 x 3 casillas para colocar los botones y los colocamos en forma de teclado\n",
    "control = VBox([HBox([empty,up,empty]),HBox([left,down,right])])\n",
    "\n",
    "# El juego es el visor y los controles\n",
    "ui = VBox(children=[visor, control])\n",
    "\n",
    "display(ui)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "celltoolbar": "Slideshow",
  "kernelspec": {
   "display_name": "Python 3 (ipykernel)",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.9.7"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}