IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Jeu 4 Images, 1 mot


Sujet :

JavaScript

  1. #1
    Candidat au Club
    Femme Profil pro
    Lycéen
    Inscrit en
    Avril 2022
    Messages
    6
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Orne (Basse Normandie)

    Informations professionnelles :
    Activité : Lycéen
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Avril 2022
    Messages : 6
    Points : 3
    Points
    3
    Par défaut Jeu 4 Images, 1 mot
    Bonjour à tous,
    Je ne maîtrise pas vraiment le html, css et js mais j'ai essayé de créer le jeu 4 mages 1 mot.
    Mais au moment de valider le mot et de vérifier si c'est le même mot que la réponse, la fonction ne se lance pas. Pouvez-vous m'aider ?

    Voici mon code html :
    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    <!DOCTYPE html>	
    <html lang="fr-fr">
    	<head>
    		<meta charset="utf-8" />
    		<link rel="stylesheet" type="text/css" href="qium.css" />
    		<link rel="stylesheet" type="text/javascript" href="qium.js" />
     
    		<title>4 images, 1 mot</title>
    		<meta name="description" content="4 images, 1 mot" />
     
    	</head>
    	<body>
    	<script type="text/javascript" src="qium.js"></script>
    		<div id="d1">
    			<center>
    			<img alt="image" src="magie1.jpg" width="250" height="150">
    			<img alt="image" src="magie2.jpg" width="250" height="150"><br>
    			<img alt="image" src="magie3.jpg" width="250" height="150">
    			<img alt="image" src="magie4.jpg" width="250" height="150">
    			<form action="" method="get" class="note">
    			<div class="note">
    				<label for="note">Entrez le mot : </label>
    				<input type="text" name="note" id="mot1"/> 
    				<input type="button" value="Valider" onClick="verif_mot(form,1,mot1);"/>
    				<INPUT TYPE="reset" VALUE="Recommencer">
    				<script type="text/javascript"> 
                                            document.getElementById("mot1").onclick = doFunction;
                                    </script>
    			</div>
                </form>
    			</center>
    			</div>
    		<br>
    		<div id="d2">
    			<center>
    			<img alt="image" src="terre1.jpg" width="250" height="150">
    			<img alt="image" src="terre2.jpg" width="250" height="150"><br>
    			<img alt="image" src="terre3.jpg" width="250" height="150">
    			<img alt="image" src="terre4.jpg" width="250" height="150">
    			<form action="" method="get" class="note">
    			<div class="note">
    				<label for="note">Entrez le mot : </label>
    				<input type="text" name="note" id="mot2"/> <input type="button" value="Valider" onClick="verif_mot(form,2,mot2);"/>
    				<INPUT TYPE="reset" VALUE="Recommencer">
    			</div>
                </form>
    			</center>
    		</div>
    		<br>
    		<div id="d3">
    			<center>
    			<img alt="image" src="pastel1.jpg" width="250" height="150">
    			<img alt="image" src="pastel2.jpg" width="250" height="150"><br>
    			<img alt="image" src="pastel3.jpg" width="250" height="150">
    			<img alt="image" src="pastel4.jpg" width="250" height="150">
    			<form action="" method="get" class="note">
    			<div class="note">
    				<label for="note">Entrez le mot : </label>
    				<input type="text" name="note" id="mot3"/> <input type="button" value="Valider" onClick="verif_mot(form,3,mot3);"/>
    				<INPUT TYPE="reset" VALUE="Recommencer">
    			</div>
                </form>
    			</center>
    		</div>
    		<br>
    		<div id="d4">
    			<center>
    			<img alt="image" src="chanter1.jpg" width="250" height="150">
    			<img alt="image" src="chanter2.jpg" width="250" height="150"><br>
    			<img alt="image" src="chanter3.jpg" width="250" height="150">
    			<img alt="image" src="chanter4.jpg" width="250" height="150">
    			<form action="" method="get" class="note">
    			<div class="note">
    				<label for="note">Entrez le mot : </label>
    				<input type="text" name="note" id="mot4"/> <input type="button" value="Valider" onClick="verif_mot(form,4,mot4);"/>
    				<INPUT TYPE="reset" VALUE="Recommencer">
    			</div>
                </form>
    			</center>
    		</div>
    		<br>
    			<div id="score" style="font-weight: bold; text-align: center">
    			Gagné: 0 fois. Perdu: 0 fois.
    			</div>
    	</body>
    </html>
    Voici mon code css :
    Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    html {
    	color: black;
    	background-color: #33afff;
    	background-image: none;
    	background-repeat: repeat;
    	background-attachment: scroll;
    	background-position: 0% 0%;
    	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    	font-size: small;
    }
     
    h1 {
    	color:#046df8;
    }
     
    div{
    	color:black;
    }
     
    table {
    	background-color: #ffffff;
    	border-color: #046df8;
    	border-style: solid;
    	border-width: 2px;
    	margin-left: auto;
    	margin-right: auto;
    	text-align: center;
    }
     
    table td {
    	border-style: double;
    	border-width: 1px;
    	text-align: center;
    }

    Voici mon code javascript :
    Code JavaScript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    var user = "";
    var issue = Arrays.asList();
    var points = 0;
    var mot_joueur = [];
    var chaine_mot_joueur = [];
     
    function reponse()
    """Cette fonction sert à définir quel mot est la réponse à quelles images, par exemple, pour les images 1, la réponse est magie. La chaîne de caractère est déjà mise sous forme de liste, avec chaque élément du mot, afin de diminuer les tâches."""
    {
    	if (document.getElementById(d1) == 1)
    		issue = Arrays.asList("m","a","g","i","e")
    	else if (document.getElementById(d2) == 2)
    		issue = Arrays.asList("t","e","r","r","e")
    	else if (document.getElementById(d3) == 3)
    		issue = Arrays.asList("p","a","s","t","e","l")
    	else if (document.getElementById(d4) == 4)
    		issue = Arrays.asList("c","h","a","n","t","e","r")
    }
     
    function verif_mot(form,issue,user)
    """Cette fonction va servir à vérifier le mot. C'est-à-dire que lorsque l'utilisateur va rentrer sa réponse, la fonction vérifiera pour quelles images il a rentrer sa réponse, et si sa réponse est la bonne. En fonction de la réponse, le joueur perd 1 point ou le gagne."""
    {
    	List <String> mot_joueur = new ArrayList <String> ();     
    	for(int i = 0 ; i < user ; i++) {
    		mot_joueur.add(chaine_mot_joueur);
    	}
    	if issue == 1 
    		mot_joueur=document.getElementById(mot1)
    		for(int i = 0 ; i<issue ; i++){
    			if issue[i]==mot_joueur[i]
    			{
    				alert("Gagné !");
    				points+=1;
    				calcScore(form);
    			}
    		}
    	else if issue == 2
    		mot_joueur=document.getElementById(mot2)
    		for(int i = 0 ; i<issue ; i++){
    			if issue[i]==mot_joueur[i]
    			{
    				alert("Gagné !");
    				points+=1;
    				calcScore(form);
    			}
    		}
    	else if issue == 3
    		mot_joueur=document.getElementById(mot3)
    		for(int i = 0 ; i<issue ; i++){
    			if issue[i]==mot_joueur[i]
    			{
    				alert("Gagné !");
    				points+=1;
    				calcScore(form);
    			}
    		}
    	else if issue == 4
    		mot_joueur=document.getElementById(mot4)
    		for(int i = 0 ; i<issue ; i++){
    			if issue[i]==mot_joueur[i]
    			{
    				alert("Gagné !");
    				points+=1;
    				calcScore(form);
    			}
    		}
    	else
    			{
    				alert("Perdu !");
    				points-=1;
    				calcScore(form);
    			}
    }
     
    function calculerScore(form)
    """Cette fonction est utilisé pour comptabiliser les points"""
    {
    	document.getElementById("score").innerHTML = "Vous avez " + points + " points."
    }

    Merci d'avance,
    Bonne journée à vous tous

  2. #2
    Membre éclairé
    Homme Profil pro
    Webdesigner
    Inscrit en
    Juin 2014
    Messages
    415
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 64
    Localisation : France, Hautes Pyrénées (Midi Pyrénées)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Associations - ONG

    Informations forums :
    Inscription : Juin 2014
    Messages : 415
    Points : 831
    Points
    831
    Par défaut
    Bonjour. A moins que je me trompe, ta fonction reponse n'est appelée nulle part. Normal qu'elle ne soit pas exécutée.

  3. #3
    Candidat au Club
    Femme Profil pro
    Lycéen
    Inscrit en
    Avril 2022
    Messages
    6
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Orne (Basse Normandie)

    Informations professionnelles :
    Activité : Lycéen
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Avril 2022
    Messages : 6
    Points : 3
    Points
    3
    Par défaut
    Merci pour cette réponse, je vais voir si c'était le seul problème.

  4. #4
    Candidat au Club
    Femme Profil pro
    Lycéen
    Inscrit en
    Avril 2022
    Messages
    6
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Orne (Basse Normandie)

    Informations professionnelles :
    Activité : Lycéen
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Avril 2022
    Messages : 6
    Points : 3
    Points
    3
    Par défaut
    Rebonjour,
    Malgré les modifications, lorsque j'appuie sur Valider (qui est dans le fichier HTML), rien ne se passe.
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
     
    var user = [];			"""La variable user est celle qui contiendra la liste de chaîne de caractère du mot entrer par le joueur."""
    var issue = Arrays.asList();	"""Cette variable est une liste de chaîne de caractère qui contient la réponse."""
    var won = 0, lost = 0;			"""La variable points comptabilise les points au fur et à mesure en commençant à 0."""
    var chaine_mot_joueur = [];	"""Cette variable va séparer chaque lettre les unes des autres de la réponse du joueur et les ajouter à mot_joueur."""
     
    function reponse()
    """Cette fonction sert à définir quel mot est la réponse à quelles images, par exemple, pour les images 1, la réponse est magie. La chaîne de caractère est déjà mise sous forme de liste, avec chaque élément du mot, afin de diminuer les tâches."""
    {
    	if (document.getElementById(d1).innerHTML == 1)
    		issue = Arrays.asList("m","a","g","i","e")		"""Le premier mot, le 1, est la réponses aux quatre premières images."""
    	else if (document.getElementById(d2).innerHTML == 2)		
    		issue = Arrays.asList("t","e","r","r","e")		"""Le deuxième mot, le 2, est la réponses aux quatre images suivantes."""
    	else if (document.getElementById(d3).innerHTML == 3)		
    		issue = Arrays.asList("p","a","s","t","e","l")		"""Le troisième mot, le 3, est la réponses aux quatre images suivantes."""
    	else if (document.getElementById(d4).innerHTML == 4)
    		issue = Arrays.asList("c","h","a","n","t","e","r")	"""Le quatrième mot, le 4, est la réponses aux quatre images suivantes."""
    }
     
    function mot_joueur_liste(user)
    {
    	List <String> mot_joueur = new ArrayList <String> ();     
    	for(int i = 0 ; i < user ; i++) {
    		mot_joueur.add(chaine_mot_joueur);		"""Ce début de programme est là pour convertir la réponse du joueur en liste de chaîne de caractère, les lettres seront ajoutés les unes après les autres dans la nouvelle variable appelée : mot_joueur."""
    }
     
     
    function verif_mot()
    """Cette fonction va servir à vérifier le mot. C'est-à-dire que lorsque l'utilisateur va rentrer sa réponse, la fonction vérifiera pour quelles images il a rentrer sa réponse, et si sa réponse est la bonne. En fonction de la réponse, le joueur perd 1 point ou le gagne."""
    	if reponse() == 1 
    		mot_joueur_liste(user)=document.getElementById(mot1).innerHTML
    		for(int i = 0 ; i<issue ; i++){
    			if issue[i]==mot_joueur[i]
    			{
    				alert("Gagné !");
    				points+=1;
    				calcScore(form);
    			}						"""Cette deuxième partie consiste à utiliser la liste mot_joueur et à la comparer à la liste issue pour voir si les lettres sont les mêmes et si elles sont situés à la même place."""
    		}
    	else if reponse() == 2
    		mot_joueur_liste(user)=document.getElementById(mot2).innerHTML
    		for(int i = 0 ; i<issue ; i++){
    			if issue[i]==mot_joueur[i]
    			{
    				alert("Gagné !");
    				points+=1;
    				calcScore(form);
    			}						
    		}							"""idem"""
    	else if reponse() == 3
    		mot_joueur_liste(user)=document.getElementById(mot3).innerHTML
    		for(int i = 0 ; i<issue ; i++){
    			if issue[i]==mot_joueur[i]
    			{
    				alert("Gagné !");
    				points+=1;
    				calcScore(form);
    			}						
    		}							"""idem"""
    	else if reponse() == 4
    		mot_joueur_liste(user)=document.getElementById(mot4).innerHTML
    		for(int i = 0 ; i<issue ; i++){
    			if issue[i]==mot_joueur[i]
    			{
    				alert("Gagné !");
    				points+=1;
    				calcScore(form);
    			}
    		}							"""idem"""
    	else
    			{
    				alert("Perdu !");
    				points-=1;
    				calcScore(form);
    			}
    }									"""Cette dernière partie va ajouter un point à lost lorsque les lettres sont différentes."""
     
    function calculerScore(form)
    """Cette fonction est utilisé pour comptabiliser les points"""
    {
    		document.getElementById("score").innerHTML = "Gagné: " + won + " fois. Perdu: " + lost + " fois."
    }

  5. #5
    Expert confirmé
    Avatar de Doksuri
    Profil pro
    Développeur Web
    Inscrit en
    Juin 2006
    Messages
    2 447
    Détails du profil
    Informations personnelles :
    Âge : 54
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Juin 2006
    Messages : 2 447
    Points : 4 587
    Points
    4 587
    Par défaut
    """blabla""" n'est pas un commentaire JS
    => //blabla <=

    ps : quels sont les messages d'erreur dans la console ?
    La forme des pyramides prouve que l'Homme a toujours tendance a en faire de moins en moins.

    Venez discuter sur le Chat de Développez !

  6. #6
    Candidat au Club
    Femme Profil pro
    Lycéen
    Inscrit en
    Avril 2022
    Messages
    6
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Orne (Basse Normandie)

    Informations professionnelles :
    Activité : Lycéen
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Avril 2022
    Messages : 6
    Points : 3
    Points
    3
    Par défaut
    Uncaught SyntaxError: unexpected token: string literal
    Celui de au - dessus s'affiche directement.
    Uncaught ReferenceError: verif_mot is not defined
    Celui-ci s'affiche lorsque j'appuie sur Valider.

    Désolé, les """blablabla""" étaient pour me repérer, je les ai enlevé.

  7. #7
    Membre régulier
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Octobre 2018
    Messages
    88
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Loire (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Octobre 2018
    Messages : 88
    Points : 72
    Points
    72
    Par défaut
    Plusieurs choses qui ne vont pas juste à première vue.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <link rel="stylesheet" type="text/javascript" href="qium.js" />
    Ça dans le Header, un stylesheet avec un type javascript et un lien vers un .js. Tu devrais supprimer.

    Ensuite, place ton lien script comme ceci :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
       <script type="text/javascript" src="qium.js"></script>
        </body>
    </html>
    Dans ton fichier qium.js à 3 endroits il y a des faux commentaires. tu peux faire des commentaires soit ou En ce qui concerne ceci :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    <script type="text/javascript">
                                document.getElementById('mot1').onclick =
                                    doFunction;
                            </script>
    doFunction ?

    Pourquoi ne pas créer un "addEventListener" dans ton fichier javascript quand tu cliques sur mot1 ?
    Si tu ne connais pas encore addEventLister, voici la doc : https://developer.mozilla.org/fr/doc...dEventListener


    Courage !!

  8. #8
    Candidat au Club
    Femme Profil pro
    Lycéen
    Inscrit en
    Avril 2022
    Messages
    6
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Orne (Basse Normandie)

    Informations professionnelles :
    Activité : Lycéen
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Avril 2022
    Messages : 6
    Points : 3
    Points
    3
    Par défaut
    Merci beaucoup pour cette réponse.
    J'essaie avec addEventListener().
    Bonne journée à vous tous

  9. #9
    Candidat au Club
    Femme Profil pro
    Lycéen
    Inscrit en
    Avril 2022
    Messages
    6
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Orne (Basse Normandie)

    Informations professionnelles :
    Activité : Lycéen
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Avril 2022
    Messages : 6
    Points : 3
    Points
    3
    Par défaut
    A la suite de beaucoup de modifications, j'ai simplifié le code, genre beaucoup. Merci à tous pour l'aide apporter.
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    <!DOCTYPE html>	
    <html lang="fr-fr">
    	<head>
    		<meta charset="utf-8" />
    		<link rel="stylesheet" type="text/css" href="qium.css" />		
    		<link rel="stylesheet" type="text/javascript" href="qium.js" />	
    		<title>4 images, 1 mot</title>
    		<meta name="description" content="4 images, 1 mot" />
     
    	</head>
    	<body>
    		<form>
    		<script type="text/javascript" src="qium.js"></script>
    		<div>
    			<center>
    			<img alt="image" src="magie1.jpg" width="250" height="150">
    			<img alt="image" src="magie2.jpg" width="250" height="150"><br>
    			<img alt="image" src="magie3.jpg" width="250" height="150">
    			<img alt="image" src="magie4.jpg" width="250" height="150">
    			<form action="" method="get" class="note">
    			<div class="note">
    				<label for="note">Entrez le mot : </label>
    				<input type="text" name="note" id="mot1"/> 
    				<input type="button" value="Valider" onclick="verif_mot1()"/>
    				<INPUT TYPE="reset" VALUE="Recommencer">
    			</div>
                </form>
    			</center>
    			</div>
    		<br>
    		<div id="d2">
    			<center>
    			<img alt="image" src="terre1.jpg" width="250" height="150">
    			<img alt="image" src="terre2.jpg" width="250" height="150"><br>
    			<img alt="image" src="terre3.jpg" width="250" height="150">
    			<img alt="image" src="terre4.jpg" width="250" height="150">
    			<form action="" method="get" class="note">
    			<div class="note">
    				<label for="note">Entrez le mot : </label>
    				<input type="text" name="note" id="mot2"/> 
    				<input type="button" value="Valider" onclick="verif_mot2()"/>
    				<INPUT TYPE="reset" VALUE="Recommencer">
    			</div>
                </form>
    			</center>
    		</div>
    		<br>
    		<div>
    			<center>
    			<img alt="image" src="pastel1.jpg" width="250" height="150">
    			<img alt="image" src="pastel2.jpg" width="250" height="150"><br>
    			<img alt="image" src="pastel3.jpg" width="250" height="150">
    			<img alt="image" src="pastel4.jpg" width="250" height="150">
    			<form action="" method="get" class="note">
    			<div class="note">
    				<label for="note">Entrez le mot : </label>
    				<input type="text" name="note" id="mot3"/> 
    				<input type="button" value="Valider" onclick="verif_mot3()"/>
    				<INPUT TYPE="reset" VALUE="Recommencer">
    			</div>
                </form>
    			</center>
    		</div>
    		<br>
    		<div>
    			<center>
    			<img alt="image" src="chanter1.jpg" width="250" height="150">
    			<img alt="image" src="chanter2.jpg" width="250" height="150"><br>
    			<img alt="image" src="chanter3.jpg" width="250" height="150">
    			<img alt="image" src="chanter4.jpg" width="250" height="150">
    			<form action="" method="get" class="note">
    			<div class="note">
    				<label for="note">Entrez le mot : </label>
    				<input type="text" name="note" id="mot4"/> 
    				<input type="button" value="Valider" onclick="verif_mot4()"/>
    				<INPUT TYPE="reset" VALUE="Recommencer">
    			</div>
                </form>
    			</center>
    		</div>
    		<br>
    		<div>
    			<center>
    			<img alt="image" src="dormir1.jpg" width="250" height="150">
    			<img alt="image" src="dormir2.jpg" width="250" height="150"><br>
    			<img alt="image" src="dormir3.jpg" width="250" height="150">
    			<img alt="image" src="dormir4.jpg" width="250" height="150">
    			<form action="" method="get" class="note">
    			<div class="note">
    				<label for="note">Entrez le mot : </label>
    				<input type="text" name="note" id="mot5"/> 
    				<input type="button" value="Valider" onclick="verif_mot5()"/>
    				<INPUT TYPE="reset" VALUE="Recommencer">
    			</div>
                </form>
    			</center>
    		</div>
    		<br>
    		<div>
    			<center>
    			<img alt="image" src="penser1.jpg" width="250" height="150">
    			<img alt="image" src="penser2.jpg" width="250" height="150"><br>
    			<img alt="image" src="penser3.jpg" width="250" height="150">
    			<img alt="image" src="penser4.jpg" width="250" height="150">
    			<form action="" method="get" class="note">
    			<div class="note">
    				<label for="note">Entrez le mot : </label>
    				<input type="text" name="note" id="mot6"/> 
    				<input type="button" value="Valider" onclick="verif_mot6()"/>
    				<INPUT TYPE="reset" VALUE="Recommencer">
    			</div>
                </form>
    			</center>
    		</div>
    		<br>
    		<div>
    			<center>
    			<img alt="image" src="pont1.jpg" width="250" height="150">
    			<img alt="image" src="pont2.jpg" width="250" height="150"><br>
    			<img alt="image" src="pont3.jpg" width="250" height="150">
    			<img alt="image" src="pont4.jpg" width="250" height="150">
    			<form action="" method="get" class="note">
    			<div class="note">
    				<label for="note">Entrez le mot : </label>
    				<input type="text" name="note" id="mot7"/> 
    				<input type="button" value="Valider" onclick="verif_mot7()"/>
    				<INPUT TYPE="reset" VALUE="Recommencer">
    			</div>
                </form>
    			</center>
    		</div>
    		<div>
    			<center>
    			<img alt="image" src="etudier1.jpg" width="250" height="150">
    			<img alt="image" src="etudier2.jpg" width="250" height="150"><br>
    			<img alt="image" src="etudier3.jpg" width="250" height="150">
    			<img alt="image" src="etudier4.jpg" width="250" height="150">
    			<form action="" method="get" class="note">
    			<div class="note">
    				<label for="note">Entrez le mot : </label>
    				<input type="text" name="note" id="mot8"/> 
    				<input type="button" value="Valider" onclick="verif_mot8()"/>
    				<INPUT TYPE="reset" VALUE="Recommencer">
    			</div>
                </form>
    			</center>
    		</div>
    		<br>
    		<div id="d4">
    			<center>
    			<img alt="image" src="rouge1.jpg" width="250" height="150">
    			<img alt="image" src="rouge2.jpg" width="250" height="150"><br>
    			<img alt="image" src="rouge3.jpg" width="250" height="150">
    			<img alt="image" src="rouge4.jpg" width="250" height="150">
    			<form action="" method="get" class="note">
    			<div class="note">
    				<label for="note">Entrez le mot : </label>
    				<input type="text" name="note" id="mot9"/> 
    				<input type="button" value="Valider" onclick="verif_mot9()"/>
    				<INPUT TYPE="reset" VALUE="Recommencer">
    			</div>
                </form>
    			</center>
    		</div>
    		<br>
    		<div id="d4">
    			<center>
    			<img alt="image" src="chien1.jpg" width="250" height="150">
    			<img alt="image" src="chien2.jpg" width="250" height="150"><br>
    			<img alt="image" src="chien3.jpg" width="250" height="150">
    			<img alt="image" src="chien4.jpg" width="250" height="150">
    			<form action="" method="get" class="note">
    			<div class="note">
    				<label for="note">Entrez le mot : </label>
    				<input type="text" name="note" id="mot10"/> 
    				<input type="button" value="Valider" onclick="verif_mot10()"/>
    				<INPUT TYPE="reset" VALUE="Recommencer">
    			</div>
                </form>
    			</center>
    		</div>
    		<br>
    			<div id="score" style="font-weight: bold; text-align: center">
    			Gagné: 0 fois. Perdu: 0 fois.
    			</div>
    			</form>
    	</body>
    </html>

    Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    html {
    	color: black;
    	background-color: #33afff;
    	background-image: none;
    	background-repeat: repeat;
    	background-attachment: scroll;
    	background-position: 0% 0%;
    	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    	font-size: small;
    }
     
    h1 {
    	color:#046df8;
    }
     
    div{
    	color:black;
    }
     
    table {
    	background-color: #ffffff;
    	border-color: #046df8;
    	border-style: solid;
    	border-width: 2px;
    	margin-left: auto;
    	margin-right: auto;
    	text-align: center;
    }
     
    table td {
    	border-style: double;
    	border-width: 1px;
    	text-align: center;
    }

    Code JavaScript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    var user = [];
    var issue = [];
    var won = 0, lost = 0; 
     
    function verif_mot1(){
    	if ("magie" == document.getElementById("mot1").value){
    			alert("Gagné !");
    			won+=1;
    			calcScore(won,lost);
    		}
    	else{
    			alert("Perdu !");
    			lost+=1;
    			calcScore(won,lost);
    		}
    }
     
    function verif_mot2(){
    	if ("terre" == document.getElementById("mot2").value){
    			alert("Gagné !");
    			won+=1;
    			calcScore(won,lost);
    		}
    	else{
    			alert("Perdu !");
    			lost+=1;
    			calcScore(won,lost);
    		}
    }
     
    function verif_mot3(){
    	if ("pastel" == document.getElementById("mot3").value){
    			alert("Gagné !");
    			won+=1;
    			calcScore(won,lost);
    		}
    	else{
    			alert("Perdu !");
    			lost+=1;
    			calcScore(won,lost);
    		}
    }
     
    function verif_mot4(){
    	if ("chanter" == document.getElementById("mot4").value){
    			alert("Gagné !");
    			won+=1;
    			calcScore(won,lost);
    		}
    	else{
    			alert("Perdu !");
    			lost+=1;
    			calcScore(won,lost);
    		}
    }
     
    function verif_mot5(){
    	if ("dormir" == document.getElementById("mot5").value){
    			alert("Gagné !");
    			won+=1;
    			calcScore(won,lost);
    		}
    	else{
    			alert("Perdu !");
    			lost+=1;
    			calcScore(won,lost);
    		}
    }
     
    function verif_mot6(){
    	if ("penser" == document.getElementById("mot6").value){
    			alert("Gagné !");
    			won+=1;
    			calcScore(won,lost);
    		}
    	else{
    			alert("Perdu !");
    			lost+=1;
    			calcScore(won,lost);
    		}
    }
     
    function verif_mot7(){
    	if ("pont" == document.getElementById("mot7").value){
    			alert("Gagné !");
    			won+=1;
    			calcScore(won,lost);
    		}
    	else{
    			alert("Perdu !");
    			lost+=1;
    			calcScore(won,lost);
    		}
    }
     
    function verif_mot8(){
    	if ("etudier" == document.getElementById("mot8").value){
    			alert("Gagné !");
    			won+=1;
    			calcScore(won,lost);
    		}
    	else{
    			alert("Perdu !");
    			lost+=1;
    			calcScore(won,lost);
    		}
    }
     
    function verif_mot9(){
    	if ("rouge" == document.getElementById("mot9").value){
    			alert("Gagné !");
    			won+=1;
    			calcScore(won,lost);
    		}
    	else{
    			alert("Perdu !");
    			lost+=1;
    			calcScore(won,lost);
    		}
    }
     
    function verif_mot10(){
    	if ("chien" == document.getElementById("mot10").value){
    			alert("Gagné !");
    			won+=1;
    			calcScore(won,lost);
    		}
    	else{
    			alert("Perdu !");
    			lost+=1;
    			calcScore(won,lost);
    		}
    }
     
    function calcScore(won,lost)
    {
    		document.getElementById("score").innerHTML = "Gagné: " + won + " fois. Perdu: " + lost + " fois."
    }

  10. #10
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 933
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 933
    Points : 44 084
    Points
    44 084
    Par défaut
    Bonjour,
    j'ai simplifié le code, genre beaucoup.
    il te reste à factoriser tout cela en utilisant le passage d'arguments à une fonction car toutes tes fonctions verif_motx() se ressemblent très fortement, seuls deux paramètres changent dans celles-ci :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    if ("magie" == document.getElementById("mot1").value){
    // ...
    if ("terre" == document.getElementById("mot2").value){
    // ...
    if ("pastel" == document.getElementById("mot3").value){
    // ...

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [Android] [Jeu] 4 Images : Devinez le Mot
    Par symbiosoft dans le forum Mon application mobile
    Réponses: 0
    Dernier message: 23/07/2014, 16h40
  2. [Android] [Jeu][Gratuit] 4 Images 1 Mot
    Par symbiosoft dans le forum Mon application mobile
    Réponses: 0
    Dernier message: 27/10/2013, 08h06
  3. [MySQL] Réaliser une base de donnée d'images et mots clés
    Par rintrah dans le forum PHP & Base de données
    Réponses: 4
    Dernier message: 18/03/2009, 12h03
  4. Recherche d'image par mots-clés
    Par koKoTis dans le forum Langage
    Réponses: 7
    Dernier message: 11/10/2008, 14h36
  5. Comment préparer un jeu d'images pour des traitements
    Par Miss Ti dans le forum Traitement d'images
    Réponses: 5
    Dernier message: 09/05/2008, 17h45

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo