🐍 Snake Game

Un juego clásico de Snake implementado con tecnologías web modernas. Disfruta de la nostalgia del juego de la serpiente con un diseño limpio y responsivo que funciona en cualquier dispositivo.

🎮 Características

• Juego clásico: Mecánicas tradicionales del Snake con controles intuitivos
• Diseño responsivo: Se adapta perfectamente a desktop, tablet y móvil
• Tecnología moderna: Construido con HTML5 Canvas, CSS3 y JavaScript ES6+
• Sin dependencias: Vanilla JavaScript puro, sin frameworks externos
• Arquitectura limpia: Código modular y bien estructurado
• Testing completo: Suite de pruebas exhaustiva para todos los componentes

🚀 Cómo jugar

1. Objetivo: Controla la serpiente para comer la comida y crecer
2. Controles: Usa las teclas de flecha (↑ ↓ ← →) para mover la serpiente
3. Puntuación: Ganas 10 puntos por cada comida consumida
4. Game Over: El juego termina si chocas con las paredes o contigo mismo
5. Reiniciar: Haz clic en "Reiniciar Juego" para volver a empezar

🛠️ Tecnologías utilizadas

Core Technologies

• HTML5: Estructura semántica con Canvas API para renderizado
• CSS3: Diseño responsivo con flexbox y media queries
• JavaScript ES6+: Lógica del juego sin dependencias externas
• HTML5 Canvas: Contexto 2D para gráficos del juego

Arquitectura

• Patrón basado en componentes con clases ES6:
  • Game: Controlador principal y gestión del game loop
  • Snake: Lógica de la serpiente, movimiento y detección de colisiones
  • Food: Generación y posicionamiento de comida
  • InputHandler: Gestión de entrada por teclado

📁 Estructura del proyecto

snake-game/
├── index.html              # Archivo HTML principal
├── game.js                 # Lógica completa del juego
├── styles.css              # Estilos responsivos
├── README.md               # Este archivo
│
├── test-*.js               # Tests de componentes individuales
├── test-integration-*.js   # Tests de integración
└── verify-task-*.js        # Tests de verificación

🎯 Configuración del juego

const GRID_SIZE = 20;        // Tamaño de cada celda en píxeles
const CANVAS_SIZE = 400;     // Dimensiones del canvas (400x400)
const GAME_SPEED = 150;      // Intervalo del game loop en milisegundos
const GRID_COUNT = 20;       // Número de celdas de la grilla (20x20)

🚀 Instalación y ejecución

Opción 1: Abrir directamente

# Clona el repositorio
git clone [url-del-repositorio]
cd snake-game

# Abre index.html en tu navegador
open index.html  # macOS
start index.html # Windows
xdg-open index.html # Linux

Opción 2: Servidor local

# Con Python 3
python -m http.server 8000

# Con Node.js (si tienes http-server instalado)
npx http-server

# Luego visita http://localhost:8000

🧪 Testing

El proyecto incluye una suite completa de pruebas:

Tests de componentes

# Ejecutar en la consola del navegador o incluir en HTML
test-snake.js              # Funcionalidad de la serpiente
test-food.js               # Generación y posicionamiento de comida
test-input.js              # Manejo de entrada por teclado
test-rendering.js          # Sistema de renderizado
test-coordinates.js        # Sistema de coordenadas de grilla
test-collisions.js         # Detección de colisiones
test-game-loop.js          # Mecánicas del game loop
test-growth-scoring.js     # Crecimiento y puntuación
test-game-over-restart.js  # Gestión de estados del juego
test-responsiveness.js     # Diseño responsivo

Tests de integración

test-integration-complete.js        # Integración completa del juego
test-integration-growth-scoring.js  # Integración de crecimiento y puntuación

📱 Compatibilidad

Navegadores soportados

• Chrome 60+
• Firefox 55+
• Safari 12+
• Edge 79+

Dispositivos

• Desktop: Experiencia completa con controles de teclado
• Tablet: Interfaz adaptada con controles táctiles
• Móvil: Diseño optimizado para pantallas pequeñas

🎨 Diseño

• Paleta de colores: Minimalista en blanco y negro
• Tipografía: Arial, sans-serif para máxima legibilidad
• Layout: Centrado y responsivo con flexbox
• Canvas: Renderizado pixelado nítido para estética retro

🔧 Desarrollo

Comandos útiles

# No se requiere proceso de build
# Desarrollo directo en el navegador

# Para desarrollo con recarga automática
python -m http.server 8000

# Para debugging
# Abre las herramientas de desarrollador del navegador
# Todas las funciones de prueba están disponibles en la consola

Estructura de clases

// Clase principal del juego
class Game {
    init()           // Inicialización
    startGameLoop()  // Bucle principal
    update()         // Actualización de estado
    render()         // Renderizado
    reset()          // Reinicio del juego
}

// Lógica de la serpiente
class Snake {
    move()                    // Movimiento
    grow()                    // Crecimiento
    checkSelfCollision()      // Colisión consigo misma
    checkWallCollision()      // Colisión con paredes
    checkFoodCollision()      // Colisión con comida
}

// Gestión de comida
class Food {
    generateNewPosition()     // Nueva posición aleatoria
    isOnSnake()              // Verificación de posición
}

// Manejo de entrada
class InputHandler {
    handleKeyPress()         // Procesamiento de teclas
    changeDirection()        // Cambio de dirección
    isValidDirection()       // Validación de movimiento
}

🐛 Solución de problemas

Problemas comunes

El juego no se carga

• Verifica que tu navegador soporte HTML5 Canvas
• Asegúrate de que JavaScript esté habilitado
• Comprueba la consola del navegador para errores

Los controles no responden

• Haz clic en el área del juego para darle foco
• Verifica que las teclas de flecha no estén siendo interceptadas por el navegador

Problemas de rendimiento

• Cierra otras pestañas del navegador
• Verifica que no haya otros procesos intensivos ejecutándose

🤝 Contribuir

1. Fork el proyecto
2. Crea una rama para tu feature (git checkout -b feature/AmazingFeature)
3. Commit tus cambios (git commit -m 'Add some AmazingFeature')
4. Push a la rama (git push origin feature/AmazingFeature)
5. Abre un Pull Request

Guías de contribución

• Mantén el código limpio y bien documentado
• Incluye tests para nuevas funcionalidades
• Sigue las convenciones de nomenclatura existentes
• Asegúrate de que el diseño siga siendo responsivo

📄 Licencia

Este proyecto está bajo la Licencia MIT. Ver el archivo LICENSE para más detalles.

🎯 Roadmap

Próximas características

• Controles táctiles para móviles
• Múltiples niveles de dificultad
• Efectos de sonido
• Tabla de puntuaciones altas
• Temas de color personalizables
• Modo multijugador local

Mejoras técnicas

• Service Worker para funcionamiento offline
• Optimizaciones de rendimiento adicionales
• Soporte para PWA (Progressive Web App)
• Análisis de rendimiento automatizado

👨‍💻 Autor

Desarrollado con ❤️ usando tecnologías web modernas.

---

¡Disfruta jugando Snake! 🐍✨