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

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Nouveau membre du 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
    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 expérimenté
    Homme Profil pro
    Webdesigner
    Inscrit en
    Juin 2014
    Messages
    458
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 65
    Localisation : France, Hautes Pyrénées (Midi Pyrénées)

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

    Informations forums :
    Inscription : Juin 2014
    Messages : 458
    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
    Nouveau membre du 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
    Par défaut
    Merci pour cette réponse, je vais voir si c'était le seul problème.

  4. #4
    Nouveau membre du 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
    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
    Membre Expert
    Avatar de Doksuri
    Profil pro
    Développeur Web
    Inscrit en
    Juin 2006
    Messages
    2 494
    Détails du profil
    Informations personnelles :
    Âge : 55
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Juin 2006
    Messages : 2 494
    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
    Nouveau membre du 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
    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 confirmé
    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
    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 !!

+ 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, 15h40
  2. [Android] [Jeu][Gratuit] 4 Images 1 Mot
    Par symbiosoft dans le forum Mon application mobile
    Réponses: 0
    Dernier message: 27/10/2013, 07h06
  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, 11h03
  4. Recherche d'image par mots-clés
    Par koKoTis dans le forum Langage
    Réponses: 7
    Dernier message: 11/10/2008, 13h36
  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, 16h45

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