← Retour aux projets

Web full stack

Puissance 4 Web

Projet universitaire de programmation web autour d'un Puissance 4 jouable dans le navigateur. L'application combine HTML, CSS, JavaScript et PHP pour gérer l'interface, la logique de jeu, la synchronisation entre joueurs et le stockage d'un état de partie partagé via un fichier JSON.

Vue d'ensemble

Le projet a été conçu comme une application web complète à petite échelle. Le but n'était pas seulement d'afficher un plateau, mais de gérer un vrai cycle de partie avec choix du camp, règles métier, interaction client-serveur et partage d'état entre plusieurs clients.

  • HTML
  • CSS
  • JavaScript
  • PHP
  • JSON

Ce que le projet montre

  • Capacité à réaliser un mini-projet web full stack de bout en bout.
  • Mise en place d'interactions client-serveur avec PHP sans framework lourd.
  • Gestion d'un état partagé sans base de données via un fichier JSON.
  • Implémentation d'une logique de jeu complète avec tours, gravité et victoire.

Points techniques

  • `jouer.php` applique les règles et met à jour l'état global de la partie.
  • `puissance4.php` génère l'interface selon le contenu du JSON partagé.
  • `puissance4.js` envoie les coups puis actualise régulièrement l'affichage.
  • Le stockage en JSON conserve le plateau, le joueur courant et l'état global.
  • Le projet montre une synchronisation simple entre plusieurs fenêtres ou clients.

Lancer le projet

Le plus simple est de placer le dossier dans `htdocs` sous XAMPP, de démarrer Apache puis d'ouvrir la page d'accueil du projet dans le navigateur.

# Placer le dossier dans htdocs
# Démarrer Apache
http://localhost/Puissance4/pageAccueil.html
Le stockage fichier reste volontairement simple et adapté à un projet pédagogique. Une évolution naturelle serait de passer à des sessions et à une base de données pour gérer plusieurs parties simultanées.