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 :

Création d'un mini jeu vidéo


Sujet :

JavaScript

  1. #1
    Membre du Club
    Homme Profil pro
    Enseignant
    Inscrit en
    septembre 2018
    Messages
    166
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 45
    Localisation : France, Pyrénées Orientales (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Enseignant
    Secteur : Enseignement

    Informations forums :
    Inscription : septembre 2018
    Messages : 166
    Points : 61
    Points
    61
    Par défaut Création d'un mini jeu vidéo
    Bonjour à tous,
    j'aimerais créer un jeu vidéo (avec des anecdotes de mes collègues de boulot) un peu dans ce style.

    https://www.redbull.com/fr-fr/projec...bull-play-hard

    J'avoue que je n'ai aucune idée de comment je pourrais faire.
    Une image avec des zones de click ne me permettrait pas (j'ai l'impression) de rentrer les réponses et de compter les points en fonction des réponses.

    Si quelqu'un à une idée, cela m'intéresserait.

    Merci par avance.

  2. #2
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    juin 2003
    Messages
    9 644
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : juin 2003
    Messages : 9 644
    Points : 14 672
    Points
    14 672
    Par défaut
    tout ceci peut se faire en javascript. avec l'évènement "click" vous pouvez récupérez les coordonnées du clic et afficher ensuite une zone de texte pour saisir la réponse.
    vous pouvez essayer ce code par exemple, les coordonnées s'affichent dans la console :
    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
    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="UTF-8"/>
    	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>
    <body>
     
    <img
    	src="https://upload.wikimedia.org/wikipedia/commons/2/2e/Coral_Outcrop_Flynn_Reef.jpg"
    	id="image_fond"
    	alt=""
    />
     
    <script>
    "use strict";
     
    document
            .getElementById("image_fond")
            .addEventListener(
                      "click"
                    , e => console.log(e)
            )
    ;
     
    </script>
     
     
    </body>
     
    </html>

  3. #3
    Membre du Club
    Homme Profil pro
    Enseignant
    Inscrit en
    septembre 2018
    Messages
    166
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 45
    Localisation : France, Pyrénées Orientales (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Enseignant
    Secteur : Enseignement

    Informations forums :
    Inscription : septembre 2018
    Messages : 166
    Points : 61
    Points
    61
    Par défaut
    Je n'arrive pas à combiner le code que tu m'as donné avec une "zone cliquable".
    J'ai essayé le code suivant pour pouvoir ouvrir une nouvelle fenêtre avec une zone de texte.

    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
    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8" />
    	<title>Test</title>
    	<style>
            body {
                    font-family: Helvetica, Arial, sans-serif;
            }
            h1 {
                    font-size: 20px;
            }
            div {
                    width: 100%;
            }
            img[usemap] {
                    border: none;
                    height: auto;
                    max-width: 100%;
                    width: auto;
            }
            </style>
    </head>
    <body>
    <div>
    	<img src="Fond.png" width="1024" height="768" usemap="#testmap" alt="" />
    	<map name="testmap">
    		<area shape="rect" coords="570,195,660,275" href="large.html" target="_blank"/>
     
    </map>
    </div>
     
    </body>
    </html>

    et celui-ci dans la nouvelle fenêtre.
    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
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
      <meta content="text/html; charset=ISO-8859-1"
     http-equiv="Content-Type">
      <title>large</title>
            <SCRIPT LANGUAGE="javascript">
    function controle(form1) {
    var test = document.form1.input.value;
    alert("Vous avez tapé : " + test);
    }
    </SCRIPT>
    </head>
    <body>
    <FORM NAME="form1">
    <INPUT TYPE="text" NAME="input" VALUE=""><BR>
    <INPUT TYPE="button" NAME="bouton" VALUE="OK" onClick="controle(form1)">
    </FORM>
    </body>
    </html>

    Je me disais que la première page pourrait "écouter" ce qui est écrit dans la deuxième pour vérifier si cela correspond à une réponse exacte.

    Est ce que je pars dans une bonne direction ou alors je fais n'importe quoi?

  4. #4
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    juin 2003
    Messages
    9 644
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : juin 2003
    Messages : 9 644
    Points : 14 672
    Points
    14 672
    Par défaut
    tu n'as pas besoin d'ouvrir une nouvelle fenêtre et ça tombe bien parce que c'est à éviter.

    je pense que le plus simple est que tu mettes le formulaire dans une balise cachée et tu la fais apparaitre au moment du clic :
    https://javascript.developpez.com/fa...SS#affichObjet

  5. #5
    Membre du Club
    Homme Profil pro
    Enseignant
    Inscrit en
    septembre 2018
    Messages
    166
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 45
    Localisation : France, Pyrénées Orientales (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Enseignant
    Secteur : Enseignement

    Informations forums :
    Inscription : septembre 2018
    Messages : 166
    Points : 61
    Points
    61
    Par défaut
    Bon du coup,
    j'essaie de commencer simple en mettant une image et en cliquant dessus une boite de dialogue apparait que l'on remplit.
    En validant j'essaie 2 méthodes un affichage direct de la réponse entrée et un affichage sur la page (afin plus tard de récupérer l'info pour la valider ou non)

    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
    <!DOCTYPE html>
    <html>
       <head>
          <title>Prompt Dialog Box</title>
     
     
       </head>
       <body>
          <img src="Fond.png" onclick="testPromptDialog()">
     
           Le résultat va s'afficher ci-après: <span id="champDuPrompt"></span>
    <script type="text/javascript">
        
              function testPromptDialog()  {
     
                  var result = prompt("Entre le nom du jeu :", "");
     
                  if(result != null)  {
                      alert("Le jeu s'appelle " + result);
                  }
             }
     
        
     
    document.getElementById("champDuPrompt").innerHTML = result;
    </script>
     
       </body>
    </html>

    Sauf qu'à l'affichage sur la page initiale, le résultat ne s'affiche pas donc il ne doit pas enregistrer la réponse avec innerHTML.

    Une idée d'où vient le problème?

  6. #6
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    juin 2003
    Messages
    9 644
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : juin 2003
    Messages : 9 644
    Points : 14 672
    Points
    14 672
    Par défaut
    la variable result n'existe que dans la fonction testPromptDialog donc c'est par exemple après le "alert" que tu peux utiliser la valeur pour modifier une balise.

  7. #7
    Membre du Club
    Homme Profil pro
    Enseignant
    Inscrit en
    septembre 2018
    Messages
    166
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 45
    Localisation : France, Pyrénées Orientales (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Enseignant
    Secteur : Enseignement

    Informations forums :
    Inscription : septembre 2018
    Messages : 166
    Points : 61
    Points
    61
    Par défaut
    J'essaie de faire apparaitre à présent un compteur si la réponse est juste (ici : bleu) et d'augmenter les points de 10 pour chaque bonne réponse.

    J'ai fait la modification pour l'affichage mais dès que j'ai ajouter une variable pour le compteur, il n'affiche plus le résultat.

    De plus j'ai l'impression d'avoir mal défini ma variable compt et que du coup elle n'augmentera jamais.

    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
    <!DOCTYPE html>
    <html>
       <head>
          <title>Prompt Dialog Box</title>
     
     
       </head>
       <body>
          <img src="Fond.png" onclick="testPromptDialog()">
     
           Ton score est de : <span id="champDuPrompt"></span>
    <script type="text/javascript">
        
        var compt = "0";
        
              function testPromptDialog()  {
     
                  var result = prompt("Entre le nom du jeu :", "");
     
                  if(result === bleu)  {
                      alert("Le jeu s'appelle " + result);
                      compt=compt+10;
                  }
                  document.getElementById("champDuPrompt").innerHTML = compt;
             }
     
        
     
     
    </script>
     
       </body>
    </html>

    Merci encore de l'aide apporter.

  8. #8
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    juin 2003
    Messages
    9 644
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : juin 2003
    Messages : 9 644
    Points : 14 672
    Points
    14 672
    Par défaut
    regarde dans la console, tu as une erreur javascript pendant l'exécution du code.

    je viens aussi de penser à quelque chose : je t'ai dit que tu peux tout faire en javascript mais ça veut dire que les réponses seront dans le code javascript et tout le monde pourra les lire et tricher. si tu as besoin d'éviter cela, tu devras utiliser un langage côté serveur comme php ou node.js par exemple.

  9. #9
    Membre du Club
    Homme Profil pro
    Enseignant
    Inscrit en
    septembre 2018
    Messages
    166
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 45
    Localisation : France, Pyrénées Orientales (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Enseignant
    Secteur : Enseignement

    Informations forums :
    Inscription : septembre 2018
    Messages : 166
    Points : 61
    Points
    61
    Par défaut
    Ok, j'ai résolu mon histoire de compteur avec ce code :
    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
    <!DOCTYPE html>
    <html>
       <head>
          <title>Prompt Dialog Box</title>
     
     
       </head>
       <body>
          <img src="Fond.png" onclick="testPromptDialog()">
     
           Ton score est de : <span id="champDuPrompt"></span>
    <script type="text/javascript">
        
        var compt = parseInt("0");
        
              function testPromptDialog()  {
     
                  var result = prompt("Entre le nom du jeu :", "");
     
                  if(result === "bleu")  {
                      //alert("Le jeu s'appelle " + result);
                      compt=compt+10;
                  }
                  document.getElementById("champDuPrompt").innerHTML = compt;
             }
     
        
     
     
    </script>
     
       </body>
    </html>

    J'aimerais maintenant faire en sorte qu'il y ait plusieurs zones cliquables sur mon image qui renvoie chacune à des réponses différentes. J'ai essayé avec une mais cela ne rend pas la zone cliquable du coup plus rien n'apparait.

    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
    <!DOCTYPE html>
    <html>
       <head>
          <title>Prompt Dialog Box</title>
    	<style>
            body {
                    font-family: Helvetica, Arial, sans-serif;
            }
            h1 {
                    font-size: 20px;
            }
            div {
                    width: 100%;
            }
            img[usemap] {
                    border: none;
                    height: auto;
                    max-width: 100%;
                    width: auto;
            }
            </style>
     
       </head>
       <body>
          <img src="Fond.png">
     
           Ton score est de : <span id="champDuPrompt"></span>
    <script type="text/javascript">
        
        var compt = parseInt("0");
     
     
              function testPromptDialog()  {
     
                  var result = prompt("Entre le nom du jeu :", "");
     
                  if(result === "bleu")  {
                      //alert("Le jeu s'appelle " + result);
                      compt=compt+10;
                  }
                  document.getElementById("champDuPrompt").innerHTML = compt;
             }
     
        
     
        <map name="testmap">
                    <area shape="rect" coords="570,195,660,275" onclick="testPromptDialog()"/>
                    
    </map>
     
    </script>
     
       </body>
    </html>

    Aurais-tu une idée de la raison pour laquelle la map ne fonctionne pas.



    PS: Je vais d'abord faire en javascript et si un jour je veux cacher les réponses je chercherai à le transformer en php.

  10. #10
    Membre du Club
    Homme Profil pro
    Enseignant
    Inscrit en
    septembre 2018
    Messages
    166
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 45
    Localisation : France, Pyrénées Orientales (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Enseignant
    Secteur : Enseignement

    Informations forums :
    Inscription : septembre 2018
    Messages : 166
    Points : 61
    Points
    61
    Par défaut
    J'ai modifié comme cela et ca semble fonctionner

    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
    <!DOCTYPE html>
    <html>
       <head>
          <title>Prompt Dialog Box</title>
    	<style>
            body {
                    font-family: Helvetica, Arial, sans-serif;
            }
            h1 {
                    font-size: 20px;
            }
            div {
                    width: 100%;
            }
            img[usemap] {
                    border: none;
                    height: auto;
                    max-width: 100%;
                    width: auto;
            }
            </style>
     
       </head>
       <body>
               <map name="testmap">
    		<area shape="rect" coords="570,195,660,275" onclick="testPromptDialog()"/>
     
    </map>
          <img usemap="#testmap" src="Fond.png">
     
           Ton score est de : <span id="champDuPrompt"></span>
    <script type="text/javascript">
        
        var compt = parseInt("0");
     
     
              function testPromptDialog()  {
     
                  var result = prompt("Entre le nom du jeu :", "");
     
                  if(result === "bleu")  {
                      //alert("Le jeu s'appelle " + result);
                      compt=compt+10;
                  }
                  document.getElementById("champDuPrompt").innerHTML = compt;
             }
     
        
     
     
     
    </script>
     
       </body>
    </html>

  11. #11
    Membre du Club
    Homme Profil pro
    Enseignant
    Inscrit en
    septembre 2018
    Messages
    166
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 45
    Localisation : France, Pyrénées Orientales (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Enseignant
    Secteur : Enseignement

    Informations forums :
    Inscription : septembre 2018
    Messages : 166
    Points : 61
    Points
    61
    Par défaut
    Nouvelle question :
    Vu que j'ai une quarantaine de zones à créer avec autant de réponses différentes, y a-t-il un moyen de faire plus concis au niveau du code? Car à chaque fois je créé une nouvelle fonction pour valider une réponse différente

    Ex :
    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
    <!DOCTYPE html>
    <html>
       <head>
          <title>Prompt Dialog Box</title>
    	<style>
            body {
                    font-family: Helvetica, Arial, sans-serif;
            }
            h1 {
                    font-size: 20px;
            }
            div {
                    width: 100%;
            }
            img[usemap] {
                    border: none;
                    height: auto;
                    max-width: 100%;
                    width: auto;
            }
            </style>
     
       </head>
       <body>
               <map name="testmap">
    		<area shape="rect" coords="570,195,660,275" onclick="testPromptDialog()"/>
            <area shape="poly" coords="1027,266,1031,268,1034,271,1035,274,1033,279,1029,282,1021,282,1016,278,1017,271,1023,265,1024,261,1027,266" onclick="testPromptDialog2()"/>
     
    </map>
          <img usemap="#testmap" src="Fond.png">
     
           Ton score est de : <span id="champDuPrompt"></span>
    <script type="text/javascript">
        
        var compt = parseInt("0");
     
     
              function testPromptDialog()  {
     
                  var result = prompt("Entre le nom du jeu :", "");
     
                  if(result === "bleu")  {
                      //alert("Le jeu s'appelle " + result);
                      compt=compt+10;
                  }
                  document.getElementById("champDuPrompt").innerHTML = compt;
             }
     
        
     
              function testPromptDialog2()  {
     
                  var result = prompt("Entre le nom du jeu :", "");
     
                  if(result === "jaune")  {
                      //alert("Le jeu s'appelle " + result);
                      compt=compt+10;
                  }
                  document.getElementById("champDuPrompt").innerHTML = compt;
             }
     
        
     
     
    </script>
     
       </body>
    </html>

    Je vais aussi essayer de m'attaquer à la mise en forme du compteur de points.

  12. #12
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    juin 2003
    Messages
    9 644
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : juin 2003
    Messages : 9 644
    Points : 14 672
    Points
    14 672
    Par défaut
    tu peux définir le nom des zones comme cela :
    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    	<map name="testmap" id="zones_image">
    		<area
    			shape="rect"
    			coords="570,195,6600,2705"
    			data-nom="bleu"
    		/>
    		<area
    			shape="poly"
    			coords="1027,266,1031,268,1034,271,1035,274,1033,279,1029,282,1021,282,1016,278,1017,271,1023,265,1024,261,1027,266"
    			data-nom="jaune"
    		/>
    	</map>
    et ensuite le code javascript comme cela :

    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
    let compt = 0;
     
    let balises_area = Array.from(
    	document
    		.getElementById("zones_image") // identifiant de la balise "map"
    		.getElementsByTagName("area")
    );
     
     
    balises_area.forEach(area => { // parcours de toutes les balises "area"
     
    	area.addEventListener( // ajout d'un gestionnaire d'évènement à une balise
    		  "click"
    		, evenement_clic => {
     
    			let area = evenement_clic["target"];
     
     
    			let result = prompt("Entre le nom du jeu :", "");
     
    			if (result === area["dataset"]["nom"]) { // area["dataset"]["nom"] contient la valeur de la balise "data-nom"
     
    				compt += 10;
    				document.getElementById("champDuPrompt").innerHTML = compt;
     
    			}
     
    		}
    	);
     
     
    });

  13. #13
    Membre du Club
    Homme Profil pro
    Enseignant
    Inscrit en
    septembre 2018
    Messages
    166
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 45
    Localisation : France, Pyrénées Orientales (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Enseignant
    Secteur : Enseignement

    Informations forums :
    Inscription : septembre 2018
    Messages : 166
    Points : 61
    Points
    61
    Par défaut
    Je viens de tester le code que tu m'as donné, mais il ne prends en compte que la réponse bleu et pas jaune et ce quelle que soit la map. Du coup jaune ne permet pas de marquer de points et bleu en marque même sur la balise jaune.

    Je suis perdu.

  14. #14
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    juin 2003
    Messages
    9 644
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : juin 2003
    Messages : 9 644
    Points : 14 672
    Points
    14 672
    Par défaut
    dans mon test, j'avais agrandi la zone "bleu" parce que je ne voyais pas où étaient les zones. donc tu dois remettre les bonnes coordonnées.

  15. #15
    Membre du Club
    Homme Profil pro
    Enseignant
    Inscrit en
    septembre 2018
    Messages
    166
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 45
    Localisation : France, Pyrénées Orientales (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Enseignant
    Secteur : Enseignement

    Informations forums :
    Inscription : septembre 2018
    Messages : 166
    Points : 61
    Points
    61
    Par défaut
    J'ai essayé de déplacer les résultats des scores avec le code suivant :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
        <img usemap="#testmap" src="Fond.png" STYLE="position:absolute; top:650; left:50">
     
    <DIV STYLE="position:absolute; top:250; left:50">
         <FONT COLOR="#ffffff">       
           Ton score est de : <span id="champDuPrompt"></span>
         </FONT>
    </DIV>

    Il les a placé en haut à gauche de l'image, ce qui est mieux, mais j'aimerais les décaler un peu.
    Et peu importe les valeurs que je rentre en top et left il me les place toujours au même endroit.

  16. #16
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    juin 2003
    Messages
    9 644
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : juin 2003
    Messages : 9 644
    Points : 14 672
    Points
    14 672
    Par défaut
    c'est une question de css donc pour ça il vaut mieux que tu crées une nouvelle discussion dans le forum css.

  17. #17
    Membre du Club
    Homme Profil pro
    Enseignant
    Inscrit en
    septembre 2018
    Messages
    166
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 45
    Localisation : France, Pyrénées Orientales (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Enseignant
    Secteur : Enseignement

    Informations forums :
    Inscription : septembre 2018
    Messages : 166
    Points : 61
    Points
    61
    Par défaut
    Ok pour le css je verrai plus tard alors.

    Je vais m'attaquer donc au nombre de vies
    Nom : Capture d’écran 2022-09-25 091533.jpg
Affichages : 75
Taille : 255,2 Ko

    Ma démarche est la suivante (tu me dis si je me plantes).

    -Je crée une variable qui vaut 3.
    -Si la réponse n'est pas bonne dans les maps décrites j'enlève 1 à la variable
    -Si la variable atteint 0, affichage Game Over

    Ce qui m'embete c'est l'affichage, j'aime bien l'idée sur la photo ou le compteur de vies et sous forme d'une image qui s'éteint.
    Mais je ne sais pas comment faire.

  18. #18
    Membre du Club
    Homme Profil pro
    Enseignant
    Inscrit en
    septembre 2018
    Messages
    166
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 45
    Localisation : France, Pyrénées Orientales (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Enseignant
    Secteur : Enseignement

    Informations forums :
    Inscription : septembre 2018
    Messages : 166
    Points : 61
    Points
    61
    Par défaut
    Bon j'arrive à affiche le nombre de vies ainsi qu'un coeur pour les représenter avec le code suivant :
    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
     
    <script type="text/javascript">
        
       
        let compt = 0;
        let vie = 3;
     
    let balises_area = Array.from(
            document
                    .getElementById("zones_image") // identifiant de la balise "map"
                    .getElementsByTagName("area")
    );
     
     
    balises_area.forEach(area => { // parcours de toutes les balises "area"
     
            area.addEventListener( // ajout d'un gestionnaire d'évènement à une balise
                      "click"
                    , evenement_clic => {
     
                            let area = evenement_clic["target"];
     
     
                            let result = prompt("Entre le nom du jeu :", "");
     
                            if (result === area["dataset"]["nom"]) { // area["dataset"]["nom"] contient la valeur de la balise "data-nom"
     
                                    compt += 10;
                                    document.getElementById("champDuPrompt").innerHTML = compt;
     
                            }
                else {vie-=1;
                      if (vie==0) {alert("GAME OVER")}
                      else {
                            alert("Il ne reste plus que "+vie+" vies");
                            }
                     }
                document.getElementById("nbdevies").innerHTML = vie;
                document.getElementById('imgvies').innerHTML = '<img src="coeur.png">';
                    }
            );
     
     
    });
        
    </script>
    <div class="container">    
    <DIV class="effetneon" STYLE="position:absolute; top:250; left:50">
        <FONT COLOR="#ffffff">       
           Score : <span id="champDuPrompt"></span>
            Vies : <span id="nbdevies"></span> <span id="imgvies"></span>
        </FONT>
    </DIV>
    </div>

    Toutefois, l'affichage du score ainsi que des vies n'apparait au début, il faut que j'ai répondu à une zone cliquable pour que cela apparaisse. Pour quelle raison?

  19. #19
    Membre du Club
    Homme Profil pro
    Enseignant
    Inscrit en
    septembre 2018
    Messages
    166
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 45
    Localisation : France, Pyrénées Orientales (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Enseignant
    Secteur : Enseignement

    Informations forums :
    Inscription : septembre 2018
    Messages : 166
    Points : 61
    Points
    61
    Par défaut
    J'essaie d'afficher autant de coeurs que de vies restantes, j'ai essayé avec une fonction trouvée mais plus rien ne fonctionne.

    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
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Question 2</title>
    <script type="text/javascript">
     
    function afficheimages(pNum)
    {
       var nb_image = pNum;
       for (i=0 ; i<nb_image ; i++)
          {
             document.write('');
             document.write('
    ');
          }
    }
     
    </script>
    </head>
     
    </html>

    Si quelqu'un a une idée cela m'arrangerait

  20. #20
    Modérateur

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

    Informations forums :
    Inscription : janvier 2011
    Messages : 16 340
    Points : 41 987
    Points
    41 987
    Par défaut
    Bonjour,
    J'essaie d'afficher autant de coeurs que de vies restantes, j'ai essayé avec une fonction trouvée mais plus rien ne fonctionne.
    beaucoup de chose à dire mais la principale est qu'il ne te faut pas utiliser document.write qui va, lorsque tu l’appelles comme tu le fais, effacer le contenu de la page en cours donc à bannir.

    Il existe bien des façons de procéder et dire laquelle est la mieux est chose ardue.
    Tu peux jouer avec l'ajout/retrait d'une classe sur tes éléments, changer l'attribut src des tes images, utiliser des fichiers SVG ...


    Si quelqu'un a une idée cela m'arrangerait
    Voici un exemple de ce que l'on peut faire « simplement » en utilisant du SVG :

+ Répondre à la discussion
Cette discussion est résolue.
Page 1 sur 2 12 DernièreDernière

Discussions similaires

  1. Scratch - création d'un mini jeu
    Par zoom61 dans le forum Programmation pour enfants
    Réponses: 1
    Dernier message: 24/09/2015, 13h14
  2. Scratch - création d'un mini jeu
    Par zoom61 dans le forum Logiciels Libres & Open Source
    Réponses: 1
    Dernier message: 24/09/2015, 13h14

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