100 Días de Código en Python — Día 20: El Juego de la Serpiente (Parte 1) — Animación y Coordenadas

🎯 Objetivo de aprendizaje#

• Configurar el tamaño, el color de fondo y el título de la ventana.
• Crear varios objetos a partir de una lista de tuplas de posiciones.

📖 Explicación conceptual#

from turtle import Screen, Turtle

screen = Screen()
screen.setup(width=600, height=600)   # palabras clave: más claro para quien lea
screen.bgcolor("black")               # color de fondo
screen.title("My Snake Game")         # texto de la barra de título

screen.exitonclick()

Cada segmento de la serpiente será una tortuga con forma de cuadrado. Una tortuga cuadrada mide 20 × 20 píxeles, así que, para que los cuadrados queden pegados sin superponerse, cada uno debe estar 20 píxeles a la izquierda del anterior: (0, 0), (−20, 0) y (−40, 0).

📝 Ejercicio original del curso: tres segmentos alineados#

Enunciado: crear tres cuadrados blancos, alineados en el eje horizontal, sin huecos ni superposición, con el primero en (0, 0).

🔍 Antes de programar#

• Si la ventana es negra y la tortuga es negra, ¿la verás?
• ¿Qué pasa si creas los tres cuadrados sin moverlos?
• ¿Cómo evitas escribir tres veces el mismo código?

Solución del curso, en dos versiones:

1. Versión repetitiva: segment_1, segment_2 y segment_3, cada uno con Turtle("square"), color("white") y un goto distinto.
2. Versión con bucle (la recomendada):

STARTING_POSITIONS = [(0, 0), (-20, 0), (-40, 0)]   # lista de tuplas (x, y)

for position in STARTING_POSITIONS:
    new_segment = Turtle("square")
    new_segment.color("white")
    new_segment.goto(position)       # goto acepta directamente una tupla

Buena práctica: la segunda versión evita el código repetido. Si mañana quieres una serpiente de 5 segmentos, solo agregas dos tuplas.

Retos adicionales (creados para esta adaptación)#

• 🟢 Reto 1: crea una serpiente de 5 segmentos agregando posiciones a la lista.
• 🟡 Reto 2: genera la lista de posiciones con un bucle a partir de una constante STARTING_LENGTH = 5, en lugar de escribirla a mano.
• 🟠 Reto 3: haz que la serpiente empiece vertical, con la cabeza arriba. ¿Qué coordenada cambia?
• 🔴 Reto 4: colorea la cabeza de un color distinto al del cuerpo. ¿Dónde tomas esa decisión dentro del bucle?

🎯 Objetivo de aprendizaje#

• Controlar cuándo se redibuja la pantalla para crear una animación fluida.
• Controlar la velocidad del juego con time.sleep.

📖 Explicación conceptual#

El problema: al mover los segmentos uno por uno, se ve cómo avanza cada pieza por separado, como una oruga extraña. Además, al crear cada segmento se ve cómo nace en el centro y luego salta a su posición.

La idea de la animación. Los antiguos televisores de tubo (CRT) pintaban la imagen línea por línea y, al terminar, empezaban la siguiente. Un GIF animado es una serie de imágenes que se muestran muy rápido. En nuestro juego haremos lo mismo: preparar cada "fotograma" moviendo todas las piezas sin mostrarlas, y luego mostrarlo completo.

🔎 Ejemplo explicado: el experimento del curso#

El curso mueve de lugar update() y sleep() para ver qué cambia:

import time

screen.tracer(0)
# ... crear los segmentos ...

game_is_on = True
while game_is_on:
    screen.update()          # 1) muestra el fotograma completo
    time.sleep(0.1)          # 2) espera un momento
    for seg in segments:     # 3) prepara el siguiente fotograma
        seg.forward(20)

Con sleep(1) se ve muy lento; con sleep(0.1) la velocidad es razonable.

⚠️ Errores frecuentes#

Retos adicionales (creados para esta adaptación)#

• 🟢 Reto 1: prueba sleep con 0.5, 0.1 y 0.05. ¿Cuál te parece jugable?
• 🟡 Reto 2: crea una constante GAME_SPEED y úsala en sleep.
• 🟠 Reto 3: anima una pelota que rebote dentro de la ventana usando tracer(0) y update().
• 🔴 Reto 4: mide con time.time() cuántos fotogramas por segundo (FPS) logra tu juego con sleep(0.1). ¿Es exactamente 10? Explica la diferencia.

