Redefnition du constructeur + Ajout de la gen de toutes les cartes possibles

Golfier
yasevret 5 years ago
parent d213046247
commit d0b6b8f192

@ -1,152 +1,152 @@
<!DOCTYPE html>
<html>
<head lang="fr">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>SwishGame</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/Resp1.css">
<link rel="stylesheet" href="css/Resp2.css">
<link rel="stylesheet" href="css/Resp3.css">
<link rel="stylesheet" href="css/PageDaccueil.css">
<link rel="stylesheet" href="css/PartieGame.css">
<script type="text/javascript" src="js/main.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>SwishGame</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/Resp1.css">
<link rel="stylesheet" href="css/Resp2.css">
<link rel="stylesheet" href="css/Resp3.css">
<link rel="stylesheet" href="css/PageDaccueil.css">
<link rel="stylesheet" href="css/PartieGame.css">
<script type="text/javascript" src="js/main.js"></script>
</head>
<body onload="ChoisirPseudo()">
<div id="pageAccueil">
<div class="logo">
<a onclick="journuit()">
<img src="imgs/swishjour.png" id="imglogo">
</a>
</div>
<div id="infosec">
<div class="inner">
<ul class="activity">
<li id="listeinfobtn">
<a id="info" href="#popup1">i</a>
</li>
</ul>
</div>
</div>
<div id="containpseudo">
<a onclick="lancerpartie()">
<div id="contourbuttonvalider">
<div class="bouttonvalider">
<h1 id="textjouer">JOUER</h1>
</div>
</div>
</a>
</div>
<div id="popup1" class="overlay">
<div class="popup">
<h2>Les Règles :</h2>
<a class="close" href="#">&times;</a>
<div class="content">
Swish : Jeu de 60 cartes compos&eacute chacun de billes et de cerceaux, de 4 couleurs
diff&eacuterentes possibles. 16 cartes sont pos&eacutes sur une table et le joueur doit faire superposer
des cartes de mani&egravere que chaque bille soit dans le cerceau de m&ecircme couleur dune autre
carte.
</div>
</div>
</div>
<!--
<div id="containpseudo">
<div id="pseudoenter">
<div id="fondinput">
<input onkeypress="ajouterplayer(event)" maxlength="12" id="inputpseudo">
</div>
</div>
<a onclick="EnvoyerNouveauNom()">
<div id="contourbuttonvalider">
<div class="bouttonvalider" >
<h1 id="textjouer">JOUER</h1>
</div>
</div>
</a>
<div id="buttonadd">
<a onclick="addplayer()">
<h2 id="textplus">+</h2>
</a>
</div>
</div>
<div id="containplayers">
</div>
-->
<div id="ContainBottom">
<!-- Forme : rond-->
<div class="containform">
<div class="anneau">
<div class="rondinterieur inté"></div>
</div>
</div>
<div class="containform">
<div class="rond"></div>
</div>
<!-- Forme : carré-->
<div class="containform">
<div class="carre">
<div class="carreinterieur inté"></div>
</div>
</div>
<div class="containform">
<div class="pcarre"></div>
</div>
</div>
<div class="mounts">
<img src="imgs/lightcloud.png" id="cloud">
<img src="imgs/mount1.png" id="mount1">
<img src="imgs/mount2.png" id="mount2">
</div>
</div>
<div id="pageGame">
<div class="menuhaut">
<div id="Redistribution">
<a onclick="creePartie()" id="relancerbtn">
<div id="contourbuttonvalider">
<div class="bouttonvalider">
<h1 id="textjouer2">RELANCER</h1>
</div>
</div>
</a>
</div>
<div id="Redistribution2">
<a id="relancerbtn" onclick="test()">
<div id="contourbuttonvalider">
<div class="bouttonvalider2">
<h1 id="btnvalider2">VALIDER</h1>
</div>
</div>
</a>
</div>
<div class="logop2">
<a onclick="journuit()">
<img src="imgs/swishjour.png" id="imglogo2">
</a>
</div>
<a class="retourstp" onclick="retour()">
<div class="buttonretour">
<h1 class="txt">X</h1>
</div>
</a>
</div>
<div id="containcards" class="containcards">
</div>
</div>
<div id="pageAccueil">
<div class="logo">
<a onclick="journuit()">
<img src="imgs/swishjour.png" id="imglogo">
</a>
</div>
<div id="infosec">
<div class="inner">
<ul class="activity">
<li id="listeinfobtn">
<a id="info" href="#popup1">i</a>
</li>
</ul>
</div>
</div>
<div id="containpseudo">
<a onclick="lancerpartie()">
<div id="contourbuttonvalider">
<div class="bouttonvalider">
<h1 id="textjouer">JOUER</h1>
</div>
</div>
</a>
</div>
<div id="popup1" class="overlay">
<div class="popup">
<h2>Les Règles :</h2>
<a class="close" href="#">&times;</a>
<div class="content">
Swish : Jeu de 60 cartes compos&eacute chacun de billes et de cerceaux, de 4 couleurs
diff&eacuterentes possibles. 16 cartes sont pos&eacutes sur une table et le joueur doit faire superposer
des cartes de mani&egravere que chaque bille soit dans le cerceau de m&ecircme couleur dune autre
carte.
</div>
</div>
</div>
<!--
<div id="containpseudo">
<div id="pseudoenter">
<div id="fondinput">
<input onkeypress="ajouterplayer(event)" maxlength="12" id="inputpseudo">
</div>
</div>
<a onclick="EnvoyerNouveauNom()">
<div id="contourbuttonvalider">
<div class="bouttonvalider" >
<h1 id="textjouer">JOUER</h1>
</div>
</div>
</a>
<div id="buttonadd">
<a onclick="addplayer()">
<h2 id="textplus">+</h2>
</a>
</div>
</div>
<div id="containplayers">
</div>
-->
<div id="ContainBottom">
<!-- Forme : rond-->
<div class="containform">
<div class="anneau">
<div class="rondinterieur inté"></div>
</div>
</div>
<div class="containform">
<div class="rond"></div>
</div>
<!-- Forme : carré-->
<div class="containform">
<div class="carre">
<div class="carreinterieur inté"></div>
</div>
</div>
<div class="containform">
<div class="pcarre"></div>
</div>
</div>
<div class="mounts">
<img src="imgs/lightcloud.png" id="cloud">
<img src="imgs/mount1.png" id="mount1">
<img src="imgs/mount2.png" id="mount2">
</div>
</div>
<div id="pageGame">
<div class="menuhaut">
<div id="Redistribution">
<a onclick="creePartieDeTest()" id="relancerbtn">
<div id="contourbuttonvalider">
<div class="bouttonvalider">
<h1 id="textjouer2">RELANCER</h1>
</div>
</div>
</a>
</div>
<div id="Redistribution2">
<a id="relancerbtn" onclick="test()">
<div id="contourbuttonvalider">
<div class="bouttonvalider2">
<h1 id="btnvalider2">VALIDER</h1>
</div>
</div>
</a>
</div>
<div class="logop2">
<a onclick="journuit()">
<img src="imgs/swishjour.png" id="imglogo2">
</a>
</div>
<a class="retourstp" onclick="retour()">
<div class="buttonretour">
<h1 class="txt">X</h1>
</div>
</a>
</div>
<div id="containcards" class="containcards">
</div>
</div>
</body>
</html>

