100 Días de Código en Python — Día 87: Proyecto de portafolio — Breakout, el juego de romper ladrillos

📝 Contenido original del curso#

Breakout fue un juego exitoso programado originalmente por Steve Wozniak antes de que él y Jobs fundaran Apple. Es un juego sencillo, parecido al Pong, en el que usas una pelota y una paleta para derribar un muro (de ladrillos). (El enunciado enlaza la página de Wikipedia del juego, una imagen y una versión jugable en elgoog.im/breakout.)

Un buen punto de partida es repasar las lecciones del Día 22, cuando construimos el Pong. Pero tendrás muchas cosas que buscar en Google, descifrar y pelear para completar este proyecto. Evita ir a un tutorial de cómo construir Breakout: en su lugar, especifica el proyecto, descubre cómo va a funcionar, escribe una lista de tareas (checklist of todos) y dibuja un diagrama de flujo (si te ayuda).

Pregunta de la tarea — Momento de reflexión: cómo abordaste el proyecto; qué fue difícil y qué fácil; cómo mejorarías; tu mayor aprendizaje; qué harías distinto.

Prerequisitos: turtle y coordenadas (Días 18–19); clases, herencia y el ciclo de juego con tracer/update (Días 16, 20 y 21); el Pong (Día 22) y el cruce de la tortuga (Día 23); listas (Día 4).

🔍 Antes de programar#

Juega Breakout durante 5 minutos (en la versión del enunciado) y responde por escrito:

Ejemplo de especificación y lista de tareas#

OBJETOS: Paleta, Pelota, Ladrillo (muchos), Marcador
REGLAS:
  - La pelota rebota en paredes laterales y techo.
  - Rebota en la paleta; el ángulo depende de dónde golpea.
  - Al tocar un ladrillo: el ladrillo desaparece, suma puntos, la pelota rebota.
  - Si la pelota cae por debajo de la paleta: se pierde una vida (3 vidas).
  - Se gana al romper todos los ladrillos.

LISTA DE TAREAS (checklist)
[ ] Ventana y ciclo de juego (tracer(0) + update)
[ ] Paleta que se mueve con ← → sin salirse
[ ] Pelota que se mueve y rebota en paredes y techo
[ ] Rebote en la paleta
[ ] Muro de ladrillos (filas de colores)
[ ] Colisión pelota-ladrillo: borrar ladrillo y rebotar
[ ] Vidas y fin de juego
[ ] Marcador (puntos y vidas)
[ ] Victoria al romper todo
[ ] Extras: niveles, velocidad creciente, récord

Diagrama de flujo de un "cuadro" (frame) del juego#

┌─► mover pelota
│      ▼
│   ¿toca pared lateral? ── sí ─► invertir dx
│   ¿toca techo? ────────── sí ─► invertir dy
│   ¿toca paleta? ───────── sí ─► rebotar con ángulo (sección 5)
│   ¿toca un ladrillo? ──── sí ─► ocultar ladrillo, sumar puntos, rebotar
│   ¿cayó al suelo? ─────── sí ─► restar vida ─► ¿vidas = 0? ─► GAME OVER
│   ¿quedan ladrillos? ──── no ─► ¡VICTORIA!
│      ▼
│   actualizar pantalla y esperar un instante
└──────┘

📝 Este diagrama ya es casi el código de tu ciclo while. Cuando te pierdas programando, vuelve a él.

🎯 Objetivo de aprendizaje#

Detectar si la pelota toca un rectángulo usando distancias en cada eje.

📖 Explicación conceptual#

En el Pong se usaba ball.distance(paddle) < 50: mide la distancia al centro, como si la paleta fuera un círculo. Con ladrillos anchos y bajitos esa aproximación falla: la pelota "choca" con el aire encima del ladrillo, o atraviesa sus esquinas.

Mejor: comprobar cada eje por separado. Un cuadrado de turtle mide 20 × 20 píxeles; shapesize(stretch_wid=1, stretch_len=3) lo convierte en 60 × 20. Su medio ancho es 30 y su medio alto, 10. La pelota (radio 10) toca el ladrillo si:

• la distancia horizontal entre centros es menor que medio ancho + radio, y
• la distancia vertical es menor que medio alto + radio.

        ◄──── 30 ────►◄10►
        ┌─────────────┐
        │  ladrillo ● │ centro
        └─────────────┘
                         ○  pelota: choca si |dx| < 40 y |dy| < 20