🎯 Objetivo de aprendizaje#

• Explicar por qué "mover todos hacia adelante" falla al girar.
• Implementar el algoritmo en el que cada segmento ocupa el lugar del anterior, usando range con paso negativo.

📖 Explicación conceptual#

El problema al girar. Si todos los segmentos hacen forward(20) y la cabeza gira a la izquierda, solo la cabeza cambia de rumbo: el cuerpo sigue derecho y se separa. El curso lo demuestra haciendo girar la cabeza 90° en cada vuelta: la cabeza da vueltas sola y el cuerpo se va.

La solución: mover de atrás hacia adelante.

1. El último segmento va a la posición del penúltimo.
2. El penúltimo va a la posición del anterior… y así hasta el segundo.
3. Por último, la cabeza avanza 20 pasos en su dirección.

Así, el cuerpo siempre recorre el mismo camino que hizo la cabeza. Es como una fila de estudiantes caminando: cada uno pisa donde estaba el de adelante.

range con tres argumentos: inicio, parada y paso.

list(range(1, 4, 1))     # [1, 2, 3]
list(range(3, 0, -1))    # [3, 2, 1]  → paso negativo: cuenta hacia atrás
list(range(2, 0, -1))    # [2, 1]     → la parada (0) NO se incluye

🔎 Ejemplo explicado#

for seg_num in range(len(segments) - 1, 0, -1):
    new_x = segments[seg_num - 1].xcor()
    new_y = segments[seg_num - 1].ycor()
    segments[seg_num].goto(new_x, new_y)
segments[0].forward(20)

• Con 3 segmentos, range(2, 0, -1) da 2, 1: se mueven el último y el del medio. El segmento 0 (la cabeza) no entra en el bucle porque se mueve con forward.
• Se usa len(segments) - 1 en lugar de 2 para que el código funcione con cualquier longitud (¡la serpiente crecerá mañana!).

Verificación sin ventana (serpiente en (0, 0), (−20, 0), (−40, 0) mirando al Este): después de una vuelta, las posiciones son (20, 0), (0, 0), (−20, 0). Cada segmento ocupó el lugar del anterior y la cabeza avanzó 20.

🛠️ Nota técnica (verificada): el curso escribe primero range(start=2, stop=0, step=-1) para visualizarlo, y muestra que produce un error. Efectivamente: TypeError: range() takes no keyword arguments. El curso lo explica diciendo que range "viene del lenguaje C". Es más preciso decir que, en CPython, range está implementado en C y fue definido sin admitir argumentos por nombre. La idea práctica es la misma: con range, solo argumentos posicionales.

⚠️ Errores frecuentes#

Retos adicionales (creados para esta adaptación)#

• 🟢 Reto 1: en papel cuadriculado, dibuja 4 vueltas del algoritmo con una serpiente de 4 segmentos que gira hacia arriba en la segunda vuelta.
• 🟡 Reto 2: escribe el algoritmo usando solo listas de tuplas, sin Turtle, e imprime las posiciones en cada vuelta.
• 🟠 Reto 3: reescribe el bucle recorriendo segments[::-1]... ¿funciona igual? *(Mañana veremos el *slicing. Analiza qué problema aparece con la cabeza.)
• 🔴 Reto 4: existe otra forma de mover la serpiente: mover el último segmento al frente de la cabeza en cada vuelta. Explica cómo funcionaría y qué ventajas tendría con una serpiente de 500 segmentos.

🎯 Objetivo de aprendizaje#

• Refactorizar: reorganizar el código sin cambiar lo que hace.
• Crear una clase en su propio archivo con atributos, métodos y constantes.

📝 Ejercicio original del curso#

Enunciado: llevar todo lo relacionado con la serpiente a un archivo snake.py con una clase Snake, de modo que main.py quede así de simple:

from snake import Snake

snake = Snake()          # crea la serpiente de 3 segmentos

while game_is_on:
    screen.update()
    time.sleep(0.1)
    snake.move()         # toda la lógica del movimiento está en la clase

Resultado esperado: el programa funciona exactamente igual que antes. Solo cambia la organización.

Estructura de la solución del curso:

¿Por qué constantes? Si quieres cambiar dónde empieza la serpiente o cuánto avanza, miras arriba del archivo y no tienes que buscar dentro del código.

