Compare commits
2 commits
| 작성자 | SHA1 | 날짜 | |
|---|---|---|---|
| d74d5858cd | |||
| bcd6d0cfc1 |
11개의 변경된 파일과 135개의 추가작업 그리고 685개의 파일을 삭제
|
|
@ -11,7 +11,6 @@ header
|
|||
display: flex;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
body
|
||||
{
|
||||
display: flex;
|
||||
|
|
@ -63,16 +62,6 @@ article
|
|||
|
||||
}
|
||||
.BoiteNb
|
||||
{
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
.intro
|
||||
{
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
}
|
||||
.PoM
|
||||
{
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
|
|
|
|||
|
|
@ -1,9 +1,26 @@
|
|||
<<<<<<< HEAD
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="Page1.js">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<label for="Valeur"> Entrez un nombre</label>
|
||||
<input type="text" name="Valeur" id="Valeur">
|
||||
</div>
|
||||
</body>
|
||||
=======
|
||||
<!DOCTYPE HTML>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="JustePrix.css" type="text/css">
|
||||
<script src="JustePrix.js" defer></script>
|
||||
<script src="JustePrix.js"></script>
|
||||
<html>
|
||||
<head>
|
||||
<title>JustePrix</title>
|
||||
|
|
@ -23,22 +40,14 @@
|
|||
<p></p>
|
||||
<p class="Titre"><strong>Le Juste Prix</strong></p>
|
||||
<img src="Lagaf.jpg" class="Lagaf">
|
||||
<p id="intro">Bonjour mon ami et Bienvenue dans le JUSTE PRIX </p>
|
||||
<div id="NbAle">
|
||||
<label for="BorneSup">Veuillez rentrer votre borne supérieur</label>
|
||||
<input type="text" id="BorneSup">
|
||||
<button id="Bs" >Acceptation</button> (Cela reinitialise votre compteur)
|
||||
</div>
|
||||
<p>Bonjour mon ami et Bienvenue dans le JUSTE PRIX </p>
|
||||
<div id="BoiteNb" class="BoiteNb">
|
||||
<label for="Inp_Valeur"> Veuillez rentrer votre nombre</label>
|
||||
<input type="text" id="Inp_Valeur">
|
||||
<button name="btntent" id="btnver">Verification</button>
|
||||
</div>
|
||||
<p id="Comp"></p>
|
||||
<div id="PoM">
|
||||
<p>Le nombre a trouver est:</p><p id="Resultat"></p>
|
||||
<button name="btntent" id="btntent">Verification</button>
|
||||
</div>
|
||||
</main>
|
||||
<footer>© Copyright 2019 by ME. All Rights Reserved.</footer>
|
||||
</body>
|
||||
>>>>>>> c529b88e94d23093a509bad7d6be092aafb2290b
|
||||
</html>
|
||||
85
JustePrix.js
85
JustePrix.js
|
|
@ -1,89 +1,34 @@
|
|||
const NbJoueur = document.getElementById("Inp_Valeur");
|
||||
let max = document.getElementById("BorneSup");
|
||||
let btnBs=document.getElementById("Bs");
|
||||
let btnver = document.getElementById("btnver");
|
||||
let Comptxt = document.getElementById("Comp");
|
||||
let Compteur=0; // Comptre le nombre coups du joueur
|
||||
let NbJoueur= document.getElementById("Inp_Valeur");
|
||||
let Nb_a_Trouver = 5;
|
||||
|
||||
let btnver = document.getElementById("btntent");
|
||||
|
||||
btnver.addEventListener("click",Verif)
|
||||
|
||||
let res=document.getElementById("Resultat"); // Va permettre d'afficher plus,moins,Trouver
|
||||
let Nb_a_Trouver;
|
||||
max.addEventListener("keypress", function(e)
|
||||
function Verif()
|
||||
{
|
||||
if(e.key == "Enter")
|
||||
{
|
||||
Verif(max.value);
|
||||
Generateur_Nb_Ale();
|
||||
}
|
||||
})
|
||||
btnBs.addEventListener("click",Generateur_Nb_Ale);
|
||||
btnver.addEventListener("click",Verif);
|
||||
btnver.addEventListener("click",Trouver);
|
||||
NbJoueur.addEventListener("keypress", function(e)
|
||||
{
|
||||
if(e.key == "Enter")
|
||||
{
|
||||
Verif(NbJoueur.value);
|
||||
Trouver();
|
||||
}
|
||||
})
|
||||
console.log(Nb_a_Trouver);
|
||||
let NbJoueur2;
|
||||
function Verif(Nb)
|
||||
{
|
||||
//Verifie qu'il s'agit dun nombre
|
||||
|
||||
if(parseFloat(Nb))
|
||||
const NbJoueur2 = parseFloat(NbJoueur); //Verifie qu'il s'agit dun nombre
|
||||
if(NbJoueur2 == isNaN(NbJoueur))
|
||||
{
|
||||
alert("La Valeur rentre est errone");
|
||||
}
|
||||
else
|
||||
{
|
||||
alert("La valeur rentre n'est pas un nombre entier");
|
||||
alert("La valeur est bonne");
|
||||
}
|
||||
}
|
||||
|
||||
function Generateur_Nb_Ale()
|
||||
function Trouver(NbJoueur)
|
||||
{
|
||||
let maxval=parseFloat(max.value);
|
||||
console.log("Maxval " + maxval)
|
||||
Nb_a_Trouver= Math.floor( Math.random() * (maxval))+1;
|
||||
Compteur = 0;
|
||||
Comptxt.innerText="Compteur:"+ Compteur
|
||||
console.log(Nb_a_Trouver)
|
||||
}
|
||||
|
||||
function Trouver()
|
||||
{
|
||||
NbJoueur2=parseFloat(NbJoueur.value);
|
||||
console.log(NbJoueur2);
|
||||
//Va Verifier si nous somme = a notre valeur rechercher
|
||||
if(NbJoueur2 >Nb_a_Trouver)
|
||||
if(Nb_a_Trouver == NbJoueur)
|
||||
{
|
||||
res.innerText ="Moins";
|
||||
Compteur++;
|
||||
Comptxt.innerText="Compteur:"+ Compteur
|
||||
return true
|
||||
}
|
||||
else if(NbJoueur2 < Nb_a_Trouver)
|
||||
else
|
||||
{
|
||||
res.innerText="Plus";
|
||||
Compteur++;
|
||||
Comptxt.innerText="Compteur:"+ Compteur
|
||||
}
|
||||
else if(NbJoueur2 == Nb_a_Trouver)
|
||||
{
|
||||
Compteur++;
|
||||
Comptxt.innerText="Compteur:"+ Compteur
|
||||
res.innerText="GG ta trouver la solution, tu l'as trouve en "+ Compteur +" coups";
|
||||
}
|
||||
else if(isNaN(NbJoueur2))
|
||||
{
|
||||
res.innerText= "La valeur n'est pas un entier ";
|
||||
Compteur++;
|
||||
Comptxt.innerText="Compteur:"+ Compteur
|
||||
return false
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* Valider avec touche entree
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
<body>
|
||||
<h1 id="TitreMorp">Bienvenue sur le TIC-TAC-TOE </h1>
|
||||
<p class="txt">Règles du jeu: à 2 joueurs, vous jouez au tour par tour. Il faut aligner 3 symboles pour gagner.</p>
|
||||
<p id="RegleMorp">Règles du jeu: à 2 joueurs, vous jouez au tour par tour. Il faut aligner 3 symboles pour gagner.</p>
|
||||
<table id="tmorp">
|
||||
<tr>
|
||||
<td class="case"></td>
|
||||
|
|
@ -38,9 +38,6 @@
|
|||
</tr>
|
||||
|
||||
</table>
|
||||
<p class ="txt" id="AffJoueur"></p>
|
||||
<button id="ResetButton"> REJOUER</button>
|
||||
|
||||
<script type="text/javascript" src="leo.js"></script>
|
||||
|
||||
</body>
|
||||
|
|
@ -48,8 +45,6 @@
|
|||
</footer>
|
||||
</html>
|
||||
|
||||
|
||||
|
||||
<!-- [0,1,2]
|
||||
[3,4,5]
|
||||
[6,7,8]
|
||||
|
|
@ -1,56 +0,0 @@
|
|||
header
|
||||
{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background-color: white;
|
||||
padding: 1em;
|
||||
margin: 0 -5px;
|
||||
}
|
||||
body
|
||||
{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #17a2b8;
|
||||
margin: 0%;
|
||||
padding: 0%;
|
||||
min-height: 100vh;
|
||||
}
|
||||
a
|
||||
{
|
||||
text-decoration: none;
|
||||
color: grey;
|
||||
font-size: 1.2em;
|
||||
margin: 0 5px;
|
||||
}
|
||||
section
|
||||
{
|
||||
padding-top: 3em;
|
||||
padding-bottom: 3em;
|
||||
background-color: white;
|
||||
margin: 20em;
|
||||
margin-top : 5em;
|
||||
margin-bottom: 5em;
|
||||
border-radius: 0.5em;
|
||||
}
|
||||
footer{
|
||||
margin-top: auto;
|
||||
}
|
||||
td {
|
||||
color: #000088;
|
||||
text-align: center;
|
||||
margin-top: 14px;
|
||||
height: 6em;
|
||||
letter-spacing: 1px;
|
||||
border: 3px #17a2b8 inset;
|
||||
background-color: white;
|
||||
width: 6em;
|
||||
border-radius: 100%;
|
||||
}
|
||||
#Board{
|
||||
border: 3px #17a2b8 outset;
|
||||
border-radius: 2%;
|
||||
background-color: #17a2b8;
|
||||
margin: auto;
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
124
Puissance4.html
124
Puissance4.html
|
|
@ -1,85 +1,39 @@
|
|||
''' <!DOCTYPE HTML>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="Puissance4.css" type="text/css">
|
||||
<script type="text/javascript" src="Puissance4.js" defer></script>
|
||||
<html>
|
||||
<head>
|
||||
<title>Puissance 4</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<nav>
|
||||
<a href="Page1.html">Home</a>
|
||||
<a href="Puissance4.html">Puissance 4</a>
|
||||
<a href="Morpion.html">Morpion</a>
|
||||
<a href="Snake.html">Snake</a>
|
||||
<a href="JustePrix.html">Juste Prix</a>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<table id="Board">
|
||||
<tr>
|
||||
<td id="td00"></td>
|
||||
<td id="td01"></td>
|
||||
<td id="td02"></td>
|
||||
<td id="td03"></td>
|
||||
<td id="td04"></td>
|
||||
<td id="td05"></td>
|
||||
<td id="td06"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td id="td10"></td>
|
||||
<td id="td11"></td>
|
||||
<td id="td12"></td>
|
||||
<td id="td13"></td>
|
||||
<td id="td14"></td>
|
||||
<td id="td15"></td>
|
||||
<td id="td16"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td id="td20"></td>
|
||||
<td id="td21"></td>
|
||||
<td id="td22"></td>
|
||||
<td id="td23"></td>
|
||||
<td id="td24"></td>
|
||||
<td id="td25"></td>
|
||||
<td id="td26"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td id="td30"></td>
|
||||
<td id="td31"></td>
|
||||
<td id="td32"></td>
|
||||
<td id="td33"></td>
|
||||
<td id="td34"></td>
|
||||
<td id="td35"></td>
|
||||
<td id="td36"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td id="td40"></td>
|
||||
<td id="td41"></td>
|
||||
<td id="td42"></td>
|
||||
<td id="td43"></td>
|
||||
<td id="td44"></td>
|
||||
<td id="td45"></td>
|
||||
<td id="td46"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td id="td50"></td>
|
||||
<td id="td51"></td>
|
||||
<td id="td52"></td>
|
||||
<td id="td53"></td>
|
||||
<td id="td54"></td>
|
||||
<td id="td55"></td>
|
||||
<td id="td56"></td>
|
||||
</tr>
|
||||
</table>
|
||||
</section>
|
||||
</main>
|
||||
<footer>© Copyright 2022 by Sahel Olivan. All Rights Reserved.</footer>
|
||||
</body>
|
||||
</html>
|
||||
'''
|
||||
<!DOCTYPE HTML>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="style.css" type="text/css">
|
||||
<link rel="Javascript" href="Page1.js">
|
||||
<html>
|
||||
<head>
|
||||
<title>Puissance 4</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<nav>
|
||||
<a href="Page1.html">Home</a>
|
||||
<a href="Puissance4.html">Puissance 4</a>
|
||||
<a href="Morpion.html">Morpion</a>
|
||||
<a href="Snake.html">Snake</a>
|
||||
<a href="JustePrix.html">Juste Prix</a>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<article>
|
||||
<div id="Puissance4Board">
|
||||
<div class="one">1</div>
|
||||
<div class="two">2</div>
|
||||
<div class="three">3</div>
|
||||
<div class="four">4</div>
|
||||
<div class="five">5</div>
|
||||
<div class="six">6</div>
|
||||
</div>
|
||||
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
<footer>© Copyright 2019 by ME. All Rights Reserved.</footer>
|
||||
</body>
|
||||
</html>
|
||||
211
Puissance4.js
211
Puissance4.js
|
|
@ -1,211 +0,0 @@
|
|||
|
||||
var currentRow = 0;
|
||||
var currentColumn = 0;
|
||||
var nbOfPlay = 0;
|
||||
var columnFill0 = 5;
|
||||
var columnFill1 = 5;
|
||||
var columnFill2 = 5;
|
||||
var columnFill3 = 5;
|
||||
var columnFill4 = 5;
|
||||
var columnFill5 = 5;
|
||||
var columnFill6 = 5;
|
||||
var currentPosition = [0,0];
|
||||
var countYellow = 0;
|
||||
var countRed = 0;
|
||||
|
||||
//update currentRow, currentColumn, nbOfPlay and calls for placeCoin, everytime we press a cell
|
||||
const tbody = document.querySelector('#Board');
|
||||
tbody.addEventListener('click', function (e){
|
||||
const cell = e.target.closest('td');
|
||||
if (!cell) {return;}
|
||||
const row = cell.parentElement;
|
||||
currentRow = row.rowIndex;
|
||||
currentColumn = cell.cellIndex;
|
||||
nbOfPlay++;
|
||||
PlaceCoin();
|
||||
CheckIfWin();
|
||||
});
|
||||
|
||||
//to remove
|
||||
function test(){
|
||||
console.log(currentRow, currentColumn, nbOfPlay, currentPosition);
|
||||
|
||||
}
|
||||
|
||||
|
||||
//place a coin on the board accordingly to the rules
|
||||
//variable columnFill = nb of cell free of a coin in this column (max = 0(start at 5))
|
||||
//place coin at colomnFill + 1 and update columnFill
|
||||
//place coin : change background-color : pair nbOfPlay : red, odd nbOfPlay : yellow
|
||||
//if columnFill > 5 then catch error and alert(column is already filled) and don't count the play
|
||||
//also calls for CheckIfWin after each play
|
||||
function PlaceCoin(){
|
||||
try{
|
||||
switch (currentColumn) {
|
||||
case 0:
|
||||
currentPosition = [columnFill0,currentColumn];
|
||||
if (nbOfPlay % 2 == 0){
|
||||
document.getElementById('td'+columnFill0+currentColumn).style.backgroundColor = "red";
|
||||
columnFill0--;
|
||||
}
|
||||
else{
|
||||
document.getElementById('td'+columnFill0+currentColumn).style.backgroundColor = "yellow";
|
||||
columnFill0--;
|
||||
}
|
||||
break;
|
||||
|
||||
case 1:
|
||||
currentPosition = [columnFill1,currentColumn];
|
||||
if (nbOfPlay % 2 == 0){
|
||||
document.getElementById('td'+columnFill1+currentColumn).style.backgroundColor = "red";
|
||||
columnFill1--;
|
||||
}
|
||||
else{
|
||||
document.getElementById('td'+columnFill1+currentColumn).style.backgroundColor = "yellow";
|
||||
columnFill1--;
|
||||
}
|
||||
break;
|
||||
|
||||
case 2:
|
||||
currentPosition = [columnFill2,currentColumn];
|
||||
if (nbOfPlay % 2 == 0){
|
||||
document.getElementById('td'+columnFill2+currentColumn).style.backgroundColor = "red";
|
||||
columnFill2--;
|
||||
}
|
||||
else{
|
||||
document.getElementById('td'+columnFill2+currentColumn).style.backgroundColor = "yellow";
|
||||
columnFill2--;
|
||||
}
|
||||
break;
|
||||
|
||||
case 3:
|
||||
currentPosition = [columnFill3,currentColumn];
|
||||
if (nbOfPlay % 2 == 0){
|
||||
document.getElementById('td'+columnFill3+currentColumn).style.backgroundColor = "red";
|
||||
columnFill3--;
|
||||
}
|
||||
else{
|
||||
document.getElementById('td'+columnFill3+currentColumn).style.backgroundColor = "yellow";
|
||||
columnFill3--;
|
||||
}
|
||||
break;
|
||||
|
||||
case 4:
|
||||
currentPosition = [columnFill4,currentColumn];
|
||||
if (nbOfPlay % 2 == 0){
|
||||
document.getElementById('td'+columnFill4+currentColumn).style.backgroundColor = "red";
|
||||
columnFill4--;
|
||||
}
|
||||
else{
|
||||
document.getElementById('td'+columnFill4+currentColumn).style.backgroundColor = "yellow";
|
||||
columnFill4--;
|
||||
}
|
||||
break;
|
||||
|
||||
case 5:
|
||||
currentPosition = [columnFill5,currentColumn];
|
||||
if (nbOfPlay % 2 == 0){
|
||||
document.getElementById('td'+columnFill5+currentColumn).style.backgroundColor = "red";
|
||||
columnFill5--;
|
||||
}
|
||||
else{
|
||||
document.getElementById('td'+columnFill5+currentColumn).style.backgroundColor = "yellow";
|
||||
columnFill5--;
|
||||
}
|
||||
break;
|
||||
|
||||
case 6:
|
||||
currentPosition = [columnFill6,currentColumn];
|
||||
if (nbOfPlay % 2 == 0){
|
||||
document.getElementById('td'+columnFill6+currentColumn).style.backgroundColor = "red";
|
||||
columnFill6--;
|
||||
}
|
||||
else{
|
||||
document.getElementById('td'+columnFill6+currentColumn).style.backgroundColor = "yellow";
|
||||
columnFill6--;
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
catch{
|
||||
nbOfPlay--;
|
||||
currentPosition[0] = 0;
|
||||
}
|
||||
}
|
||||
|
||||
let moves = 0;
|
||||
|
||||
function CheckIfWin() {
|
||||
moves++
|
||||
if (moves < 7){
|
||||
|
||||
|
||||
// Check if the current player has won
|
||||
|
||||
// Check for horizontal win
|
||||
for (let row = 0; row < 6; row++) {
|
||||
for (let col = 0; col < 4; col++) {
|
||||
const cell1 = getComputedStyle(document.getElementById(`td${row}${col}`)).backgroundColor;
|
||||
const cell2 = getComputedStyle(document.getElementById(`td${row}${col + 1}`)).backgroundColor;
|
||||
const cell3 = getComputedStyle(document.getElementById(`td${row}${col + 2}`)).backgroundColor;
|
||||
const cell4 = getComputedStyle(document.getElementById(`td${row}${col + 3}`)).backgroundColor;
|
||||
if (cell1 === cell2 && cell2 === cell3 && cell3 === cell4 && cell1 !== "rgb(255, 255, 255)") {
|
||||
// Display winning message
|
||||
alert(`Player ${cell1} wins!`);
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Check for vertical win
|
||||
for (let row = 0; row < 3; row++) {
|
||||
for (let col = 0; col < 7; col++) {
|
||||
const cell1 = getComputedStyle(document.getElementById(`td${row}${col}`)).backgroundColor;
|
||||
const cell2 = getComputedStyle(document.getElementById(`td${row + 1}${col}`)).backgroundColor;
|
||||
const cell3 = getComputedStyle(document.getElementById(`td${row + 2}${col}`)).backgroundColor;
|
||||
const cell4 = getComputedStyle(document.getElementById(`td${row + 3}${col}`)).backgroundColor;
|
||||
if (cell1 === cell2 && cell2 === cell3 && cell3 === cell4 && cell1 !== "rgb(255, 255, 255)") {
|
||||
// Display winning message
|
||||
alert(`Player ${cell1} wins!`);
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Check for diagonal win (top left to bottom right)
|
||||
for (let row = 0; row < 3; row++) {
|
||||
for (let col = 0; col < 4; col++) {
|
||||
const cell1 = getComputedStyle(document.getElementById(`td${row}${col}`)).backgroundColor;
|
||||
const cell2 = getComputedStyle(document.getElementById(`td${row + 1}${col + 1}`)).backgroundColor;
|
||||
const cell3 = getComputedStyle(document.getElementById(`td${row + 2}${col + 2}`)).backgroundColor;
|
||||
const cell4 = getComputedStyle(document.getElementById(`td${row + 3}${col + 3}`)).backgroundColor;
|
||||
if (cell1 === cell2 && cell2 === cell3 && cell3 === cell4 && cell1 !== "rgb(255, 255, 255)") {
|
||||
// Display winning message
|
||||
alert(`Player ${cell1} wins!`);
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Check for diagonal win (top right to bottom left)
|
||||
for (let row = 0; row < 3; row++) {
|
||||
for (let col = 3; col < 7; col++) {
|
||||
const cell1 = getComputedStyle(document.getElementById(`td${row}${col}`)).backgroundColor;
|
||||
const cell2 = getComputedStyle(document.getElementById(`td${row + 1}${col - 1}`)).backgroundColor;
|
||||
const cell3 = getComputedStyle(document.getElementById(`td${row + 2}${col - 2}`)).backgroundColor;
|
||||
const cell4 = getComputedStyle(document.getElementById(`td${row + 3}${col - 3}`)).backgroundColor;
|
||||
if (cell1 === cell2 && cell2 === cell3 && cell3 === cell4 && cell1 !== "rgb(255, 255, 255)") {
|
||||
// Display winning message
|
||||
alert(`Player ${cell1} wins!`);
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
else if (moves > 42){
|
||||
alert("it's a tie!")
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
//il faudrait que je mette un autre message d'érreur que leode rgb de la couleur.
|
||||
78
leo.css
78
leo.css
|
|
@ -1,78 +0,0 @@
|
|||
header
|
||||
{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: white;
|
||||
padding-left: 0.5em;
|
||||
padding-right: 0.5em;
|
||||
padding-top:0.1em;
|
||||
row-gap: 50px;
|
||||
}
|
||||
img
|
||||
{
|
||||
margin-right: auto;
|
||||
}
|
||||
body
|
||||
{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #b16f24;
|
||||
margin: 0%;
|
||||
padding: 0%;
|
||||
min-height: 100vh;
|
||||
}
|
||||
a
|
||||
{
|
||||
text-decoration: none;
|
||||
color: grey;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
section
|
||||
{
|
||||
padding-top: 3em;
|
||||
padding-bottom: 3em;
|
||||
background-color: lightgrey;
|
||||
margin: 20em;
|
||||
margin-top : 5em;
|
||||
margin-bottom: 5em;
|
||||
border-radius: 0.5em;
|
||||
}
|
||||
article
|
||||
{
|
||||
text-align: center;
|
||||
}
|
||||
footer{
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.case{
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
/*background-color: white;*/
|
||||
text-align: center;
|
||||
border: 1px solid black;
|
||||
|
||||
}
|
||||
table{
|
||||
background-color:white;
|
||||
border-collapse: collapse;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.txt{
|
||||
background-color: lightgrey;
|
||||
text-align: center;
|
||||
margin-right:auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
#TitreMorp{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#ResteButton{
|
||||
margin-left: auto;
|
||||
margin-right:auto;
|
||||
}
|
||||
191
leo.js
191
leo.js
|
|
@ -1,168 +1,47 @@
|
|||
|
||||
let Jeu= true;
|
||||
let Joueuractuel;
|
||||
let content = "X"
|
||||
let jeu = 1
|
||||
/*
|
||||
|
||||
function WinVerif(cases){
|
||||
let symbole = ["X","O"];
|
||||
for (let i =0 ; i<2 ; i++){
|
||||
// test sur les lignes
|
||||
if(
|
||||
cases[0].innerHTML == symbole[i] &&
|
||||
cases[1].innerHTML == symbole[i] &&
|
||||
cases[2].innerHTML == symbole[i]){
|
||||
cases[0].style.backgroundColor = "#6eec94";
|
||||
cases[1].style.backgroundColor = "#6eec94";
|
||||
cases[2].style.backgroundColor = "#6eec94";
|
||||
return symbole[i];
|
||||
}
|
||||
|
||||
if(
|
||||
cases[3].innerHTML == symbole[i] &&
|
||||
cases[4].innerHTML == symbole[i] &&
|
||||
cases[5].innerHTML == symbole[i]){
|
||||
function winverif(){
|
||||
|
||||
cases[3].style.backgroundColor = "#6eec94";
|
||||
cases[4].style.backgroundColor = "#6eec94";
|
||||
cases[5].style.backgroundColor = "#6eec94";
|
||||
return symbole[i];
|
||||
}
|
||||
}
|
||||
*/
|
||||
let cases = document.querySelectorAll(".case");
|
||||
for(let i = 0 ;i< cases.length;i++)
|
||||
{
|
||||
Joueuractuel = i%2;
|
||||
|
||||
if (Joueuractuel){
|
||||
|
||||
if(
|
||||
cases[6].innerHTML == symbole[i] &&
|
||||
cases[7].innerHTML == symbole[i] &&
|
||||
cases[8].innerHTML == symbole[i]){
|
||||
cases[6].style.backgroundColor = "#6eec94";
|
||||
cases[7].style.backgroundColor = "#6eec94";
|
||||
cases[8].style.backgroundColor = "#6eec94";
|
||||
return symbole[i];
|
||||
}
|
||||
// test sur les colonnes
|
||||
if(
|
||||
cases[0].innerHTML == symbole[i] &&
|
||||
cases[3].innerHTML == symbole[i] &&
|
||||
cases[6].innerHTML == symbole[i]){
|
||||
cases[0].style.backgroundColor = "#6eec94";
|
||||
cases[3].style.backgroundColor = "#6eec94";
|
||||
cases[6].style.backgroundColor = "#6eec94";
|
||||
return symbole[i];
|
||||
}
|
||||
|
||||
if(
|
||||
cases[1].innerHTML == symbole[i] &&
|
||||
cases[4].innerHTML == symbole[i] &&
|
||||
cases[7].innerHTML == symbole[i]){
|
||||
cases[1].style.backgroundColor = "#6eec94";
|
||||
cases[4].style.backgroundColor = "#6eec94";
|
||||
cases[7].style.backgroundColor = "#6eec94";
|
||||
return symbole[i];
|
||||
}
|
||||
|
||||
if(
|
||||
cases[2].innerHTML == symbole[i] &&
|
||||
cases[5].innerHTML == symbole[i] &&
|
||||
cases[8].innerHTML == symbole[i]){
|
||||
cases[2].style.backgroundColor = "#6eec94";
|
||||
cases[5].style.backgroundColor = "#6eec94";
|
||||
cases[8].style.backgroundColor = "#6eec94";
|
||||
return symbole[i];
|
||||
}
|
||||
// test sur les diagonales
|
||||
if(
|
||||
cases[0].innerHTML == symbole[i] &&
|
||||
cases[4].innerHTML == symbole[i] &&
|
||||
cases[8].innerHTML == symbole[i]){
|
||||
cases[0].style.backgroundColor = "#6eec94";
|
||||
cases[4].style.backgroundColor = "#6eec94";
|
||||
cases[8].style.backgroundColor = "#6eec94";
|
||||
return symbole[i];
|
||||
}
|
||||
|
||||
if(
|
||||
cases[2].innerHTML == symbole[i] &&
|
||||
cases[4].innerHTML == symbole[i] &&
|
||||
cases[6].innerHTML == symbole[i]){
|
||||
cases[2].style.backgroundColor = "#6eec94";
|
||||
cases[4].style.backgroundColor = "#6eec94";
|
||||
cases[6].style.backgroundColor = "#6eec94";
|
||||
return symbole[i];
|
||||
}
|
||||
|
||||
cases[i].addEventListener("click",(event)=>{
|
||||
cases[i].innerHTML = "0";
|
||||
})
|
||||
}
|
||||
else{
|
||||
cases[i].addEventListener("click",(event)=>{
|
||||
cases[i].innerHTML = "X";
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function Draw(cases) {
|
||||
//test si les cases sont toutes remplies alors on renvoie false
|
||||
for (let i = 0; i < cases.length; i++) {
|
||||
if (cases[i].innerHTML.length == 0)
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
|
||||
/*
|
||||
document.getElementById("demo1").onclick = function() {myFunction()};
|
||||
|
||||
|
||||
function myFunction() {
|
||||
document.getElementById("demo1").innerHTML = "O";
|
||||
}
|
||||
document.getElementById("demo2").onclick = function() {myFunction()};
|
||||
|
||||
function ResetJeu(){
|
||||
//pour relancer le jeu à n'importe qu'elle moment de la partie
|
||||
jeu = 1;
|
||||
for(let i = 0 ;i< cases.length;i++){
|
||||
cases[i].innerHTML = "";
|
||||
cases[i].style.backgroundColor = "#FFFFFF";
|
||||
}
|
||||
content = "X";
|
||||
return 1;
|
||||
function myFunction() {
|
||||
document.getElementById("demo2").innerHTML = "O";
|
||||
}
|
||||
document.getElementById("demo3").onclick = function() {myFunction()};
|
||||
|
||||
let Afficheur = function(element) {
|
||||
let affichage = element;
|
||||
|
||||
function setText(message) {
|
||||
affichage.innerHTML = message;
|
||||
}
|
||||
return { sendMessage: setText };
|
||||
};
|
||||
|
||||
|
||||
let cases = document.querySelectorAll(".case");
|
||||
let btn = document.querySelector('button');
|
||||
|
||||
|
||||
for(let i = 0 ;i< cases.length;i++)
|
||||
{
|
||||
let aff = new Afficheur(document.querySelector("#AffJoueur"));
|
||||
aff.sendMessage("C'est au tour du Joueur " + content);
|
||||
|
||||
cases[i].addEventListener("click",function() {
|
||||
|
||||
if (cases[i].innerHTML == "" && jeu ==1) {
|
||||
|
||||
cases[i].innerHTML = content;
|
||||
if (content == "X")
|
||||
content = "O";
|
||||
else
|
||||
content ="X";
|
||||
|
||||
AffJoueur.style.backgroundColor="#b16f24";
|
||||
aff.sendMessage("C'est au tour du Joueur " + content);
|
||||
}
|
||||
else if (jeu == 1){
|
||||
AffJoueur.style.backgroundColor="#ff0000";
|
||||
aff.sendMessage("La case est déja remplie, Joueur " + content + ", rejouer svp");
|
||||
}
|
||||
|
||||
|
||||
|
||||
if(WinVerif(cases)){
|
||||
aff.sendMessage("C'est gagné pour le Joueur " + WinVerif(cases));
|
||||
jeu = 0;
|
||||
}
|
||||
|
||||
if(Draw(cases))
|
||||
{
|
||||
aff.sendMessage("Match Nul");
|
||||
jeu = 0;
|
||||
}
|
||||
|
||||
btn.addEventListener('click',ResetJeu);
|
||||
|
||||
})
|
||||
|
||||
|
||||
};
|
||||
function myFunction() {
|
||||
document.getElementById("demo3").innerHTML = "O";
|
||||
}*/
|
||||
24
style.css
24
style.css
|
|
@ -62,6 +62,30 @@ footer{
|
|||
gap: 1em;
|
||||
padding: 1em;
|
||||
}
|
||||
.one{
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
}
|
||||
.two{
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
}
|
||||
.three{
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
}
|
||||
.four{
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
}
|
||||
.five{
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
}
|
||||
.six{
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
}
|
||||
#RegleMorp{
|
||||
background-color: lightgrey;
|
||||
text-align: center;
|
||||
|
|
|
|||
불러오는 중…
Reference in a new issue