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 de plus ou moins avec images


Sujet :

JavaScript

  1. #1
    Candidat au Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Août 2012
    Messages
    13
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Seine Maritime (Haute Normandie)

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

    Informations forums :
    Inscription : Août 2012
    Messages : 13
    Points : 3
    Points
    3
    Par défaut Jeu de plus ou moins avec images
    Bonjour, je travail actuellement sur la création d'un jeu de plus ou moins contenant des images et de l'audio en utilisant javascript.

    Dans un premier temps tous mes items fonctionnent, l'affichage des valeurs à cliquer, le images plus, moins et gagné s'affichent, les sons s'exécutent, le nombre à trouver est généré...

    Malheureusement, lorsque je clique sur un élément qui va permettre la comparaison, la comparaison s'effectue bien, mais il m'est impossible de relancer le processus de comparaison jusqu'à trouver, le clic sur les éléments ne fonctionne plus et l'affichage qui normalement était centré se retrouve déplacé sur la gauche.

    Bref je suis un peu perdu, la personne pour qui je travaille n'a aucune connaissance dans ce domaine, je m'en remet donc à vous.

    Enfin bon, comme un code source vaut mieux que mille discours je vous laisse ici l'intégralité de celui-ci.

    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
    	//Variables Globales
    	nbChiffres = 21; //sert à l'afffichage des images chiffres
    	nombre = Math.floor(Math.random() * nbChiffres)+1; //Appel d'un numéro au hasard qui servira au jeu
    	emplacement_img = "nombres"; //Nom du dossier contenant les images
    	nbRecup = 8; //valeur a comparer avec le numéro mystère
     
     
    	//Audio
    	var sonGagne = document.createElement('audio');
    	sonGagne.setAttribute('src', 'gagne.ogg');
    	var sonMoins = document.createElement('audio');
    	sonMoins.setAttribute('src', 'moins.ogg');
    	var sonPlus = document.createElement('audio');
    	sonPlus.setAttribute('src', 'plus.ogg');
     
     
    	//Fonctions
     
    	function start() //Fonction comparant la valeur reçue à celle attendu
    	{
    		if (nbRecup > nombre)
    		{
    			//affiche une image représentant le symbole -
    			document.write('<tr><td><img src ="'+emplacement_img+'/moins.gif" width="300" height="300" border="0"></td></tr>');
    			sonMoins.load;
    			sonMoins.play();
    			afficheChiffres();
    		}
    		else if(nbRecup < nombre)
    		{
    			//affiche une image représentant le symbole +
    			document.write('<tr><td><img src ="'+emplacement_img+'/plus.gif" width="300" height="300" border="0" ></td></tr>');
    			sonPlus.load;
    			sonPlus.play();
    			afficheChiffres();
    		}
    		else if(nbRecup == nombre)
    		{
    			document.write('<tr>');//création de cellule de tableau contenant l'image
    			document.write('<td><img src="'+emplacement_img+'/gagne.gif" width="300" height="300" border="1"></td>'); //affichage des images de chaque cartes
    			document.write('</tr>');//fermeture de cellule
    			document.write('</br>Bravo bonne réponse !');
    			sonGagne.load;
    			sonGagne.play();
    			afficheChiffres();
    		}
    	}
     
    	function afficheChiffres()// Boucle d'affichage des nombres en image
    	{
    		k=0;
    		document.write('<table><tr>');//création du tableau
     
     
    		for(i=1; i<nbChiffres; i++)
    		{	
    			document.write('<td><img name = "'+i+'" src="'+emplacement_img+'/'+i+'.gif" width="65" height="65" border="1" onclick="quelclic(this)"></td>'); //affichage des images de chaque cartes	
    			k++;
    			if(k == 8)
    			{
    				document.write('</tr><tr>');
    				k=0;
    			}
    		}
    		document.write('</table>');//fin création du tableau
     
    	}
     
    	function quelclic(elementclicked) //fonction de récupération du chiffre cliqué qui va permettre la comparaison
    	{
    		nbRecup = elementclicked.name;
    		start();
    	}
    D'avance merci pour vos réponses.

    PS : je suis relativement débutant dans ce langage, j'espère que vous ne serez pas trop choqués par mes pratiques ^^.

  2. #2
    Membre actif
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juillet 2009
    Messages
    132
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Opérateur de télécommunications

    Informations forums :
    Inscription : Juillet 2009
    Messages : 132
    Points : 283
    Points
    283
    Par défaut
    Bonjour,

    Tu es sûr que tout ton code source est là ? Tu n'as pas de fichier HTML ?

    - N'utilise pas d'attribut name pour les balises img mais plutôt un id ou un data-attribute (HTML5).

    - Évite l'usage de document.write : ça peut avoir un comportement bizarre (genre remplacement complet du HTML) et c'est une mauvaise pratique de mettre du HTML dans le javascript. Le code HTML est dans le fichier HTML, en Javascript tu manipules le DOM, la structure de la page.

    - Je n'ai pas bien compris ta boucle while???

  3. #3
    Candidat au Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Août 2012
    Messages
    13
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Seine Maritime (Haute Normandie)

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

    Informations forums :
    Inscription : Août 2012
    Messages : 13
    Points : 3
    Points
    3
    Par défaut
    En effet, je n'ai cité que mon code javascript, le javascript étant contenu dans un html, avec les fonctions stockées dans le header et l'appel de la fonction start se situe dans le body.

    Le but de ma boucle while était de faire des tests, mais je n'ai pas vraiment réfléchis, je l'ai supprimée d'ailleurs, n'en tiens plus compte stp (d'ailleurs je vais mettre à jour le code posté).

    Du coup tu me conseilles quoi si je ne fais pas un .write ?

    PS : du coup j'ai remplacé les name par des id pour le moment, je suppose que je vais devoir m'orienter vers du getElementsById ?

  4. #4
    Rédacteur/Modérateur

    Avatar de SylvainPV
    Profil pro
    Inscrit en
    Novembre 2012
    Messages
    3 375
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2012
    Messages : 3 375
    Points : 9 944
    Points
    9 944
    Par défaut
    Bonjour,

    Il est peu encourageant de répondre à ce genre de demandes, "voici tout mon code, merci de trouver le bug". Tu auras plus de réponses et plus rapidement si tu parviens à isoler le problème à une portion de code plus réduite. Aussi tu ne l'as pas précisé donc j'ignore si tu as le réflexe, as-tu pensé à checker la console Javascript après ton bug ?

  5. #5
    Candidat au Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Août 2012
    Messages
    13
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Seine Maritime (Haute Normandie)

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

    Informations forums :
    Inscription : Août 2012
    Messages : 13
    Points : 3
    Points
    3
    Par défaut
    Désolé si ma démarche est maladroite.

    En fait je vais t'expliquer mon code,

    j'ai la fonction qui contient les comparaisons entre la valeur récupérée a partir de la fonction (qui elle récupère le nom l'identifiant de l'image qui a été cliquée) et la valeur aléatoire produite par la variable nombre.

    A partir de là selon les conditions remplies, une image et un son sont retournés.

    La fonction quant à elle récupère une suite d'images correspondant à la valeur maximale du nombre aléatoire à piocher pour ensuite les afficher, celles-ci sont ensuite rendues cliquables grâce à leur nom.


    Je viens de tester avec la console javascript (firebug) et en effet, une fois une image cliquée (il se produit en partie ce que je souhaite, c'est à dire que le son se lance et l'image plus, moins ou encore gagné s'affiche, mais les chiffres ne sont pas re cliquables), la console qui au départ affichait le code javascript, affiche par la suite un vide et me dit

    "Pas de JavaScript sur cette page

    If <script> tags have a "type" attribute, it should equal "text/javascript" or "application/javascript". Also scripts must be parsable (syntactically correct)."

  6. #6
    Rédacteur/Modérateur

    Avatar de SylvainPV
    Profil pro
    Inscrit en
    Novembre 2012
    Messages
    3 375
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2012
    Messages : 3 375
    Points : 9 944
    Points
    9 944
    Par défaut
    Non, ce n'est pas ça la console Javascript. Là c'est la vue Scripts de Firebug.

  7. #7
    Expert éminent sénior
    Avatar de Auteur
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    7 651
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 651
    Points : 11 145
    Points
    11 145
    Par défaut
    bonsoir,

    Citation Envoyé par JérémieL Voir le message
    - Évite l'usage de document.write : ça peut avoir un comportement bizarre (genre remplacement complet du HTML).
    le comportement de document.write n'a rien d'aléatoire, il remplace le code de la page HTML. Supprimer cette méthode du code JS posté résoudra une bonne partie du problème.

  8. #8
    Candidat au Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Août 2012
    Messages
    13
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Seine Maritime (Haute Normandie)

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

    Informations forums :
    Inscription : Août 2012
    Messages : 13
    Points : 3
    Points
    3
    Par défaut
    Trés bien, merci pour toutes ces infos, du coup vous me conseilleriez d'utiliser quelle méthode pour afficher les images ?

    est ce que document.images ferait l'affaire ?

    Et de quelle manière pourrais créer mes tableaux si je n'utilise pas .write ?

  9. #9
    Membre émérite
    Avatar de Kaamo
    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    Avril 2007
    Messages
    1 165
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Ingénieur développement logiciels
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Avril 2007
    Messages : 1 165
    Points : 2 778
    Points
    2 778
    Par défaut
    A lire : Comprendre document.write() en JavaScript

    Alternatives :
    Manipulation du DOM
    Templating Javascript : Par exemple avec Mustache (mais il existe d'autres solutions)

  10. #10
    Candidat au Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Août 2012
    Messages
    13
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Seine Maritime (Haute Normandie)

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

    Informations forums :
    Inscription : Août 2012
    Messages : 13
    Points : 3
    Points
    3
    Par défaut
    Bon alors déja,

    Merci beaucoup pour vos réponses (surtout Kaamo qui m'a bien aidé à progresser )

    J'ai réussi à pas mal avancer, même si c'est pas encore ça (boucle d'affichage qui se répète et que je n'arrive pas à effacer et l'insertion d'élément dans un div qui ne fonctionne pas mais je persévère. Pour les curieux, je fournirais le code source une fois que celui ci sera entièrement fonctionnel

  11. #11
    Candidat au Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Août 2012
    Messages
    13
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Seine Maritime (Haute Normandie)

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

    Informations forums :
    Inscription : Août 2012
    Messages : 13
    Points : 3
    Points
    3
    Par défaut
    Bon, rebonjour tout le monde, j'ai pas mal avancé, il ne me reste que les boucles d'affichages à gérer, en effet mon script relance à chaque fois toute la démarche d'affichage.

    Je pense que la méthode replaceChild sur cet élément
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    document.getElementById('div1').appendChild(oImg);
    devrait faire l'affaire, mon idée est de remplacer l'ancien oImg par un nouvel oImg, ce qui en principe devrait empêcher le rappel de la fonction de laisser l'affichage de l'action précédente, quelqu'un serait il en mesure de m'aider vis à vis de ça ? Je n'arrive pas à trouver de ressource pertinente par rapport à mon problème :/

  12. #12
    Candidat au Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Août 2012
    Messages
    13
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Seine Maritime (Haute Normandie)

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

    Informations forums :
    Inscription : Août 2012
    Messages : 13
    Points : 3
    Points
    3
    Par défaut
    Yop, j'aurais besoin d'un dernier coup de main (promis c'est le dernier )

    J'ai une image que j'ai déclaré sous forme de variable "oImg"

    et j'y fait appel dans mon div "div0"

    Je souhaiterais pouvoir supprimer cette image, mais je n'y arrive pas, je suppose que je manipule mal removeChild, et les ressources que je trouve sur le net me laissent perplexes car me semblent similaires à ma démarche, quelqu'un serait il en mesure de me signifier la bonne syntaxe vis à vis de ce contexte ?

  13. #13
    Modérateur

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

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 126
    Points : 44 914
    Points
    44 914
    Par défaut
    Bonjour,
    je suppose que je manipule mal removeChild,
    on ne saurait dire attendu que tu ne montre pas ton code

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    oImg.parentNode.removeChild(oImg);

  14. #14
    Candidat au Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Août 2012
    Messages
    13
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Seine Maritime (Haute Normandie)

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

    Informations forums :
    Inscription : Août 2012
    Messages : 13
    Points : 3
    Points
    3
    Par défaut
    Ah ok ^^'

    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
    if (nbRecup > nombre) //conséquence nombre récupéré supérieur à valeur à trouver
    	{
     
    			var oImgLess = document.createElement("img");
    			oImgLess.src = "nombres/moins.gif";
    			oImgLess.setAttribute('height', '300px');
    			oImgLess.setAttribute('width', '300px');
    			document.getElementById('div0').appendChild(oImgLess);
    			sonMoins.load;
    			sonMoins.play();
    	}
    else if(nbRecup < nombre) //conséquence nombre récupéré inférieur à valeur à trouver
    	{
    			var oImgPlus = document.createElement("img");
    			oImgPlus.src = "nombres/plus.gif";
    			oImgPlus.setAttribute('height', '300px');
    			oImgPlus.setAttribute('width', '300px');
     
    			//affiche une image représentant le symbole +
    			sonPlus.load;
    			sonPlus.play();
    			document.getElementById('div0').appendChild(oImgPlus);
    	}
     
    else if(nbRecup == nombre) //conséquence nombre récupéré égal à valeur à trouver
    	{
     
    		if (iWin == 0)
    		{
    			var oImgWin = document.createElement("img");
    			oImgWin.src = "nombres/gagne.gif";
    			oImgWin.setAttribute('height', '300px');
    			oImgWin.setAttribute('width', '300px');
     
    			sonGagne.load;
    			sonGagne.play();
    			oImgPlus.parentNode.removeChild(oImgPlus);
    			oImgLess.parentNode.removeChild(oImgLess);
    			document.getElementById('div0').appendChild(oImgWin);
    			}
    Ce que je souhaiterais faire serait donc que lorsque la condition > est remplie, l'image correspondant à la condition < soit effacée de la page, et vice versa :3

    là, avec le code que l'on m'a fourni, les deux images apparues avant ne disparaissent pas mais par contre oImgWin n'apparait pas.

  15. #15
    Membre actif
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juillet 2009
    Messages
    132
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Opérateur de télécommunications

    Informations forums :
    Inscription : Juillet 2009
    Messages : 132
    Points : 283
    Points
    283
    Par défaut
    Citation Envoyé par Auteur Voir le message
    bonsoir,

    le comportement de document.write n'a rien d'aléatoire, il remplace le code de la page HTML. Supprimer cette méthode du code JS posté résoudra une bonne partie du problème.
    Je me suis mal exprimé. Le comportement n'est pas aléatoire, il est bien connu. Mais il est inconstant, selon que l'on appelle la méthode avant (dans ce cas-là, le code HTML n'est pas remplacé) ou après la fin du chargement d'une page.

  16. #16
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Points : 91 220
    Points
    91 220
    Billets dans le blog
    20
    Par défaut
    Plus exactement, selon que le document est ouvert ou fermé.

  17. #17
    Candidat au Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Août 2012
    Messages
    13
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Seine Maritime (Haute Normandie)

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

    Informations forums :
    Inscription : Août 2012
    Messages : 13
    Points : 3
    Points
    3
    Par défaut
    En effet, j'ai bien compris tout ça, c'est d'ailleurs pour cette raison que je n'utilise plus cette méthode ^^

    Là je manipule uniquement mon document avec le DOM, mais je n'arrive toujours pas à faire effacer l'image précédente lorsqu'une nouvelle apparaît, c'est asez rageant d'ailleurs car une fois que je saurais faire ça, cela m'ouvrirait pas mal de porte vers des travaux futurs en plus d'en finir avec ce mini jeu.

  18. #18
    Candidat au Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Août 2012
    Messages
    13
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Seine Maritime (Haute Normandie)

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

    Informations forums :
    Inscription : Août 2012
    Messages : 13
    Points : 3
    Points
    3
    Par défaut
    Je n'arrive toujours pas à utiliser removeChild, je ne comprend pas son comportement...

    pour les curieux qui souhaiteraient avoir le code source, le voici

    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
    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
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="fr">
    <head>
    <title>Test DOM</title>
     
    <script type="text/javascript">
     
     
     
    //Variables Globales
    var nbChiffres = 21;
    var nbRecup;
    nombre = Math.floor(Math.random() * nbChiffres); //Appel d'un numéro au hasard qui servira au jeu
    var k = 0; //permet de stopper le réaffichage des nombres 
    var j = 0; // compteur d'apparition d'images permettant un retour ligne
    var iL = 0;
    var iP = 0;
    var iWin = 0;
    //TESTS DOM
    /////////////////////////////////
    var oBR = document.createElement("br");
    var oBR2 = document.createElement("br");
    var oBR3 = document.createElement("br");
    var oBR4 = document.createElement("br");
    var oBR5 = document.createElement("br");
    var oBR6 = document.createElement("br");
    /////////////////////////////////
     
    //Audio
    var sonGagne = document.createElement('audio');
    sonGagne.setAttribute('src', 'gagne.ogg');
    var sonMoins = document.createElement('audio');
    sonMoins.setAttribute('src', 'moins.ogg');
    var sonPlus = document.createElement('audio');
    sonPlus.setAttribute('src', 'plus.ogg');
     
     
    function creaTable()
    {	
    	if (k < 1)
    	{
    		var oImgBase = document.createElement("img");
    		oImgBase.src = "nombres/transp.gif";
    		oImgBase.setAttribute('height', '300px');
    		oImgBase.setAttribute('width', '300px');
    		document.getElementById('div1').appendChild(oImgBase);
    		document.getElementById('div1').appendChild(oBR6);
     
    		for (i = 1; i < nbChiffres; i++)	
    		{
     
    			var oImg = document.createElement("img"); //création d'une image
     
    				oImg.src = "nombres/"+i+".gif"; //déclaration src
    				oImg.setAttribute ("id", ""+i+""); //déclaration d'un id pour chaque image, important pour récupérer valeur via click et effectuer comparaison
    				oImg.setAttribute('height', '65px');
    				oImg.setAttribute('width', '65px');
    				oImg.setAttribute("onClick", "quelclic(this)");
     
     
    				//document.body.appendChild(oImg);	
    				document.getElementById('div1').appendChild(oImg);
    				j++;
    			if (j == 10)
    			{
    				document.getElementById('div1').appendChild(oBR);
    			}
     
    			else if (j == 20)
    			{
    				document.getElementById('div1').appendChild(oBR2);
    			}
     
    			else if (j == 30)
    			{
    				document.getElementById('div1').appendChild(oBR3);
    			}
     
    			else if (j == 40)
    			{
    				document.getElementById('div1').appendChild(oBR4);
    			}
     
    			else if (j == 50)
    			{
    				document.getElementById('div1').appendChild(oBR5);
    			}
    			k++;
    		}
    	}
    }
     
    function quelclic(elementclicked) //fonction de récupération d'iedentifiant d'image
    	{
    		nbRecup = elementclicked.id;
    		start();
    	}
     
    function start() //Fonction comparant la valeur reçue à celle attendu
    {
    	if (nbRecup > nombre) ////conséquence nombre récupéré supérieur à valeur à trouver
    	{
    		if (iL == 0)
    		{
    			var oImgLess = document.createElement("img");
    			oImgLess.src = "nombres/moins.gif";
    			oImgLess.setAttribute('height', '300px');
    			oImgLess.setAttribute('width', '300px');
    			document.getElementById('div0').appendChild(oImgLess);
    			sonMoins.load;
    			sonMoins.play();
    			iL++;
    			iP = 0;
    		}
    		//affiche une image représentant le symbole -
     
    		else if (iL == 1)
    		{
    			sonMoins.load;
    			sonMoins.play();
    			iP = 0;
    		}
     
    		else if (iL == 2)
    		{
    		sonMoins.pause();
    		}
     
    	}
    	else if(nbRecup < nombre) //conséquence nombre récupéré inférieur à valeur à trouver
    	{
    		if (iP == 0)
    		{
    			var oImgPlus = document.createElement("img");
    			oImgPlus.src = "nombres/plus.gif";
    			oImgPlus.setAttribute('height', '300px');
    			oImgPlus.setAttribute('width', '300px');
     
    			//affiche une image représentant le symbole +
    			sonPlus.load;
    			sonPlus.play();
    			document.getElementById('div0').appendChild(oImgPlus);
    			iP++;
    			iL = 0;
     
    		}
     
    		else if (iP == 1)
    		{
    			sonPlus.load;
    			sonPlus.play();
    			iL = 0;
    		}
    		else if (iP == 2)
    		{
    			sonPlus.pause();
    		}
    	}
     
    	else if(nbRecup == nombre) //conséquence nombre récupéré égal à valeur à trouver
    	{
     
    		if (iWin == 0)
    		{
     
    			var oImgWin = document.createElement("img");
    			oImgWin.src = "nombres/gagne.gif";
    			oImgWin.setAttribute('height', '300px');
    			oImgWin.setAttribute('width', '300px');
     
    			sonGagne.load;
    			sonGagne.play();
    			document.getElementById('div0').appendChild(oImgWin);
    			iL = 2;
    			iP = 2;
    			iWin = 1;
    		}
    		else if (iWin == 1)
    		{
    		}
    	}
     
    	creaTable();
    }
     
     
    </script>
    </head>
     
    <body>
    	<script >
    		window.onload = start;
    		document.write(nombre);
    	</script>
    <div><center id='div0'></center></div>
    <div><center id='div1'></center></div>
     
    </body>
     
    </html>

  19. #19
    Modérateur

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

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 126
    Points : 44 914
    Points
    44 914
    Par défaut
    Ton approche ne me semble pas être la bonne, à chaque clic tu recrées un élément.

    Tu as trois possibilités, PLUS, MOINS et BINGO et si j'ai bien lu les éléments sont des IMG.

    Pourquoi ne pas avoir qu'UNE image et en modifier la src suivant le résultat?
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    if (nbRecup > nombre){
      image = 'moins.gif';
    }  
    else if(nbRecup < nombre){
      image = 'plus.gif';
    }
    else{
      image= 'gagne.gif';
    }
    // ici changement de la src de l'image
    oImg.src = 'nombres/' +image;
    Voilà pour une approche plus simple.

Discussions similaires

  1. [Android] Le Bon Nombre: (Plus ou Moins Avec un mode Histoire!)
    Par DeveloST dans le forum Mon application mobile
    Réponses: 0
    Dernier message: 07/02/2015, 23h57
  2. Jeu du plus ou moins avec une fonction récursive
    Par Pimousse22 dans le forum C
    Réponses: 6
    Dernier message: 29/10/2014, 21h26
  3. Jeu du plus ou moins
    Par Tom Dar dans le forum Débuter
    Réponses: 25
    Dernier message: 01/07/2014, 22h51
  4. Jeu de plus ou moins à faire boucler
    Par stachys12 dans le forum Débuter
    Réponses: 7
    Dernier message: 28/08/2013, 21h10
  5. [PHP-JS] case avec plus et moins a coté
    Par budiste dans le forum Langage
    Réponses: 13
    Dernier message: 29/11/2005, 14h09

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