11549 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Bloquer des fonctions, en débloquer d'autres

Bonsoir,

Je tente vainement de faire un jeu de la vie en DHTML (=HTML/CSS+JS). Et avec mes (très) modestes connaissances, j'ai déjà fait ça :
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Le jeu de la vie</title>
		<link rel="stylesheet" href="style.css" />
    </head>
 
    <body>
		
		<table class="jeu">
			<tr>
				<td class="morte" onclick="changeCouleur(this)"></td>
				<td class="morte" onclick="changeCouleur(this)"></td>
				<td class="morte" onclick="changeCouleur(this)"></td>
				<td class="morte" onclick="changeCouleur(this)"></td>
				<td class="morte" onclick="changeCouleur(this)"></td>
			</tr>
			<tr>
				<td class="morte" onclick="changeCouleur(this)"></td>
				<td class="morte" onclick="changeCouleur(this)"></td>
				<td class="morte" onclick="changeCouleur(this)"></td>
				<td class="morte" onclick="changeCouleur(this)"></td>
				<td class="morte" onclick="changeCouleur(this)"></td>
			</tr>
			<tr>
				<td class="morte" onclick="changeCouleur(this)"></td>
				<td class="morte" onclick="changeCouleur(this)"></td>
				<td class="morte" onclick="changeCouleur(this)"></td>
				<td class="morte" onclick="changeCouleur(this)"></td>
				<td class="morte" onclick="changeCouleur(this)"></td>
			</tr>
			<tr>
				<td class="morte" onclick="changeCouleur(this)"></td>
				<td class="morte" onclick="changeCouleur(this)"></td>
				<td class="morte" onclick="changeCouleur(this)"></td>
				<td class="morte" onclick="changeCouleur(this)"></td>
				<td class="morte" onclick="changeCouleur(this)"></td>
			</tr>
			<tr>
				<td class="morte" onclick="changeCouleur(this)"></td>
				<td class="morte" onclick="changeCouleur(this)"></td>
				<td class="morte" onclick="changeCouleur(this)"></td>
				<td class="morte" onclick="changeCouleur(this)"></td>
				<td class="morte" onclick="changeCouleur(this)"></td>
			</tr>
		</table>
		<br />
		<table>
			<tr>
				<td class="sans">Lancer</td>
			</tr>
			<tr>
				<td class="sans"></td>
			</tr>
			<tr>
				<td class="sans">Modifier</td>
			</tr>
		</table>
		<script>
			function changeCouleur(td)
			{
				td.className=(td.className=="morte") ? "vivante" : "morte";
			}
		</script>
    </body>
</html>


td.morte, td.vivante
{
	border: 1px solid #cccccc;
	height:20px;
	width:20px;
	border-radius:5px;
}
table.jeu
{
	border-collapse:separate;
	border: 1px solid black;
	
}
.morte
{
	background-color:white;
}

.vivante
{
	background-color:black;
}


(nul ? oui, je sais)

Mon but est ici que l'on puisse cliquer sur lancer et qu'alors on ne puisse plus modifier les cases (et que le jeu se lance) et qu'en faisant modifier le jeu s'arrête et on peut à nouveau modifier les cases... Je ne sais pas si je vais faire un seul bouton à deux états ou deux boutons mis en valeur quand on peut leur cliquer dessus, mais là, j'avoue que c'est pas ça le but

Merci d'avance
Bonjour.

Je pense que tu devrais tout centraliser ton JS et ne pas mettre de onclick directement sur tes <td>.

Il te suffirait alors de gérer l’évènement clic sur tes cellules et grâce à un booléen qui te dirait si le jeu est lancé ou pas, permettre la modification de tes cellules ou non.

J'espère avoir été clair, et d'une aide certaine... Smiley rolleyes
Le booléen, c'est fait ^^ (le sujet date un peu Smiley langue )
Sinon, je n'ai pas compris l'histoire de "ne pas mettre onclick sur les td"... Peux-tu m'expliquer comment faire alors ?