🔎 Ejemplo explicado#

RADIO_BOLA = 10

def choca(bola_x, bola_y, rect_x, rect_y, medio_ancho, medio_alto):
    return (abs(bola_x - rect_x) < medio_ancho + RADIO_BOLA and
            abs(bola_y - rect_y) < medio_alto + RADIO_BOLA)

• Recibe números, no objetos Turtle: así se prueba sin abrir ventanas (choca(0, 0, 0, 15, 30, 10) → True; choca(0, 40, 0, 15, 30, 10) → False).
• abs() da la distancia sin importar si la pelota está a la izquierda o a la derecha.
• En el juego se llamaría con bola.xcor(), bola.ycor(), ladrillo.xcor(), ladrillo.ycor().

Crear el muro#

def crear_filas(filas, columnas, ancho=60, alto=20, x0=-270, y0=250):
    return [(x0 + c * ancho, y0 - f * alto)
            for f in range(filas) for c in range(columnas)]

Devuelve las posiciones (comprensión de listas anidada, Día 26). Con 5 filas y 10 columnas: 50 posiciones, de (-270, 250) a (270, 170). Tu turno: crea un Ladrillo (clase que hereda de Turtle) en cada posición, con un color por fila.

¿Por qué lado chocó?#

Si la pelota golpea un ladrillo desde abajo, debe invertir su movimiento vertical. Si lo golpea de lado, el horizontal. Una forma de decidirlo: comparar cuánto se "meten" (solapan) la pelota y el ladrillo en cada eje. El eje con menos solapamiento es el lado por el que entró.

def lado_del_choque(bola_x, bola_y, rect_x, rect_y, medio_ancho, medio_alto):
    solape_x = medio_ancho + RADIO_BOLA - abs(bola_x - rect_x)
    solape_y = medio_alto + RADIO_BOLA - abs(bola_y - rect_y)
    return "lateral" if solape_x < solape_y else "vertical"

Verificado: pelota justo debajo del ladrillo → "vertical"; pelota en su borde izquierdo → "lateral".

Alternativa más simple: invertir siempre dy. Funciona "bastante bien" y muchos clones lo hacen. Compara ambas jugando y decide.

El ángulo en la paleta#

Si la pelota siempre rebota igual en la paleta, el jugador no tiene control. En Breakout, dónde golpea la pelota cambia el ángulo: en el centro sale recta hacia arriba; en los extremos, inclinada.

def angulo_rebote(bola_x, paleta_x, medio_ancho=50, max_grados=60):
    relativo = (bola_x - paleta_x) / medio_ancho   # -1 (borde izq.) a 1 (borde der.)
    relativo = max(-1, min(1, relativo))
    return 90 - relativo * max_grados

Verificado: centro → 90° (arriba); borde derecho → 30°; borde izquierdo → 150°. El max/min "recorta" el valor si la pelota golpea un poco fuera del borde.

Prerequisito — de ángulo a movimiento: con turtle puedes usar bola.setheading(angulo) y bola.forward(velocidad). Si guardas dx y dy, necesitas trigonometría: dx = velocidad * math.cos(math.radians(angulo)) y dy = velocidad * math.sin(math.radians(angulo)). Elige un enfoque y úsalo en todo el juego.

⚠️ Errores frecuentes#

Problema#

Construir el juego Breakout con Python turtle.

Contexto#

La sala de informática tiene una "semana de juegos clásicos" y cada grupo presenta un juego programado por sus integrantes.

Objetivo#

Un Breakout jugable, con muro de ladrillos, vidas, puntaje, victoria y derrota, organizado en clases.

Requisitos funcionales#

1. Paleta controlada con las flechas, sin salir de la pantalla.
2. Pelota que rebota en paredes, techo, paleta y ladrillos.
3. Al menos 4 filas de ladrillos; cada ladrillo golpeado desaparece y suma puntos.
4. 3 vidas; mensaje de "Game over" y de victoria.

Restricciones técnicas#

• Una clase por tipo de objeto (Paleta, Pelota, Ladrillo o Muro, Marcador) en archivos separados, como en el Pong.
• Colisiones en funciones puras probadas con assert.
• Sin copiar un tutorial de Breakout (lo pide el curso): documenta en el diario qué buscaste y dónde.

