[jeux] simulateur de poker en ajax

Télécharger le projet
Commenter

Description

Ceci est un simulateur de poker (Texas Hold'em pour l'instant).
L'application n'est pas très immanence car j'en suis au début.
Cependant on peux avoir 2 cartes et voir les cartes communes, il est impossible d'avoir des cartes en doublons.

Développement Éffectuer
  • Développer en Ajax et PHP5
  • Communication ASYNCHRONE vers un fichier PHP
  • Avec une feuille de style
  • Avec contrôle de readyState et de status
  • Avec gestion du chargeur et blocage des bouton
  • Avec une fonction universelle de création d'objet XMLHttpRequest
  • Avec les fonctions DOM
  • Avec fonctions JS externes
  • Avec détection de compatibilité du navigateur dès le chargement
  • En POO (Programmation Orientée Objet) - PHP5
  • Utilisation de session - PHP

Développement à suivre
  • Gestionnaire de buy-in
  • Gestionnaire de mise, pot
  • Historique des mains jouer
  • Gestionnaire des combinaisons des cartes (Brelan de 3 - Carte la plus haute ...)
  • Gérer tout ça avec une base de donnée MySQL
  • Gestion du joueur avec BDD
  • Choix du type du poker Texas Hold'em ou Omaha
  • ...

Source / Exemple : 


