aide en code html et css et javascript

Conception d'un jeu

cedrichens1

cedrichens1

Messages : 5
Inscrit le : 16/07/2020 08:07

L'idée est qu'une liste de mots (7 mots) soit afficher en cliquant sur un bouton "jouer" et au bout de 5 secondes la liste de mots disparaît.
Un tableau apparaît à la suite. dans ce tableau différentes cellules avec des mots. Quand on clique sur une cellule, elle change de couleur. On peut cliquer sur le nombre de cellules afficher avec rapport à la liste de mots (7 mots). Puis il y a une correction donc il laisse la couleur des mots qui sont bons mais corrige d'une autre couleur les mots manquants.Puis un bouton rejoué apparaît. il est marqué en dessous du tableau le nombre mot trouver.

code en html

<h1>jeu de mémoire thème informatique</h1>

<div class="container">
<div class="jdm">
<div id="bip" class="card1"></div>

<div id="card1" style="display:none;" >
<div class="divTable jci">
<div class="divTableBody">
<div class="divTableRow">
<div class="divTableCell">cell1_1</div>
<div class="divTableCell">cell2_1</div>
<div class="divTableCell">cell3_1</div>
<div class="divTableCell">cell4_1</div>
<div class="divTableCell">cell5_1</div>
<div class="divTableCell">cell6_1</div>
<div class="divTableCell">cell7_1</div>
</div>
</div>
</div>
</div>
</div>

<div class="card2">
<div id="card2" style="visibility: hidden">
<div class="divTable jci">
<div class="divTableBody">
<div class="divTableRow">
<div class="divTableCell">cell1_1</div>
<div class="divTableCell">cell2_1</div>
<div class="divTableCell">cell3_1</div>
<div class="divTableCell">cell4_1</div>
</div>
<div class="divTableRow">
<div class="divTableCell">cell1_2</div>
<div class="divTableCell">cell2_2</div>
<div class="divTableCell">cell3_2</div>
<div class="divTableCell">cell4_2</div>
</div>
<div class="divTableRow">
<div class="divTableCell">cell1_3</div>
<div class="divTableCell">cell2_3</div>
<div class="divTableCell">cell3_3</div>
<div class="divTableCell">cell4_3</div>
</div>
<div class="divTableRow">
<div class="divTableCell">cell1_4</div>
<div class="divTableCell">cell2_4</div>
<div class="divTableCell">cell3_4</div>
<div class="divTableCell">cell4_4</div>
</div>
<div class="divTableRow">
<div class="divTableCell">cell1_5</div>
<div class="divTableCell">cell2_5</div>
<div class="divTableCell">cell3_5</div>
<div class="divTableCell">cell4_5</div>
</div>
<div class="divTableRow">
<div class="divTableCell">cell1_6</div>
<div class="divTableCell">cell2_6</div>
<div class="divTableCell">cell3_6</div>
<div class="divTableCell">cell4_6</div>
</div>
</div>
</div>
</div>

<button onclick="start(), card1(), setTimeout(showCard2(), 6000)" style="float: right;">Jouer</button>
</div>
</div>


code css
/*card1*/
div.unstyledTable {
font-family: Arial, Helvetica, sans-serif;
border: 10px solid #653D81;
background-color: #FFFFFF;
width: 175px;
height: 72px;
text-align: center;
border-collapse: collapse;
}
.divTable.unstyledTable .divTableCell, .divTable.unstyledTable .divTableHead {
border: 1px solid #653D81;
padding: 7px 10px;
}
.divTable.unstyledTable .divTableBody .divTableCell {
font-size: 21px;
color: #333333;
}
.divTable{ display: table; }
.divTableRow { display: table-row; }
.divTableHeading { display: table-header-group;}
.divTableCell, .divTableHead { display: table-cell;}
.divTableHeading { display: table-header-group;}
.divTableFoot { display: table-footer-group;}
.divTableBody { display: table-row-group;}

/*card2*/
div.tablebody {
font-family: Arial, Helvetica, sans-serif;
border: 10px solid #854CCB;
background-color: #854CCB;
width: 175px;
height: 72px;
text-align: center;
border-collapse: collapse;
}

.divTable.jci .divTableCell, .divTable.jci .divTableHead {
border: 1px solid #854CCB;
padding: 7px 10px;
}
.divTable.jci .divTableBody .divTableCell {
font-size: 14px;
color: #333333;
}

.divTable{ display: table; }
.divTableRow { display: table-row;}
.divTableHeading { display: table-header-group;}
.divTableCell, .divTableHead { display: table-cell;}
.divTableHeading { display: table-header-group;}
.divTableFoot { display: table-footer-group;}
.divTableBody { display: table-row-group;}

#card2{
cursor:pointer;
background-color:#fff;
}


code javascript
/*afficher pares au temps de seconde le tebleau*/
function showCard2() {
document.getElementById("card2");
card2.style.visibility = "visible";
}
// après le clique et ses 6 sec

/*afficher/masquer le tableau 1*/
function card1(){
divinfo = document.getElementById('card1');
if (divinfo.style.display == 'none')
divinfo.style.display = 'block';
else divinfo.style.display ='none';
}

/*chrono apres le clique jouer*/
var counter = 5;
var intervalId = null;
function finish() {
clearInterval(intervalId);
document.getElementById("bip").innerHTML = "TERMINER!";
card1() = divinfo.style.display = 'none';/*disparaitre le tableau*/
}
function bip() {
counter--;
if(counter == 0) finish();
else {
document.getElementById("bip").innerHTML = counter + "secondes restantes";
}
}

function start(){
intervalId = setInterval(bip, 1000);
}


Pouvez vous m'aider voir rectifier mes erreurs. Car j'ai réussi faire la première partie (disparaître le premier tableau au bout de 5 seconde et afficher le deuxième tableau)

Edité le 30/07/2020 20:11 par cedrichens1
Edité le 31/07/2020 11:35 par cedrichens1
Edité le 31/07/2020 16:15 par cedrichens1
Edité le 31/07/2020 17:33 par cedrichens1
Edité le 31/07/2020 17:35 par cedrichens1
Edité le 31/07/2020 21:16 par cedrichens1