diff --git a/src/css/style.css b/src/css/style.css new file mode 100644 index 0000000..1a1154b --- /dev/null +++ b/src/css/style.css @@ -0,0 +1,89 @@ +body { + background-color: purple; + color:white; + display: flex; + flex-wrap: wrap; +} + +.cbleu >div{ + background-color: blue; +} + +.cvert >div{ + background-color: green; +} + +.corange >div{ + background-color: orange; +} + +.cviolet >div{ + background-color: purple; +} + +#cercle { + width: 20px; + height: 20px; + border-radius: 10px; + margin: auto; + margin-top: 25%; +} + +#bague { + width: 30px; + height: 30px; + border-radius: 15px; + margin: auto; + position: relative; + margin-top: 13%; +} + +#bague-inté { + width: 20px; + height: 20px; + border-radius: 10px; + background-color: #bbada0; + position: absolute; + margin: auto; + top : 17%; + left: 17%; +} + +.container { + width: 200px; + margin: 0 auto; +} + +.game-container { + margin-top: 40px; + position: relative; + padding: 15px; + cursor: default; + -moz-user-select:none; + background: #bbada0; + border-radius: 15px; + width: 160px; + height: 225px; + box-sizing: border-box; +} + +.grid-container { + position: absolute; + z-index: 1; +} + +.grid-row { + margin-bottom: 15px; +} + +.grid-cell { + width: 40px; + height: 40px; + margin-right: 5px; + margin-bottom: 12px; + float: left; + border-radius: 15px; + background: rgba(238, 228, 218, 0.35); +} + + diff --git a/src/index.html b/src/index.html new file mode 100644 index 0000000..731f1a0 --- /dev/null +++ b/src/index.html @@ -0,0 +1,398 @@ + + + + 666 + + + + + +
+
+
+
+
+
+ +
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + + diff --git a/src/js/main.js b/src/js/main.js new file mode 100644 index 0000000..1302f24 --- /dev/null +++ b/src/js/main.js @@ -0,0 +1,187 @@ +//1 = rond +//-1 = anneau + +var carte = [//violet + "000010020000", + "000010010000", + //verte + "010000000020", + "020000000010", + //orange + "000201000000", + "000201000000", + "000002100000", + "000002100000", + "000002001000", + "000002001000", + //bleu + "200000000100", + "200000000100", + "100000000002", + "100000000002", + "201000000000", + "201000000000", + //vert orange + "000001000020", + "010000002000", + "010002000000", + "010002000000", + "020001000000", + "020001000000", + //bleu violet + "002000010000", + "000020000100", + "000000010200", + "000000010200", + "000000020100", + "000000020100", + //bleu vert + "000000000210", + "000000000021", + "001000000020", + "001000000020", + "002000000010", + "002000000010", + //violet orange + "000010002000", + "000100020000", + "000000012000", + "000000012000", + "000000120000", + "000000120000", + //violet vert + "010000020000", + "010000020000", + "020010000000", + "020010000000", + "010020000000", + "010020000000", + "000010000020", + "000010000020", + //orange bleu + "002000001000", + "002000001000", + "000200000100", + "000200000100", + "200001000000", + "200001000000", + "001200000000", + "001200000000", + "001002000000", + "002001000000", + "000200000001", + "000100000002"]; + +var carteselect = 0; +var cartesAffiches = []; +var cartesSelect = []; + +//fonction au lancement +window.onload = function() { + //partie tirage au sort + for(var i=1; i<=12;i++){ + var ale = Math.floor(Math.random() * Math.floor(60)); + ale = ale +1; + var nomcarte = carte+i; + var macarte = carte[ale-1]; + cartesAffiches.push(macarte); + generationcarte("card"+i,macarte); + } +}; + +function generationcarte (cartenum, nbcarte) { + for(var i=0; i<12; i++) { + if(nbcarte[i] == 1 || nbcarte[i] == 2) + { + if(nbcarte[i] == 1){ + var p = document.getElementById(cartenum+" num"+ (i+1)); + var e=document.createElement("div"); + e.setAttribute("id","cercle"); + p.appendChild(e); + } + if(nbcarte[i] == 2){ + var p = document.getElementById(cartenum+" num"+ (i+1)); + var e=document.createElement("div"); + var f=document.createElement("div"); + e.setAttribute("id","bague"); + f.setAttribute("id","bague-inté") + e.appendChild(f); + p.appendChild(e); + } + } + } +} + +function ajoutercarte(carte) { + var lacarte = document.getElementById(carte); + if(lacarte.style.backgroundColor == "red") + { + lacarte.style.backgroundColor = "#bbada0"; + carteselect = carteselect-1; + //suppression dans les cartes select + var pos = cartesSelect.indexOf(carte); + cartesSelect.splice(pos,1); + } + else { + if(carteselect == 5) + alert("non"); + else { + lacarte.style.backgroundColor = "red"; + carteselect = carteselect +1; + //ajout dans les cartes select + cartesSelect.push(carte); + } + } +} + +function verification(carte1, carte2){ + var carte2_1 = carte2[2]+carte2[1]+carte2[0]+carte2[5]+carte2[4]+carte2[3]+carte2[8]+carte2[7]+carte2[6]+carte2[11]+carte2[10]+carte2[9]; + var carte2_2 = carte2[9]+carte2[10]+carte2[11]+carte2[6]+carte2[7]+carte2[8]+carte2[3]+carte2[4]+carte2[5]+carte2[0]+carte2[1]+carte2[2]; + var carte2_3 = carte2[11]+carte2[10]+carte2[9]+carte2[8]+carte2[7]+carte2[6]+carte2[5]+carte2[4]+carte2[3]+carte2[2]+carte2[1]+carte2[0]; +} + + +/* +=== POSSIBILITE === + +123 | 321 +456 | 654 +789 | 987 +ABC | CBA +--------- +ABC | CBA +789 | 987 +456 | 654 +123 | 321 + +=== DEROULEMENT ALGO === + +3cartes et + +>Comparer carte1 et carte2 +==> poser une carte 1 sans la toucher +==> Superposer la carte2 et essayer les 4 cas +*** SI BON + Ajouter la carte3+ et la superposer dans tt les cas + ==> Vérifier qu'il y ait que des 3 || 0 +*** SI PAS BON + Stoper le jeu +*/ + + + + + + + + + + + + + + + + + + +