@ -10,15 +10,21 @@ var darktercia = "#606060";
var carteselect = [];
var deckPartie = []; //Ensemble des cartes affichées à l'écran
class Carte {
constructor(id/*,row,column,nbForme*/) { //à décommenter quand il y aura des prametres de partie
constructor(id, allFigure/*,row,column,nbForme*/) { //à décommenter quand il y aura des prametres de partie
//Attribut de Classe
this.identifiant = id;
this.row = 4 /*row*/;
this.column = 3 /*column*/;
this.Matrice = creaMatrice(this.row, this.column);
this.SesFigures = [];
for (var i = 0; i < allFigure.length; i++) {
this.SesFigures.push(allFigure[i]);
}
//lien clicable
this.link = document.createElement('a');
@ -33,30 +39,17 @@ class Carte {
var divcase = document.createElement('div');
divcase.className = "item-form";
// Point ou anneau trouvé => création
if (this.Matrice[i % 3][Math.floor(i / 3)] == 1) {
//TEST : CRéation d'une figure Pleine => Rond
var uneFigure = new Figure(TypeFigure.Petit, FormeFigure.Rond, i % 3, Math.floor(i / 3));
this.SesFigures.push(uneFigure);
divconteneur.appendChild(uneFigure.getHTML);
} else if (this.Matrice[i % 3][Math.floor(i / 3)] == 2) { // Point ou anneau trouvé => création
//TEST : CRéation d'une figure Pleine => Anneau
var uneFigure = new Figure(TypeFigure.Moyen, FormeFigure.Rond, i % 3, Math.floor(i / 3));
this.SesFigures.push(uneFigure);
divconteneur.appendChild(uneFigure.getHTML);
} else divconteneur.appendChild(divcase);
var ajouté = true;
for (var j = 0; j < this.SesFigures.length; j++) {
if (i == this.SesFigures[j].X + (this.SesFigures[j].Y * 3)) {
ajouté = false;
var uneFigure = new Figure(this.SesFigures[j].type[0], this.SesFigures[j].forme, this.SesFigures[j].X, this.SesFigures[j].Y);
divconteneur.appendChild(uneFigure.CodeHTML);
}
}
if (ajouté) {
divconteneur.appendChild(divcase);
}
}
this.link.appendChild(divconteneur);
@ -66,7 +59,6 @@ class Carte {
var lacarte = "card" + macarte;
var laCarte = deckPartie[this.id - 1]; //Carte liée avec le code HTML
if (document.getElementById(lacarte).style.boxShadow != "") {
var pos = carteselect.indexOf(laCarte);
carteselect.splice(pos, 1);
@ -147,6 +139,7 @@ class Carte {
}
}
class Figure {
constructor(leType, forme, Cox, Coy) {
@ -158,6 +151,7 @@ class Figure {
var pos = this.X + this.Y * 3;
var divcase = document.createElement('div');
divcase.className = "item-form";
//Pour chaque type on regarde les formes
switch (this.forme) {
case FormeFigure.Rond:
switch (this.type[0]) {
@ -169,7 +163,7 @@ class Figure {
var unCercle = document.createElement('div');
unCercle.className = "anneau";
unCercle.style.backgroundColor = "var(--colorbase)";
if (pos == 0 || pos == 2 || pos == 9 || pos == 11) {
unCercle.style.backgroundColor = "var(--colorone)";
}
@ -196,15 +190,16 @@ class Figure {
var unRond = document.createElement('div');
unRond.className = "rond";
//unRond.style.backgroundColor = "#000DFF";
unRond.style.backgroundColor = "var(--colorbase)";
if (pos == 0 || pos == 2 || pos == 9 || pos == 11) {
unRond.style.backgroundColor = "#00CBFF";
unRond.style.backgroundColor = "var(--colorone)";
}
if (pos == 1 || pos == 10) {
unRond.style.backgroundColor = "#00FF6E";
unRond.style.backgroundColor = "var(--colortwo)";
}
if (pos == 4 || pos == 7) {
unRond.style.backgroundColor = "#C800FF";
unRond.style.backgroundColor = "var(--colorthree)";
}
divContainForm.appendChild(unRond);
divcase.appendChild(divContainForm);
@ -303,7 +298,8 @@ function journuit() {
function lancerpartie() {
document.getElementById("pageAccueil").style.visibility = "hidden";
creePartie();
//fonction de création de partie à changer en fonction du test voulu
genererTouteslesCartes3_4Possibles();
document.getElementById("pageGame").style.visibility = "visible";
}
@ -320,10 +316,39 @@ function rechargerGAME() {
document.getElementById("containcards").appendChild(deckPartie[i].getHTML);
}
}
//================================================================================================================================================================
//Fonction créations de game
function genererTouteslesCartes3_4Possibles() {
deckPartie = [];
carteselect = [];
while (document.getElementById("containcards").firstElementChild != null) {
document.getElementById("containcards").firstElementChild.remove();
}
for (var k = 0; k < 2; k++) {
for (var j = 0; j < 2; j++) {
for (var i = 0; i < 12; i++) {
var AllFigure = [];
AllFigure.push(new Figure(TypeFigure.Petit, FormeFigure.Rond, k, j));
if (i != k + 3 * j) {
if (k == 0) {
AllFigure.push(new Figure(TypeFigure.Moyen, FormeFigure.Rond, i % 3, Math.floor(i / 3)));
var uneCarte = new Carte(i + 12 * j, AllFigure);
deckPartie.push(uneCarte);
document.getElementById("containcards").appendChild(uneCarte.link);
} else if (i != 2 && i != 5 && i != 8 && i != 11) {
AllFigure.push(new Figure(TypeFigure.Moyen, FormeFigure.Rond, i % 3, Math.floor(i / 3)));
var uneCarte = new Carte(i + 12 * j, AllFigure);
deckPartie.push(uneCarte);
document.getElementById("containcards").appendChild(uneCarte.link);
}
}
}
}
}
}
function creePartie() {
function creePartieDeTest() {
deckPartie = [];
carteselect = [];
while (document.getElementById("containcards").firstElementChild != null) {
@ -331,14 +356,33 @@ function creePartie() {
}
for (var j = 1; j <= 16; j++) {
var uneCarte = new Carte(j);
var AllFigure = [];
var Cox1, Coy1, Cox2, Coy2;
Cox1 = getRandom(0, 2);
Coy1 = getRandom(0, 3);
AllFigure.push(new Figure(TypeFigure.Petit, FormeFigure.Rond, Cox1, Coy1));
Cox2 = getRandom(0, 2);
Coy2 = getRandom(0, 3);
while (Cox2 == Cox1 && Coy1 == Coy2) {
Cox2 = getRandom(0, 2);
Coy2 = getRandom(0, 3);
}
AllFigure.push(new Figure(TypeFigure.Moyen, FormeFigure.Rond, Cox2, Coy2));
//Code de Génération de Figure
var uneCarte = new Carte(j, AllFigure);
deckPartie.push(uneCarte);
document.getElementById("containcards").appendChild(uneCarte.getHTML);
document.getElementById("containcards").appendChild(uneCarte.link);
}
}
//========================================================================================================================================================
//Changer les cartes
function changerlesCartes() {
while (carteselect.length != 0) {
remplacerLaCarte(carteselect[0]);
@ -349,7 +393,22 @@ function changerlesCartes() {
function remplacerLaCarte(uneCarte) {
pos = deckPartie.indexOf(uneCarte);
var newCarte = new Carte(pos + 1);
var AllFigure = [];
var Cox1, Coy1, Cox2, Coy2;
Cox1 = getRandom(0, 2);
Coy1 = getRandom(0, 3);
AllFigure.push(new Figure(TypeFigure.Petit, FormeFigure.Rond, Cox1, Coy1));
Cox2 = getRandom(0, 2);
Coy2 = getRandom(0, 3);
while (Cox2 == Cox1 && Coy1 == Coy2) {
Cox2 = getRandom(0, 2);
Coy2 = getRandom(0, 3);
}
AllFigure.push(new Figure(TypeFigure.Moyen, FormeFigure.Rond, Cox2, Coy2));
var newCarte = new Carte(pos + 1, AllFigure);
deckPartie[pos] = newCarte;
}
@ -431,11 +490,6 @@ function test() {
for (var i = 0; i < carteselect.length; i++) {
copie.push(carteselect[i]);
}
/*var uneTable = copieListeDeCarte(copie);
uneTable.splice(0, 1);
var TEST = AssemblageARBRE(uneTable, copie[0]);
changerlesCartes();*/
var tab = [];
tab = AssemblageARBRE(copieListeDeCarte(copie), carteselect[0]);
var solution = true;
@ -443,9 +497,8 @@ function test() {
for (var i = 0; i < tab.length; i++) {
tabCode.push(tab[i].code);
}
//window.alert(tabCode)
for (var i = 0; i < tab.length; i++) {
if (tab[i].code == copie.length) {
if (tab[i].code == carteselect.length) {
solution = false;
changerlesCartes();
}
@ -459,10 +512,13 @@ function test() {
}
} catch (e) {
window.alert("Assemblage Impossible");
window.alert(e);
}
}
//===================================================================================
//Function de copie diverse
function copieListeDeCarte(Liste) {
var copie = [];
for (var i = 0; i < Liste.length; i++) {
@ -470,26 +526,12 @@ function copieListeDeCarte(Liste) {
}
return copie;
}
function Verticale(coCarte) {
var laCarte;
laCarte = copieCarte(coCarte);
laCarte = laCarte.carteVerticale;
return laCarte;
}
function Horizontale(coCarte) {
var laCarte;
laCarte = copieCarte(coCarte);
laCarte = laCarte.carteHorizontale;
return laCarte;
}
function copieCarte(uneCarte) {
if (uneCarte == null) {
return null;
}
var carte = new Carte(uneCarte.getIdentifiant);
var carte = new Carte(uneCarte.getIdentifiant, uneCarte.SesFigures);
carte.SesFigures = new Array();
for (var i = 0; i < uneCarte.SesFigures.length; i++) {
carte.SesFigures.push(new Figure(uneCarte.SesFigures[i].type[0], uneCarte.SesFigures[i].getForme, uneCarte.SesFigures[i].getX, uneCarte.SesFigures[i].getY));
@ -503,6 +545,41 @@ function copieCarte(uneCarte) {
return carte;
}
function copieLiseDeFigure(Liste) {
var copie = [];
for (var i = 0; i < Liste.length; i++) {
copie.push(copieFigure(Liste[i]));
window.alert("code " + copie[i].CodeHTML)
}
return copie;
}
function copieFigure(uneFigure) {
window.alert("Avant copiage " + uneFigure.CodeHTML)
if (uneFigure == null) {
return null;
}
window.alert("je fais la copie")
var copie = new Figure(uneFigure.type, uneFigure.forme, uneFigure.X, uneFigure.Y);
return copie;
}
//=====================================================================================================
//Function de manipulataion de Carte
function Verticale(coCarte) {
var laCarte;
laCarte = copieCarte(coCarte);
laCarte = laCarte.carteVerticale;
return laCarte;
}
function Horizontale(coCarte) {
var laCarte;
laCarte = copieCarte(coCarte);
laCarte = laCarte.carteHorizontale;
return laCarte;
}
//==============================================================================================================================
//FONCTION POUR TESTER L'ARBRE

Loading…
Cancel
Save