------index.html------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Poker Game [Texas Hold'em] - Allan</title>
	<link rel="stylesheet" type="text/css" href="css/style.css" />
	<script type="text/javascript" src="ajax/fonctionsAjax.js"></script>
	<script type="text/javascript" src="ajax/fonctionsPoker.js"></script>
</head>
<body>
<h2>Poker Game [Texas Hold'em] - Allan</h2>
<noscript>
	Vous devez activez JavaScript afin d'utiliser cette application.
</noscript>
<!-- Emplacement des informations importante (s'il y a une erreur) -->
<div id="info">
</div>
<!-- Le corps de la page -->
<div id="page">
	<!-- La table de poker -->
	<div id="table">
		<!-- Emplacement des cartes communes (flop, turn, river) -->
		<div id="leFlop">
		</div>
		<!-- Le chargeur -->
		<div id="charge">
			Chargement en cours...<br />
			<img src="img/ajax-loader.gif" />
		</div>
		<!-- Emplacement des cartes du joueur (2 cartes) -->
		<div id="carteJoueur">
		</div>
	</div>
	<!-- Emplacement des boutons du jeux -->
	<div id="command">
		<form>
			<input type="button" id="distribuer" name="distribuer" value="Distribuer" onClick="poker('distribuer');" />
			<input type="button" id="flop" name="flop" value="Flop" onClick="poker('leFlop');" /> 
			<input type="button" id="turn" name="turn" value="Turn" onClick="poker('leTurn');" /> 
			<input type="button" id="river" name="river" value="River" onClick="poker('laRiver');" /> 
			<br /><br />
			<input type="button" id="reset" name="reset" value="Reset" onClick="reSet();" /> 
		</form>
	</div>
</div>

<!--commentaires de l'application -->
<h2 id="afficheCommentaire" onClick="afficheCommentaire()">Commentaire du développeur</h2>
<p id="expliqueCommentaire">cliquez sur le titre pour afficher les commentaires</p>

<div id="commentaire">
	<ul>
		<li class="titre">Développement Éffectuer</li>
		<li>Développer en Ajax et PHP5</li>
		<li>Communication <strong>A</strong>SYNCHRONE vers un  fichier PHP</li>
		<li>Avec une feuille de style</li>
		<li>Avec contrôle de readyState et de status</li>
		<li>Avec gestion du chargeur et blocage des bouton</li>
		<li>Avec une fonction universelle de création d'objet XMLHttpRequest</li>
		<li>Avec les fonctions DOM</li>
		<li>Avec fonctions JS externes</li>
		<li>Avec détection de compatibilité du navigateur dès le chargement</li>
		<li>En POO (Programmation Orientée Objet) - PHP5</li>
		<li>Utilisation de session - PHP5</li>
		<li class="titre">Développement à suivre</li>
		<li>Gestionnaire de buy-in</li>
		<li>Gestionnaire de mise, pot</li>
		<li>Historique des mains jouer</li>
		<li>Gestionnaire des combinaisons des cartes (Brelan de 3 - Carte la plus haute ...)</li>
		<li>Gérer tout ça avec une base de donnée MySQL</li>
		<li>Gestion du joueur avec BDD</li>
		<li>Choix du type du poker Texas Hold'em ou Omaha</li>
		<li>...</li>
	</ul>
</div>

</body>
</html>

------ajax/fonctionsAjax.js------
// Fonction de gestion de l'objet XHR Compatible pour presque tous les navigateurs
function creationXHR() {
	var resultat = null;
	try {//test pour les navigateurs : Mozilla, Opéra, ...
		resultat = new XMLHttpRequest();
	}
	catch (Error) {
		try {//test pour les navigateurs Internet Explorer > 5.0
			resultat = new ActiveXObject("Msxml2.XMLHTTP");
		}
		catch (Error) {
			try {//test pour le navigateur Internet Explorer 5.0
				resultat = new ActiveXObject("Microsoft.XMLHTTP");
			}
			catch (Error) {
				resultat = null;
			}
		}
	}
	return resultat;
}

//------------Fonctions de gestion du DOM qui respecte la norme W3C (solution alternative à innerHTML qui ne respecte pas le W3C)
function remplacerContenu(id, texte) {
	var element = document.getElementById(id);
	if (element != null) {
		supprimerContenu(element);
		var nouveauContenu = document.createTextNode(texte);
		element.appendChild(nouveauContenu);
	}
}
function supprimerContenu(element) {
	if (element != null) {
	while(element.firstChild)
		element.removeChild(element.firstChild);
	}
}

//--------------Fonctions encodage en UTF8
//code en UTF8, la valeur d'un élément dont id passé en parametre
function codeContenu(id) { 
	var valeur=document.getElementById(id).value;
	return encodeURIComponent(valeur);
}

------ajax/fonctionsPoker.js------
window.onload=testerNavigateur; //On test si le navigateur est compatible avec l'objet XMLHttpRequest

function testerNavigateur() {
	objetXHR = creationXHR();
	if(objetXHR == null) { //Si impossible de créer l'objet XHR
		//On désactive les boutons
		document.getElementById("distribuer").disabled=true;
		document.getElementById("reset").disabled=true;
		//On créer une variable avec le message d'erreur
		var erreurNavigateur="Erreur Navigateur : Création d'objet XHR impossible";
		// On l'affiche avec une fonction qui respect la norme W3C
		remplacerContenu("info", erreurNavigateur);
		//On rend visible le div où on affiche le message d'erreur
		document.getElementById("info").style.visibility="visible";
	} else { //S'il n'y a pas d'erreur (création du XHR)
		//On rend actif et inactif les bouttons
		document.getElementById("distribuer").disabled=false;
		document.getElementById("flop").disabled=true;
		document.getElementById("turn").disabled=true;
		document.getElementById("river").disabled=true;
		document.getElementById("reset").disabled=false;
		/*---------------------------------------- */
	}
}
//Fonction globalisent toutes les actions a effectuer, donner 2 cartes (distribuer), le flop, le turn, la river
function poker(action) {
	if (action == 'distribuer') {
		objetXHR = creationXHR();
		var temps = new Date().getTime();//création d'une variable temps pour l'anti-cache
		var parametres = "action=distribuer"
						"&anticache="+temps ;
		//Config. objet XHR
	    objetXHR.open("get","ajax/fonctionsPoker.php?"+parametres, true); 
		objetXHR.onreadystatechange = actualiserDistribution;//désignation de la fonction de rappel
		//gestion du bouton et du chargeur
		document.getElementById("distribuer").disabled= true;
		document.getElementById("charge").style.visibility="visible";
	    objetXHR.send(null);//envoi de la requete
		/*---------------------------------------- */
	}
	else if (action == 'leFlop') {
		objetXHR = creationXHR();
		var temps = new Date().getTime();//création d'une variable temps pour l'anti-cache
		var parametres = "action=flop"
						"&anticache="+temps ;
		//Config. objet XHR
	    objetXHR.open("get","ajax/fonctionsPoker.php?"+parametres, true); 
		objetXHR.onreadystatechange = actualiserFlop;//désignation de la fonction de rappel
		//gestion du bouton et du chargeur
		document.getElementById("flop").disabled=true;
		document.getElementById("charge").style.visibility="visible";
	    objetXHR.send(null);//envoi de la requete
		/*---------------------------------------- */
	}
	else if (action == 'leTurn') {
		objetXHR = creationXHR();
		var temps = new Date().getTime();//création d'une variable temps pour l'anti-cache
		var parametres = "action=turn"
						"&anticache="+temps ;
		//Config. objet XHR
	    objetXHR.open("get","ajax/fonctionsPoker.php?"+parametres, true); 
		objetXHR.onreadystatechange = actualiserTurn;//désignation de la fonction de rappel
		//gestion du bouton et du chargeur
		document.getElementById("turn").disabled=true;
		document.getElementById("charge").style.visibility="visible";
	    objetXHR.send(null);//envoi de la requete
		/*---------------------------------------- */
	}
	else if (action == 'laRiver') {
		objetXHR = creationXHR();
		var temps = new Date().getTime();//création d'une variable temps pour l'anti-cache
		var parametres = "action=river"
						"&anticache="+temps ;
		//Config. objet XHR
	    objetXHR.open("get","ajax/fonctionsPoker.php?"+parametres, true); 
		objetXHR.onreadystatechange = actualiserTurn;//désignation de la fonction de rappel
		//gestion du bouton et du chargeur
		document.getElementById("river").disabled=true;
		document.getElementById("charge").style.visibility="visible";
	    objetXHR.send(null);//envoi de la requete
		/*---------------------------------------- */
	}
}
function actualiserDistribution() {
	if (objetXHR.readyState == 4) {//test si le résultat est disponible
		if (objetXHR.status == 200) {
			var nouveauResultat = objetXHR.responseText;//recup du résulat au format TXT 
			//------------------------------------
			var leResultat = document.getElementById("carteJoueur");
			leResultat.innerHTML=nouveauResultat;
			document.getElementById("carteJoueur").style.visibility="visible";
			//gestion du bouton et du chargeur
			document.getElementById("distribuer").disabled=true;
			document.getElementById("flop").disabled=false;
			document.getElementById("charge").style.visibility="hidden";
		}
		else{
			//message d'erreur serveur
			var erreurServeur="Erreur serveur : "+objetXHR.status+" &#8211; "+ objetXHR.statusText;
			remplacerContenu("info", erreurServeur);
			document.getElementById("info").style.visibility="visible";
			//gestion du bouton et du chargeur
			document.getElementById("distribuer").disabled= false;
			document.getElementById("charge").style.visibility="hidden";
			reSet();
			//annule la requete en cours
			objetXHR.abort();
			objetXHR=null;
		}
	}
}
function actualiserFlop() {
	if (objetXHR.readyState == 4) {//test si le résultat est disponible
		if (objetXHR.status == 200) {
			var nouveauResultat = objetXHR.responseText;//recup du résulat au format TXT 
			//------------------------------------
			var leResultat = document.getElementById("leFlop");
			leResultat.innerHTML=nouveauResultat;
			leResultat.style.visibility="visible";
			//gestion du bouton et du chargeur
			document.getElementById("turn").disabled=false;
			document.getElementById("charge").style.visibility="hidden";
		}
		else{
			//message d'erreur serveur
			var erreurServeur="Erreur serveur : "+objetXHR.status+" &#8211; "+ objetXHR.statusText;
			remplacerContenu("info", erreurServeur);
			document.getElementById("info").style.visibility="visible";
			//gestion du bouton et du chargeur
			document.getElementById("distribuer").disabled= false;
			document.getElementById("charge").style.visibility="hidden";
			reSet();
			//annule la requete en cours
			objetXHR.abort();
			objetXHR=null;
		}
	}
}
function actualiserTurn() {
	if (objetXHR.readyState == 4) {//test si le résultat est disponible
		if (objetXHR.status == 200) {
			var nouveauResultat = objetXHR.responseText;//recup du résulat au format TXT 
			//------------------------------------

			var leResultat = document.getElementById("leFlop");
			leResultat.innerHTML=document.getElementById("leFlop").innerHTML + nouveauResultat;
			
			
			leResultat.style.visibility="visible";
			//gestion du bouton et du chargeur
			document.getElementById("river").disabled=false;
			document.getElementById("charge").style.visibility="hidden";
		}
		else{
			//message d'erreur serveur
			var erreurServeur="Erreur serveur : "+objetXHR.status+" &#8211; "+ objetXHR.statusText;
			remplacerContenu("info", erreurServeur);
			document.getElementById("info").style.visibility="visible";
			//gestion du bouton et du chargeur
			document.getElementById("distribuer").disabled= false;
			document.getElementById("charge").style.visibility="hidden";
			reSet();
			//annule la requete en cours
			objetXHR.abort();
			objetXHR=null;
		}
	}
}

//Pour tout remettre a 0 (évite d'actualiser la page)
function reSet() {
	document.getElementById("distribuer").disabled=false;
	document.getElementById("flop").disabled=true;
	document.getElementById("turn").disabled=true;
	document.getElementById("river").disabled=true;
	remplacerContenu("carteJoueur", "");
	remplacerContenu("leFlop", "");
	document.getElementById("carteJoueur").style.visibility="hidden";
	document.getElementById("leFlop").style.visibility="hidden";
}

//Affichage des commentaires du développeur
function afficheCommentaire() {
	var leDiv = document.getElementById("commentaire").style;
	if (leDiv.visibility == 'visible') {
		leDiv.visibility ="hidden";
		remplacerContenu("expliqueCommentaire", "cliquez sur le titre pour afficher les commentaires");
	} else {
		leDiv.visibility ="visible";
		remplacerContenu("expliqueCommentaire", "cliquez sur le titre pour masquer les commentaires");
	}
}

------ajax/fonctionsPoker.php------
<?php
include('poker.class.php5');

sleep(1); //Attente d'une seconde avant d'exécuter le code - Simulation d'attente du serveur

if ($_REQUEST['action']) {
	$poker = new Poker();
	if ($_REQUEST['action'] == 'distribuer') {
		$donne2cartes = $poker->distribuer();
		echo $donne2cartes;
	}
	elseif ($_REQUEST['action'] == 'flop') {
		$flop = $poker->flop();
		echo $flop;
	}
	elseif ($_REQUEST['action'] == 'turn') {
		$turn = $poker->turn();
		echo $turn;
	}
	elseif ($_REQUEST['action'] == 'river') {
		$river = $poker->river();
		echo $river;
	}
}
?>

------ajax/poker.class.php5------
<?php
session_start();

//Fonction pour supprimer une valeur d'un tableau
function supprimerUneValeur($tbl, $valeur) {
	foreach($tbl as $key=>$val){
		if ($valeur == $val) {
			unset ($tbl[$key]);
			return $tbl;
		}
	}
}

//Objet Poker qui sert a gérer le jeux (donne les cartes et les supprimes du paquet)
class Poker {
	public $lesCartes = array();	//Tableau contenant toutes les cartes

	function __construct($lesCartes=array()) {
		$this->lesCartes =  array('ACa', '2Ca', '3Ca', '4Ca', '5Ca', '6Ca', '7Ca', '8Ca', '9Ca', 'TCa', 'JCa', 'QCa', 'KCa', 
						'APi', '2Pi', '3Pi', '4Pi', '5Pi', '6Pi', '7Pi', '8Pi', '9Pi', 'TPi', 'JPi', 'QPi', 'KPi', 
						'ACo', '2Co', '3Co', '4Co', '5Co', '6Co', '7Co', '8Co', '9Co', 'TCo', 'JCo', 'QCo', 'KCo', 
						'ATr', '2Tr', '3Tr', '4Tr', '5Tr', '6Tr', '7Tr', '8Tr', '9Tr', 'TTr', 'JTr', 'QTr', 'KTr'
						); 
						/*
						A savoir le premier caractère est la valeur de la carte exemple A = As, T = 10, J = Valet etc..
						Les 2 autres caractères est la couleur (Ca = Carreau, Pi = Pique, Co = Coeur, Tr = Trefl).
						Toutes les cartes on 3 caractères, ce qui simplifira la gestion des combinaisons des cartes.
						----
						Les images portent le même nom.


    						
  • /

	}

	public function distribuer() { //Distribue 2 cartes au joueur
		//Mélange le tableau
		srand((float)microtime()*1000000);
		shuffle($this->lesCartes);
		
		//Sort 2 cartes au hazard
		$rand_keys = array_rand($this->lesCartes, 2);  
		
		//Sessionne le paquet de carte avec les 2 cartes en moins
		$_SESSION['paquet'] = supprimerUneValeur($this->lesCartes, $this->lesCartes[$rand_keys[0]]); //Carte non supprimer ?? OK
		$_SESSION['paquet'] = supprimerUneValeur($_SESSION['paquet'], $this->lesCartes[$rand_keys[1]]); //Carte supprimer
		
		$carteJoueur =  '<img src="img/cartes/'.$this->lesCartes[$rand_keys[0]].'.gif" />';
		$carteJoueur .=  '<img src="img/cartes/'.$this->lesCartes[$rand_keys[1]].'.gif" />';
		
		return $carteJoueur; //On retourne les 2 cartes sous forme d'image
	}
	
	public function flop() { //Donne le flop (3 cartes commune)
		$this->lesCartes = $_SESSION['paquet'];
		
		//Mélange le tableau
		srand((float)microtime()*1000000);
		shuffle($this->lesCartes);
		
		//Sort 3 cartes au hazard
		$rand_keys = array_rand($this->lesCartes, 3);
		
		//On supprime les cartes du flop dans le paquet
		$_SESSION['paquet'] = supprimerUneValeur($this->lesCartes, $this->lesCartes[$rand_keys[0]]);
		$_SESSION['paquet'] = supprimerUneValeur($_SESSION['paquet'], $this->lesCartes[$rand_keys[1]]);
		$_SESSION['paquet'] = supprimerUneValeur($_SESSION['paquet'], $this->lesCartes[$rand_keys[2]]);
		
		$carteFlop =  '<img src="img/cartes/'.$this->lesCartes[$rand_keys[0]].'.gif" />';
		$carteFlop .=  '<img src="img/cartes/'.$this->lesCartes[$rand_keys[1]].'.gif" />';
		$carteFlop .=  '<img src="img/cartes/'.$this->lesCartes[$rand_keys[2]].'.gif" />';
		
		return $carteFlop; //On retourne les 3 cartes sous forme d'image
	}
	
	public function turn() { //Donne le turn (1 carte commune)
		$this->lesCartes = $_SESSION['paquet'];
		
		//Mélange le tableau
		srand((float)microtime()*1000000);
		shuffle($this->lesCartes);
		
		//Sort 1 carte au hazard
		$rand_keys = array_rand($this->lesCartes, 1);
		
		//On supprime la carte du paquet
		$_SESSION['paquet'] = supprimerUneValeur($this->lesCartes, $this->lesCartes[$rand_keys]);
		
		$carteTurn =  '<img src="img/cartes/'.$this->lesCartes[$rand_keys].'.gif" />';
		
		return $carteTurn; //On retourne 1 carte sous forme d'image
	}
	
	public function river() { //Donne la river (la dernière carte commune)
		$this->lesCartes = $_SESSION['paquet'];
		
		//Mélange le tableau
		srand((float)microtime()*1000000);
		shuffle($this->lesCartes);
		
		//Sort 1 carte au hazard
		$rand_keys = array_rand($this->lesCartes, 1);

		//On supprime la carte du paquet
		$_SESSION['paquet'] = supprimerUneValeur($this->lesCartes, $this->lesCartes[$rand_keys]);
		
		$carteRiver =  '<img src="img/cartes/'.$this->lesCartes[$rand_keys].'.gif" />';
		
		return $carteRiver; //On retourne 1 carte sous forme d'image
	}
}
?>

------css/style.css------
#table {
	width:800px;
	height:300px;
	background-color:green;
	border:3px #164d16 solid;
}
#command {
	margin-top:15px;
	margin-right:10px;
}
#charge {
	text-align:center;
	font-weight:bold;
	padding-top:90px;
	color:white;
	visibility:hidden;
}
#info {
	background-color:yellow;
	font-weight:bold;
	text-align:center;
	width:806px;
	visibility:hidden;
}
#leFlop {
	height:40px;
	text-align:center;
	visibility:hidden; 
}
#leFlop img {
	width:70px;
	height:100px;
	margin-right:15px;
	margin-top:10px;
	border:2px solid black;
}
#carteJoueur {
	height:40px;
	margin-top:20px;
	text-align:center;
	visibility:hidden; 
}
#carteJoueur img {
	width:70px;
	height:100px;
	margin-right:15px;
	border:2px solid black;
}
#commentaire {
	margin:0 auto;
	width:600px;
	text-align:left;
	font-size:15px;
	font-style:italic;
	visibility:hidden;
}
#expliqueCommentaire {
	margin-top:-20px;
	font-style:italic;
}
#commentaire li.titre {
	font-weight:bold;
	font-size:20px;
}
ul 		{	list-style-type:none;	}
li.titre 	{	margin-left:-10px;		}
noscript 	{	font-weight:bold; background-color:yellow;	}

Conclusion :


Ceci est ma première source que je poste sur internet, toutes critique évolutive son les bienvenues.

Pour utiliser la sources vous devez avoir les images contenu dans le zip.

Si vous savez ou je peux avoir des images de carte jolie, merci de m'en faire part.
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (Allan007)