Merci de ta réponse en tout cas
Bonjour,

J'ai pas tout compris mais pourquoi ne pas mettre tout simplement les zones de saisies en "disabled" le temps que le jeu se fasse. et quand il prend fin enlever le "disabled" ?
Une propriété qui permet d'empecher l'utilisateur d'utiliser des controles de formulaires... mais pour le coup tu n'en utilises pas, donc c'est pas applicable en fait.

a écrit :
Sinon, je n'ai pas compris l'histoire de "ne pas mettre onclick sur les td"... Peux-tu m'expliquer comment faire alors ?


Bah normalement, tout comme on ne mélange pas son css dans le html, on ne mélange pas le js avec le html Smiley smile . Tu peux détecter les clicks sur les tds dans un script à part en utilisant la fonction addEventListener, c'est plus propre.

Sinon bah je sais pas ou tu en es, mais dans l'idée oui, il te faut un booléen quelque part, et dans ta fonction changeCouleur tu vérifies si le jeu ets lancé ou non; s'il est lancé, bah tu ne fais rien.
sephitan a écrit :
Une propriété qui permet d'empecher l'utilisateur d'utiliser des controles de formulaires... mais pour le coup tu n'en utilises pas, donc c'est pas applicable en fait.


Et pourquoi ne pas commencer ?
C'est un approche valable aussi, surement même plus pertinente que celle proposée dans le message initial. Mais Ccil13 na pas l'air particulièrement à l'aise avec le js, donc je ne sais pas si ajouter même un peu de complexitée supplémentaire est une bonne idée.
Aa, les événements non ? Je ne connais pas encore (je sais juste que ça existe^^)
Je vais continuer à lire des tutos avant de reprendre (peut-être de zéro) ce projet...

Merci en tout cas ^^
sephitan a écrit :
C'est un approche valable aussi, surement même plus pertinente que celle proposée dans le message initial. Mais Ccil13 na pas l'air particulièrement à l'aise avec le js, donc je ne sais pas si ajouter même un peu de complexitée supplémentaire est une bonne idée.


Je n'avais pas vu çà comme çà Smiley smile mais c'est ce que je conseillerais malgrè tout et puis c'est un exercie simpa pour commencer du JS non ?


@Ccil13 : si tu veux on peux t'aider à réaliser ton premier script JS ; poste nous quelques lignes de code et on pourra adapter quelques lignes de JS pour toi Smiley smile
mini-truc a écrit :

Je n'avais pas vu çà comme çà Smiley smile mais c'est ce que je conseillerais malgrè tout et puis c'est un exercie simpa pour commencer du JS non ?


Absolument Smiley smile .

Ccile13 a écrit :
Aa, les événements non ? Je ne connais pas encore (je sais juste que ça existe^^)


C'est ca. C'est probablement une bonne chose d'explorer un peu ce sujet, c'est un des fondements du javascript.
Merci ^^
Je garde l'idée et dès que je recommence quelque chose, je posterais ici(ici sur le forum, pas sur ce post sauf si vous me dites que ce post est mieux...) (en ce moment, je fais d'autres choses)

Merci encore
Merci mais j'aime pas me faciliter la vie^^
Ah sinon, ce sujet est résolu, désolée de ne pas l'avoir mis plus tôt

Merci encore
SolidSnake a écrit :
Pour commencer le JS je te conseille d'utiliser jQuery, qui te facilitera GRANDEMENT la vie. Smiley cligne


Je vois pas comment on pourrait donner un conseil pire que celui la. Pour apprendre JS, démarrer avec un framework est la pire chose à faire.
La pire chose ? Vraiment ?

Ok, ce n'aiderait pas vraiment à apprendre le javascript, mais ça simplifierait le codage pour quelqu'un qui ne serait pas du tout à l'aise avec JS, après ce n'est que mon avis.
Sujet clos
Aller à