Planificación#

La especificación, la lista de tareas y el diagrama de la sección 2 son tu planificación. Añade: 8. probar cada casilla de la lista antes de marcarla; 9. corregir; 10. mejorar con los retos.

Construcción paso a paso#

• Versión 1 — Paleta: ventana, ciclo de juego y paleta con límites.
• Versión 2 — Pelota: movimiento y rebotes en paredes y techo; si cae, reaparece en el centro.
• Versión 3 — Paleta y pelota: rebote con ángulo (sección 5).
• Versión 4 — Muro: dibujar los ladrillos con colores por fila.
• Versión 5 — Romper: colisión con ladrillos, eliminarlos, sumar puntos (las filas de arriba valen más).
• Versión 6 — Reglas: vidas, game over, victoria.
• Versión final — Pulido: velocidad creciente, README.md con captura o GIF, diario.

Pruebas#

🧪 Prueba y depuración#

for ladrillo in ladrillos:
    if pelota.distance(ladrillo) < 20:
        ladrillo.hideturtle()
        pelota.bounce_y()

Encuentra tres problemas: distance < 20 trata el ladrillo de 60 px como un punto (los extremos no chocan); el ladrillo oculto sigue en la lista; y si toca dos a la vez, rebota dos veces (se anula).

⭐ Extensión del proyecto#

• 🟢 Reto 1 — Aplicación: la velocidad de la pelota aumenta cada 10 ladrillos.
• 🟡 Reto 2 — Ampliación: ladrillos "duros" que necesitan dos golpes y cambian de color tras el primero.
• 🟠 Reto 3 — Desafío: niveles: al ganar, se carga un muro con otra forma leído desde un archivo de texto (por ejemplo, # = ladrillo, . = vacío).
• 🔴 Reto 4 — Pensamiento computacional: "poderes" que caen de algunos ladrillos (paleta más ancha, pelota extra). Diseña cómo manejar varias pelotas a la vez sin duplicar código, y qué pasa con las vidas si cae una de ellas.

Situación#

El comité ambiental del colegio quiere un juego para la semana del reciclaje. En lugar de ladrillos, el muro está formado por residuos de tres colores (blanco = aprovechables, verde = orgánicos, negro = no aprovechables, según el código de colores de separación en la fuente usado en Colombia). La paleta tiene el color de una caneca, que el jugador cambia con la barra espaciadora.

Requisitos#

1. Un residuo solo se rompe si la paleta tenía el color correcto en el último rebote; si no, resta puntos.
2. Al final, un resumen: cuántos residuos se clasificaron bien por color.
3. Reutiliza tus clases del Breakout (herencia: Residuo(Ladrillo)).

Decisiones que debes tomar (y justificar)#

• ¿Cómo sabe el residuo cuál fue el último color de la paleta? ¿Dónde guardas ese dato?
• ¿Cómo haces que el juego sea educativo sin ser frustrante?

Casos de prueba#

• Golpe con color correcto: el residuo desaparece y suma.
• Golpe con color incorrecto: el residuo sigue y resta.

Conceptuales#

1. ¿Por qué distance() no es adecuada para detectar colisiones con ladrillos?
2. ¿Qué ventaja tiene escribir choca con números en lugar de objetos Turtle?
3. ¿Por qué no conviene eliminar elementos de una lista mientras la recorres con for?
4. ¿Por qué el ángulo de rebote en la paleta mejora la jugabilidad?

Análisis de código#

t = Turtle("square")
t.shapesize(stretch_wid=1, stretch_len=4)

¿Qué medidas tiene el rectángulo? ¿Qué medio_ancho y medio_alto usarías en choca?

Predicción#

¿Qué devuelve angulo_rebote(-25, 0)? ¿Hacia dónde sale la pelota?

Depuración#

"Cuando la pelota golpea la paleta de lado, se queda pegada vibrando." Propón dos soluciones.

Modificación#

Cambia crear_filas para que el muro quede centrado en la pantalla para cualquier número de columnas.

Creación#

Escribe puntos_por_fila(y) que devuelva 7 puntos para las filas más altas, 5, 3 y 1 para las más bajas.