Javascript : Morpion - CodeS SourceS

Description

Une version Javascript du Morpion.

Source / Exemple :

<html>
<head>
<title>Iwaweb - Morpion</title>
<script language="javascript" src="scripts/idl.js"></script>
</head>
<body>
</body>
<script language="javascript">
joueur1=1;
joueur2=0;
j1_win=0;
j2_win=0;
nul=0;
coup=0;
var jeu=new Array(9);
for(a=0;a<9;a++)
{
	jeu[a]=0;
}
document.write("<div id='barreverticale1' style='position:absolute;height:364px;width:10px;left:168px;top:68px;background-color:black;z-index:0'></div>");
document.write("<div id='barreverticale2' style='position:absolute;height:364px;width:10px;left:286px;top:68px;background-color:black;z-index:0'></div>");
document.write("<div id='barreverticale3' style='position:absolute;height:364px;width:10px;left:404px;top:68px;background-color:black;z-index:0'></div>");
document.write("<div id='barreverticale4' style='position:absolute;height:364px;width:10px;left:522px;top:68px;background-color:black;z-index:0'></div>");
document.write("<div id='barrehorizontale1' style='position:absolute;height:10px;width:364px;left:168px;top:68px;background-color:black;z-index:0'></div>");
document.write("<div id='barrehorizontale2' style='position:absolute;height:10px;width:364px;left:168px;top:186px;background-color:black;z-index:0'></div>");
document.write("<div id='barrehorizontale3' style='position:absolute;height:10px;width:364px;left:168px;top:304px;background-color:black;z-index:0'></div>");
document.write("<div id='barrehorizontale4' style='position:absolute;height:10px;width:364px;left:168px;top:422px;background-color:black;z-index:0'></div>");
document.write("<div id='cacheblanc' style='position:absolute;height:10px;width:364px;left:168px;top:432px;background-color:white;z-index:0'></div>");

document.write("<div id='case0c' style='position:absolute;height:104px;width:108px;left:178px;top:78px;visibility:hidden;z-index:1'><img src='images/croix_morpion.jpg' height='104' width='108'></div>");
document.write("<div id='case1c' style='position:absolute;height:104px;width:108px;left:296px;top:78px;visibility:hidden;z-index:1'><img src='images/croix_morpion.jpg' height='104' width='108'></div>");
document.write("<div id='case2c' style='position:absolute;height:104px;width:108px;left:414px;top:78px;visibility:hidden;z-index:1'><img src='images/croix_morpion.jpg' height='104' width='108'></div>");
document.write("<div id='case3c' style='position:absolute;height:104px;width:108px;left:178px;top:196px;visibility:hidden;z-index:1'><img src='images/croix_morpion.jpg' height='104' width='108'></div>");
document.write("<div id='case4c' style='position:absolute;height:104px;width:108px;left:296px;top:196px;visibility:hidden;z-index:1'><img src='images/croix_morpion.jpg' height='104' width='108'></div>");
document.write("<div id='case5c' style='position:absolute;height:104px;width:108px;left:414px;top:196px;visibility:hidden;z-index:1'><img src='images/croix_morpion.jpg' height='104' width='108'></div>");
document.write("<div id='case6c' style='position:absolute;height:104px;width:108px;left:178px;top:314px;visibility:hidden;z-index:1'><img src='images/croix_morpion.jpg' height='104' width='108'></div>");
document.write("<div id='case7c' style='position:absolute;height:104px;width:108px;left:296px;top:314px;visibility:hidden;z-index:1'><img src='images/croix_morpion.jpg' height='104' width='108'></div>");
document.write("<div id='case8c' style='position:absolute;height:104px;width:108px;left:414px;top:314px;visibility:hidden;z-index:1'><img src='images/croix_morpion.jpg' height='104' width='108'></div>");
document.write("<div id='case0r' style='position:absolute;height:104px;width:108px;left:178px;top:78px;visibility:hidden;z-index:1'><img src='images/rond.jpg' height='104' width='108'></div>");
document.write("<div id='case1r' style='position:absolute;height:104px;width:108px;left:296px;top:78px;visibility:hidden;z-index:1'><img src='images/rond.jpg' height='104' width='108'></div>");
document.write("<div id='case2r' style='position:absolute;height:104px;width:108px;left:414px;top:78px;visibility:hidden;z-index:1'><img src='images/rond.jpg' height='104' width='108'></div>");
document.write("<div id='case3r' style='position:absolute;height:104px;width:108px;left:178px;top:196px;visibility:hidden;z-index:1'><img src='images/rond.jpg' height='104' width='108'></div>");
document.write("<div id='case4r' style='position:absolute;height:104px;width:108px;left:296px;top:196px;visibility:hidden;z-index:1'><img src='images/rond.jpg' height='104' width='108'></div>");
document.write("<div id='case5r' style='position:absolute;height:104px;width:108px;left:414px;top:196px;visibility:hidden;z-index:1'><img src='images/rond.jpg' height='104' width='108'></div>");
document.write("<div id='case6r' style='position:absolute;height:104px;width:108px;left:178px;top:314px;visibility:hidden;z-index:1'><img src='images/rond.jpg' height='104' width='108'></div>");
document.write("<div id='case7r' style='position:absolute;height:104px;width:108px;left:296px;top:314px;visibility:hidden;z-index:1'><img src='images/rond.jpg' height='104' width='108'></div>");
document.write("<div id='case8r' style='position:absolute;height:104px;width:108px;left:414px;top:314px;visibility:hidden;z-index:1'><img src='images/rond.jpg' height='104' width='108'></div>");

