Création d'un mini jeu vidéo

**bahh66** · 23/09/2022, 10h10

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.

**mathieu** · 23/09/2022, 18h10

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>

**bahh66** · 24/09/2022, 09h48

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?

**mathieu** · 24/09/2022, 10h08

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

**bahh66** · 24/09/2022, 11h55

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?

**mathieu** · 24/09/2022, 12h31

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.

Création d'un mini jeu vidéo

JavaScript

Vue hybride

Discussions similaires

Partager

Partager