¿Por qué una clase por archivo? Al final del proyecto habrá tres clases: Snake, Food y Scoreboard. Si algo falla con la serpiente, sabes qué archivo revisar.

⚠️ Errores frecuentes#

Retos adicionales (creados para esta adaptación)#

• 🟢 Reto 1: agrega a __init__ un parámetro color para crear serpientes de distintos colores.
• 🟡 Reto 2: agrega un método length() que devuelva el número de segmentos.
• 🟠 Reto 3: crea dos serpientes en main.py y haz que ambas se muevan. ¿Qué pasa con sus posiciones iniciales? Agrega un parámetro para evitarlo.
• 🔴 Reto 4: escribe los docstrings de la clase y de cada método, explicando qué hace cada uno sin mirar el código de ejemplo.

🎯 Objetivo de aprendizaje#

• Vincular las flechas del teclado con métodos de un objeto.
• Impedir que la serpiente se devuelva sobre sí misma.

📝 Ejercicio original del curso#

Enunciado: en main.py ya están los vínculos:

screen.listen()
screen.onkey(snake.up, "Up")        # método del objeto, sin paréntesis
screen.onkey(snake.down, "Down")
screen.onkey(snake.left, "Left")
screen.onkey(snake.right, "Right")

Tu trabajo: escribir los métodos up, down, left y right en la clase Snake.

Recordatorio de rumbos (sentido antihorario desde el Este):

Pasos de la solución del curso:

1. Solo se gira la cabeza (self.segments[0].setheading(90)); el cuerpo la sigue gracias al algoritmo de la sección 3.
2. Mientras se prueba un método, los demás se dejan con pass, porque Python no acepta funciones vacías.
3. Como la cabeza se usa en muchos lugares, se crea el atributo self.head = self.segments[0]. Cuidado: debe ir después de create_snake(); antes, la lista está vacía y daría IndexError.
4. Se crean las constantes UP = 90, DOWN = 270, LEFT = 180, RIGHT = 0.
5. La serpiente no puede devolverse: si va hacia abajo, no puede subir.

def up(self):
    if self.head.heading() != DOWN:     # heading() es un MÉTODO: lleva paréntesis
        self.head.setheading(UP)

Con la misma lógica se completan down (si no va hacia arriba), left (si no va a la derecha) y right (si no va a la izquierda).

⚠️ Errores frecuentes#

Problema#

Construir la primera mitad del juego de la serpiente: pasos 1, 2 y 3.

Contexto#

Recrear un clásico es una excelente forma de aprender: sabes exactamente cómo debe comportarse, así que puedes comprobar si tu programa lo hace bien.

Requisitos funcionales#

1. Ventana negra de 600 × 600 con título.
2. Serpiente blanca de 3 segmentos en el centro.
3. Movimiento continuo y fluido, como una sola pieza.
4. El cuerpo sigue el camino de la cabeza al girar.
5. Control con las flechas, sin poder devolverse.

Restricciones técnicas#

Clase Snake en snake.py, constantes, tracer(0) y update(), time.sleep y range con paso negativo.

Planificación y construcción#

Después de cada versión, ejecuta y comprueba que todo lo anterior sigue funcionando. Eso es lo que hace el curso en cada lección.

Pruebas#

🧪 Prueba y depuración: el giro demasiado rápido#

Hay un error que el curso no detecta. Imagina que la serpiente va a la derecha y el jugador pulsa ↑ y ← muy rápido, antes de que se dibuje el siguiente fotograma:

1. up(): el rumbo actual es 0 (no es abajo) → la cabeza cambia a 90.
2. left(): el rumbo actual ahora es 90 (no es derecha) → la cabeza cambia a 180.
3. En el siguiente fotograma, la cabeza avanza a la izquierda… ¡sobre su propio cuerpo!

Verificación sin ventana: con la serpiente en (20, 0), (0, 0), (−20, 0) mirando al Este, aplicar up() y left() seguidos y luego move() deja la cabeza en (0, 0), exactamente donde queda el segundo segmento. Mañana, cuando se detecte el choque con la cola, esto hará perder al jugador sin que haya hecho nada prohibido.

Actividad:

• Explica con tus palabras por qué la condición if self.head.heading() != DOWN no es suficiente.
• Propón una corrección. (Idea: guardar la "dirección solicitada" en un atributo y aplicarla dentro de move(), comparándola con la dirección en la que la serpiente realmente se movió en el último fotograma.)