document.write("<div id='case0b' style='position:absolute;height:104px;width:108px;left:178px;top:78px;background-color:white' onclick='clic(\"case0\")'></div>");
document.write("<div id='case1b' style='position:absolute;height:104px;width:108px;left:296px;top:78px;background-color:white' onclick='clic(\"case1\")'></div>");
document.write("<div id='case2b' style='position:absolute;height:104px;width:108px;left:414px;top:78px;background-color:white' onclick='clic(\"case2\")'></div>");
document.write("<div id='case3b' style='position:absolute;height:104px;width:108px;left:178px;top:196px;background-color:white' onclick='clic(\"case3\")'></div>");
document.write("<div id='case4b' style='position:absolute;height:104px;width:108px;left:296px;top:196px;background-color:white' onclick='clic(\"case4\")'></div>");
document.write("<div id='case5b' style='position:absolute;height:104px;width:108px;left:414px;top:196px;background-color:white' onclick='clic(\"case5\")'></div>");
document.write("<div id='case6b' style='position:absolute;height:104px;width:108px;left:178px;top:314px;background-color:white' onclick='clic(\"case6\")'></div>");
document.write("<div id='case7b' style='position:absolute;height:104px;width:108px;left:296px;top:314px;background-color:white' onclick='clic(\"case7\")'></div>");
document.write("<div id='case8b' style='position:absolute;height:104px;width:108px;left:414px;top:314px;background-color:white' onclick='clic(\"case8\")'></div>");
document.write("<div id='player1' style='position:absolute;height:100px;width:100px;left:560px;top:150px'><form name='form1'><p align='left'><input type='button' value='Joueur 1' name='j1' onclick='verif(\"form1\")'><br><br><input type='text' name='resultj1' size='4' value='0'></p></form></div>");
document.write("<div id='player2' style='position:absolute;height:100px;width:100px;left:560px;top:250px'><form name='form2'><p align='left'><input type='button' value='Joueur 2' name='j2' onclick='verif(\"form2\")'><br><br><input type='text' name='resultj2' size='4' value='0'></p></form></div>");

function clic(nom)
{
	coup++;	
	if(joueur1)
	{
		visibilitecalque(nom+"c","visible");
		jeu[nom.charAt(4)]=1;
		gagner();
		joueur1=0;
		joueur2=1;
		window.status="A vous "+document.form2.j2.value;
	}
	else
	{
		visibilitecalque(nom+"r","visible");		
		jeu[nom.charAt(4)]=2;
		gagner();
		joueur1=1;
		joueur2=0;
		window.status="A vous "+document.form1.j1.value;
	}
	if(j1_win)
	{
		endgame();
	}
	if(j2_win)
	{
		endgame();
	}
	if(nul)
	{
		endgame();
	}
}

function endgame()
{
	if(j1_win)
	{
		reponse=confirm("Bravo "+document.form1.j1.value+" vous avez gagné.\nNouvelle partie ?");
		document.form1.resultj1.value++;
	}
	if(j2_win)
	{
		reponse=confirm("Bravo "+document.form2.j2.value+" vous avez gagné.\nNouvelle partie ?");
		document.form2.resultj2.value++;		
	}
	if(nul)
	{
		reponse=confirm("Match nul.\rNouvelle partie ?");
	}
	if(!reponse)
	{
		document.form1.resultj1.value=0;
		document.form2.resultj2.value=0;
		joueur1=1;
		joueur2=0;
	}	
	for(a=0;a<9;a++)
	{
		jeu[a]=0;
		visibilitecalque("case"+a+"c","hidden");		
		visibilitecalque("case"+a+"r","hidden");		
	}
	coup=0;
	nul=0;
	j1_win=0;
	j2_win=0;
}

