🏓 Pong Game

Jeu Pong classique revisité avec interface moderne, intelligence artificielle adaptative et mode multijoueur local.

Architecture

flowchart TB
    HTML["index.html<br/>menu · jeu · paramètres"]
    CSS["style.css<br/>thème · responsive"]
    INPUT["Entrées<br/>clavier · solo ou multi"]
    INIT["initGame(mode)<br/>solo vs IA · multijoueur"]
    LOOP["gameLoop()<br/>requestAnimationFrame"]
    UPDATE["update()<br/>physique balle · score"]
    PADDLE["movePaddles · aiLogic<br/>4 niveaux d'IA · prédiction"]
    COLLISION["collision()<br/>rebonds raquettes"]
    RENDER["render()<br/>canvas 2D"]

    HTML --> CSS
    HTML --> INPUT
    INPUT --> INIT
    INIT --> LOOP
    LOOP --> UPDATE
    UPDATE --> PADDLE
    UPDATE --> COLLISION
    UPDATE --> RENDER

Loading

🌟 Fonctionnalités

Modes de Jeu

• 🤖 Solo vs IA : Affrontez une intelligence artificielle avec 4 niveaux de difficulté
• 👥 Multijoueur Local : Jouez à deux sur le même clavier

Intelligence Artificielle

• Facile : IA lente avec réaction basique
• Moyen : IA équilibrée avec prédiction moyenne
• Difficile : IA rapide avec bonne anticipation
• Impossible : IA parfaite avec prédiction totale

Paramètres Personnalisables

• ⚙️ Difficulté IA : 4 niveaux ajustables
• 🎯 Vitesse de la balle : 3 à 10 (ajustable)
• 🏃 Vitesse des raquettes : 3 à 12 (ajustable)
• 🏆 Score pour gagner : 3 à 21 points

Fonctionnalités Avancées

• 🎮 Contrôles fluides : Détection clavier optimisée
• 📊 Système de score : Affichage en temps réel
• ⏸️ Pause : Menu de pause avec options
• 🏆 Écran de victoire : Modal avec score final
• 🎨 Effets visuels : Traînée de balle, animations
• 📱 Responsive : Adaptation mobile et desktop

🚀 Technologies

• HTML5 Canvas : Rendu graphique haute performance
• JavaScript ES6 : Logique de jeu et IA
• CSS3 : Interface moderne avec animations
• RequestAnimationFrame : Boucle de jeu optimisée

💻 Installation

Cloner le Projet

git clone https://github.com/Adam-Blf/Pong-Game.git
cd Pong-Game

Lancer le Jeu

Ouvrez simplement index.html dans votre navigateur :

# Windows
start index.html

# macOS
open index.html

# Linux
xdg-open index.html

Ou avec un serveur local :

# Python 3
python -m http.server 8000

# Node.js
npx http-server

Puis ouvrez http://localhost:8000

🎮 Contrôles

Joueur 1 (Gauche)

• W : Monter
• S : Descendre

Joueur 2 (Droite) - Mode Multijoueur

• ↑ : Monter
• ↓ : Descendre

Contrôles Globaux

• Esc : Pause / Reprendre
• Bouton Pause : Ouvrir le menu pause
• Bouton Quitter : Retour au menu principal

📂 Structure du Projet

Pong-Game/
│
├── index.html          # Structure HTML du jeu
├── style.css           # Styles et animations
├── script.js           # Logique du jeu et IA
├── README.md           # Documentation
└── .gitignore          # Fichiers à ignorer

🎨 Aperçu des Fonctionnalités

Menu Principal

• Interface élégante avec 3 options
• Affichage des contrôles
• Bouton Paramètres

Écran de Jeu

• Canvas 800x600px
• Affichage des scores en temps réel
• Ligne centrale pointillée
• Raquettes colorées (bleu/vert)
• Balle blanche avec effet de traînée

Intelligence Artificielle

L'IA utilise un algorithme de prédiction adaptatif :