⭐ Extensión del proyecto#

• Aceptar también las teclas W, A, S y D.
• Una tecla "p" para pausar y reanudar (pista: una variable que controle si move() se ejecuta).
• Que la serpiente acelere un poco cada 10 segundos.

Situación#

La coordinación del colegio quiere una animación para la pantalla de la entrada: un tren de vagones que recorre el mapa del colegio y se detiene en cada parada (portería, biblioteca, cafetería, laboratorio, coliseo).

Requisitos#

1. Un mapa simple dibujado con Turtle y las paradas marcadas con dot y su nombre con write.
2. Una lista de tuplas RUTA con las coordenadas de cada parada.
3. Una clase Tren con una locomotora y 4 vagones que siguen a la locomotora con el algoritmo de la sección 3.
4. La locomotora usa towards(x, y) (búscalo en la documentación) para orientarse hacia la siguiente parada y avanza de 10 en 10 hasta llegar a ella.
5. En cada parada, el tren se detiene 1 segundo y la consola muestra "Llegando a: ...".
6. Al terminar la ruta, vuelve a empezar.

Decisiones que debes tomar#

• ¿Cómo sabes que la locomotora "llegó" si no cae exactamente en la coordenada? (Pista: distance() y un margen.)
• ¿Qué atributo guarda a qué parada se dirige el tren?

Reflexión#

¿Qué partes de la clase Snake pudiste reutilizar? ¿Qué tuviste que cambiar porque el tren no lo controla una persona?

Situación problema#

Para el torneo de videojuegos del descanso, se quiere un juego de serpientes para dos jugadores en el mismo teclado.

Pregunta orientadora#

¿Cómo reutilizar una sola clase para crear dos objetos con estado distinto que respondan a controles distintos?

Requerimientos#

1. La clase Snake recibe como parámetros el color, la posición inicial y el rumbo inicial.
2. Jugador 1: serpiente verde a la izquierda, controles W, A, S, D. Jugador 2: serpiente azul a la derecha, controles con las flechas.
3. Ninguna serpiente puede devolverse, incluido el caso del giro rápido de la sección 6.
4. Una tecla "space" inicia la partida; antes, las serpientes están quietas.
5. Constantes para el tamaño de la ventana, la velocidad y la distancia de movimiento.

Etapas de desarrollo#

1. Clase Snake parametrizada y dos instancias en pantalla.
2. Movimiento de ambas en el mismo bucle.
3. Controles separados.
4. Corrección del giro rápido y tecla de inicio.

Entregables#

• snake.py y main.py.
• Un diagrama que muestre las dos instancias, sus atributos y qué teclas llaman a qué métodos.
• Un video corto o capturas de una partida.

Casos de prueba#

Criterios técnicos#

• main.py no contiene lógica de movimiento: solo crea objetos, vincula teclas y ejecuta el bucle.
• Agregar un tercer jugador solo requiere crear otra instancia y sus vínculos.

Posibles extensiones#

Mañana, al aprender las colisiones, podrás hacer que pierda la serpiente que choque con la otra.

Conceptuales#

1. ¿Para qué sirven tracer(0) y update()? ¿Qué pasa si usas solo uno de los dos?
2. ¿Por qué el bucle del movimiento recorre los segmentos de atrás hacia adelante?
3. ¿Qué significa refactorizar? ¿Cómo sabes que una refactorización salió bien?

Análisis de código#

print(list(range(5, 0, -2)))
print(list(range(0, 5, -1)))

Explica cada resultado.

Predicción#

Serpiente en (0, 0), (−20, 0), (−40, 0) mirando al Este. Se pulsa ↑ y luego se ejecuta move() dos veces. ¿Dónde queda cada segmento?

Depuración#

class Snake:
    def __init__(self):
        self.head = self.segments[0]
        self.segments = []
        self.create_snake()

    def up(self):
        if self.head.heading != 270:
            self.head.setheading(90)

Encuentra dos errores y explica qué síntoma produciría cada uno.

Modificación#

Cambia MOVE_DISTANCE a 10. ¿Qué otro valor del código también deberías cambiar para que los segmentos no se superpongan?

Creación#

Escribe un programa que anime un reloj: una tortuga-manecilla que gira 6° por segundo usando tracer(0), update() y sleep(1).