function gagner()
{
	if(joueur1)
	{
		if(jeu[0]*jeu[1]*jeu[2]==1 || jeu[3]*jeu[4]*jeu[5]==1 || jeu[6]*jeu[7]*jeu[8]==1 || jeu[0]*jeu[3]*jeu[6]==1 || jeu[1]*jeu[4]*jeu[7]==1 || jeu[2]*jeu[5]*jeu[8]==1 || jeu[0]*jeu[4]*jeu[8]==1 || jeu[2]*jeu[4]*jeu[6]==1)
		{
			j1_win=1;
		}
	}
	else
	{
		if(jeu[0]*jeu[1]*jeu[2]==8 || jeu[3]*jeu[4]*jeu[5]==8 || jeu[6]*jeu[7]*jeu[8]==8 || jeu[0]*jeu[3]*jeu[6]==8 || jeu[1]*jeu[4]*jeu[7]==8 || jeu[2]*jeu[5]*jeu[8]==8 || jeu[0]*jeu[4]*jeu[8]==8 || jeu[2]*jeu[4]*jeu[6]==8)
		{
			j2_win=1;
		}
	}
	if(!j1_win && !j2_win && coup==9)
	{
		nul=1;
	}
}
function verif(formname)
{
	if(formname=="form1")
	{
		document.form1.j1.value=prompt("Quel est votre nom Joueur 1 ?",document.form1.j1.value);
		if(joueur1)
		{
			window.status="A vous "+document.form1.j1.value;
		}
	}
	if(formname=="form2")
	{
		document.form2.j2.value=prompt("Quel est votre nom Joueur 2 ?",document.form2.j2.value);
		if(joueur2)
		{
			window.status="A vous "+document.form2.j2.value;
		}
	}
}
window.status="A vous "+document.form1.j1.value;
</script>
</html>

Conclusion :

Si vous intégrez ce jeu sur votre site, veuillez conserver les liens vers le site.

Retrouvez d'autres jeux sur Iwaweb(http://www.iwaweb.net/)

MAJ du 1/06/2003 :
Amélioration de la compatibilité du jeu : il s'affiche désormais parfaitement sous Netscape(6+) et Mozilla(1.0+) grace au respect des normes W3C.

Télécharger le projet

Codes Sources

A voir également

Morpion
Morpion en ligne ✓ - Forum Javascript / DHTML
Grille morpion vierge - Forum Java
Morpion python ✓ - Forum Python
Morpion 5x5 - Forum C / C++ / C++.NET
Morpion définition - Forum C

Ajouter un commentaire Commentaire

jordane45 Messages postés 37721 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 septembre 2023 342
14 déc. 2017 à 17:24

Bonjour,

Afin de respecter la charte du site et éviter que ta sournce ne soit supprimée.... merci de :
1 - Y ajouter des commentaires expliquant sont fonctionnement
2 - Supprimée l'URL vers ton site dans la description
3 - Ne pas t'auto-voter sous un faux pseudo...

Ensuite, concernant ton code...
Franchement.. au lieu de faire du document.write pour générer tes cases... tu aurais mieux fait de directement les mettre dans le HTML.
Il existe, en html, un truc qui se nomme le CSS ... ça rendrait le code beaucoup plus propre que toutes ces balises "style=..." que tu as mis un peu partout.
Après.. je n'ai pas regardé le reste ...
mais en soit, je ne vois rien qui justifie d'en faire une source pour le forum ...

Rappel sur les règles :http://codes-sources.commentcamarche.net/faq/10009-regles-pour-poster-une-nouvelle-source

.

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.

Morpion

Description

Source / Exemple :

Conclusion :

Codes Sources

A voir également

Vous n'êtes pas encore membre ?

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

Du même auteur (iwaweb)

Duree - calcule la duree précise qui s'est écoulée entre 2 dates

Racine carrée

Calculatrice v1.0

Barres déroulantes

Source / Exemple :

Conclusion :

A voir également

Vous n'êtes pas encore membre ? inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Du même auteur (iwaweb)

Duree - calcule la duree précise qui s'est écoulée entre 2 dates

Racine carrée

Calculatrice v1.0

Barres déroulantes

Vous n'êtes pas encore membre ?

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