const aiConfig = {
    easy: { speed: 0.4, prediction: 0.3, reaction: 0.6 },
    medium: { speed: 0.6, prediction: 0.5, reaction: 0.4 },
    hard: { speed: 0.8, prediction: 0.7, reaction: 0.2 },
    impossible: { speed: 1, prediction: 1, reaction: 0 }
};

• Speed : Vitesse de déplacement de la raquette IA
• Prediction : Précision de l'anticipation de la trajectoire
• Reaction : Délai de réaction (plus bas = plus rapide)

Physique de la Balle

• Collision avec raquettes : Angle de rebond basé sur le point d'impact
• Accélération progressive : La balle accélère à chaque toucher (max 15)
• Rebonds muraux : Inversion de la direction verticale
• Reset après point : Direction aléatoire pour chaque nouveau point

🎯 Règles du Jeu

1. Objectif : Marquer des points en faisant passer la balle derrière la raquette adverse
2. Score : Premier à atteindre le score défini (par défaut 11) gagne
3. Vitesse : La balle accélère progressivement au fil du jeu
4. Rebonds : L'angle de rebond dépend de l'endroit où la balle touche la raquette

🔧 Fonctionnement Interne

Boucle de Jeu (Game Loop)

function gameLoop() {
    update();   // Mise à jour physique et logique
    render();   // Rendu graphique
    requestAnimationFrame(gameLoop);
}

Détection de Collision

Collision précise entre la balle et les raquettes :

function collision(ball, player) {
    return ball.x - ball.radius < paddleX + paddle.width &&
           ball.x + ball.radius > paddleX &&
           ball.y - ball.radius < player.y + paddle.height &&
           ball.y + ball.radius > player.y;
}

Logique IA

L'IA prédit la position future de la balle :

const timeToReach = (paddle.player2.x - ball.x) / ball.velocityX;
const targetY = ball.y + ball.velocityY * timeToReach * config.prediction;

🌐 Compatibilité

Navigateur	Version Minimale
Chrome	90+
Firefox	88+
Safari	14+
Edge	90+
Opera	76+

🚀 Améliorations Futures

• Power-ups : Bonus modifiant la taille, vitesse, etc.
• Modes de jeu : Survival, Time Attack
• Effets sonores : Bruitages de collision et score
• Multijoueur en ligne : Via WebRTC ou WebSockets
• Classement : Sauvegarde des meilleurs scores
• Replay : Revoir les parties
• Thèmes visuels : Personnalisation des couleurs
• Obstacles : Murs mobiles dans l'arène

📊 Optimisations Techniques

Performance

• Utilisation de requestAnimationFrame pour 60 FPS fluides
• Canvas rendering optimisé
• Calculs mathématiques pré-calculés

Responsive

• Canvas adaptatif pour mobile
• Menu overlay pour petits écrans
• Contrôles tactiles (à venir)

🎓 Concepts Utilisés

JavaScript

• Canvas API et contexte 2D
• RequestAnimationFrame pour animation fluide
• Event Listeners (clavier, boutons)
• Algorithmes de collision
• Intelligence artificielle prédictive

Physique

• Vecteurs de vitesse (velocityX, velocityY)
• Rebonds élastiques
• Accélération progressive
• Angle de collision dynamique

🤝 Contribution

Les contributions sont les bienvenues !

1. Fork le projet
2. Créez une branche (git checkout -b feature/NewFeature)
3. Committez (git commit -m 'Add NewFeature')
4. Push (git push origin feature/NewFeature)
5. Ouvrez une Pull Request

📄 Licence

Projet open source - libre d'utilisation pour projets personnels ou éducatifs.

👤 Auteur

Adam Beloucif

• GitHub: @Adam-Blf
• Portfolio: Voir mes projets

🙏 Remerciements

• Inspiré du jeu Pong original (1972) d'Atari
• Physique de collision basée sur les principes classiques
• Design moderne inspiré des interfaces actuelles

---

⭐ N'oubliez pas de mettre une étoile si vous aimez ce projet ! ⭐

---

_{Par Adam Beloucif · Data Engineer & Fullstack Developer · GitHub · LinkedIn}

Star History