Discussion :

[oZile]

Bonjour à tous,

Merci tout d'abord pour tous ceux qui nous aident sur ce forum !

D'habitude j'arrive à trouver la solution à mes problèmes ici. Mais cette fois, je n'y arrive pas. Alors je viens vous embêter un peu...

J'ai ouvert un canvas avec une image de fond. Au départ, le fond est caché par un rectangle. Il faut cliquer grâce à onclick sur une petite zone rectangulaire au centre pour révéler l'image de fond.

Par la suite, selon la position de la souris avec onmousemove. Si la souris est dans un cercle un son est lancé. Si la souris sort du cercle, le son s'arrête.

Tout fonctionne correctement sauf que si je clique sur une zone qui est dans le cercle et dans la zone rectangulaire du départ (qui n'apparaît plus), et qu'ensuite je sors du cercle, le son ne s'arrête pas.

Je pense que ça vient du fait que lorsque je clique, les coordonnées de la souris sont fixées à cause du onclick du départ. Pourtant ce onclick est dans une fonction que j'ai quittée... Je pense qu'il y a un truc que je ne maîtrise pas et si l'un d'entre vous peut m'expliquer...

Merci d'avance !

Gilles


Quelques explications au code ci-dessous au cas où vous voudriez vous y plonger...
Lignes 85 à 150 : Fonction intro, lancée au départ, elle contient un rectangle qui cache le fond. Il faut cliquer (ligne 134) sur une zone rectangulaire pour enlever ce cache et lancer la fonction suivante.
Lignes 13 à 82 : Fonction Exploration. C'est dans cette fonction que se trouve on onmousemove (ligne 34). Lorsque la souris est dans une des trois zones (lignes 44, 54 et 64) un son est lancé et un cercle dessiné. Lorsque la souris sort de ses zones (ligne 74) le cercle est effacé et le son arrêté.

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
/* Calcul de la distance entre deux points */
var distance = function (xA, yA, xB, yB) {
    return Math.sqrt(Math.pow(xA-xB,2)+Math.pow(yA-yB,2));
};
 
/* Création du contexte du canevas */
var canevasTableau = document.getElementById('tableau');
var contexteTableau = canevasTableau.getContext('2d');
 
var aCommence = false;  /* Teste si l'exploration du tableau a commencé */
 
/* Exploration du tableau à la souris */
var exploration = function() {
 
    var son=false;  /* Booléen testant si un son est en train d'être joué */
    /* Divers sons correspondants aux textes dits par les personnages */
    var liberte = new Audio('sncf.mp3');
    var ouvrier = new Audio('hennissement.mp3');
    var assaillant = new Audio('vache.mp3');
 
    var arreterTousLesSons = function () {
        liberte.pause();        /* Met en pause le son */
        liberte.currentTime=0;  /* Remet le son au début = stoppe le son */
        ouvrier.pause();        /* Idem pour tous les personnages */
        ouvrier.currentTime=0;
        assaillant.pause();
        assaillant.currentTime=0;
    }
 
    /* Effacement du cadre de début de l'animation */
    contexteTableau.clearRect(0, 0, 800, 642);
 
    /* Actions selon la position de la souris */
    canevasTableau.onmousemove = function(souris) {
 
        /* Récupération des coordonnées de la souris */
        var tailleRect = canevasTableau.getBoundingClientRect();
        x = 0;
        y = 0;
        x = souris.clientX - tailleRect.left;   /* Correction de l'erreur de lecture de la position */
        y = souris.clientY - tailleRect.top;
 
        /* Tests de position de la souris et action */
        if (distance(x, y, 475, 124)<=65) {          /* La Liberté */
            if (!son) {     /* Si aucun son n'est en cours */
                arreterTousLesSons();
                liberte.play();     /* Joue le son correspondant au personnage */
                son=true;   /* Un son est en train d'être joué */
                contexteTableau.beginPath();    /* Dessin de la zone où est la souris */
                contexteTableau.fillStyle='rgba(255, 255, 255, 0.2)';
                contexteTableau.arc(475, 124, 65, 0, 2*Math.PI);    
                contexteTableau.fill();                  
            }
        } else if (distance(x, y, 340, 350)<=60) {   /* Ouvrier avec bandana au pied de la Liberté */
            if (!son){
                arreterTousLesSons();
                ouvrier.play();
                son=true;
                contexteTableau.beginPath();
                contexteTableau.fillStyle='rgba(255, 255, 255, 0.2)';
                contexteTableau.arc(340, 350, 60, 0, 2*Math.PI);
                contexteTableau.fill();     
            } 
        } else if (distance(x, y, 590, 260)<=60) {   /* Assaillant à la gauche de la Liberté */
            if (!son){
                arreterTousLesSons();
                assaillant.play();
                son=true;
                contexteTableau.beginPath();
                contexteTableau.fillStyle='rgba(255, 255, 255, 0.2)';
                contexteTableau.arc(590, 260, 60, 0, 2*Math.PI);
                contexteTableau.fill();
            }
        } else {            /* La souris est dans une zone où il n'y a pas de personnage */
            if (son) {      /* Si un son est en cours */
                arreterTousLesSons();
                contexteTableau.clearRect(0, 0, 800, 642);      /* Efface la zone circulaire dessinée */
                son=false;      /* Aucun son n'est joué désormais */
            }
        }
    };   
};
 
var intro = function() {
    /* Dessin de l'écran de départ */
    contexteTableau.fillStyle='rgba(255, 255, 255, 0.25)';
    contexteTableau.fillRect(50, 50, 700, 542);       /* Grand rectangle transparent */
    contexteTableau.fillStyle='rgba(200, 200, 200, 1)';
    contexteTableau.fillRect(200, 261, 400, 120);   /* Petit rectangle opaque et cliquable */
    contexteTableau.font = "35px Calibri,Arial";
    contexteTableau.textAlign = "center";
    contexteTableau.fillStyle = "#444";
    contexteTableau.fillText("Activez le son... ", 400, 300);
    contexteTableau.fillText("et cliquez ici !", 400, 337);
    contexteTableau.font = "20px Calibri,Arial";
    contexteTableau.fillText("Puis laissez glisser la souris sur le tableau...", 400, 365);
 
    /* Détecte si la souris passe ou sors de la zone à cliquer pour commencer */
    canevasTableau.onmousemove = function(souris) {
 
        /* Récupération des coordonnées de la souris */
        var tailleRect = canevasTableau.getBoundingClientRect();
        x = 0;
        y = 0;
        x = souris.clientX - tailleRect.left;
        y = souris.clientY - tailleRect.top;
 
        /* Si la souris est dans le cadre à cliquer, inverse les couleurs, sinon, revient aux couleurs de départ */
        if (x>=200 && x<=600 && y>=261 && y<=381) {
            contexteTableau.fillStyle='#444';
            contexteTableau.fillRect(200, 261, 400, 120);
            contexteTableau.font = "35px Calibri,Arial";
            contexteTableau.textAlign = "center";
            contexteTableau.fillStyle = "rgba(255, 0, 0, 1)";
            contexteTableau.fillText("Activez le son... ", 400, 300);
            contexteTableau.fillStyle = "rgba(200, 200, 200, 1)";
            contexteTableau.fillText("et cliquez ici !", 400, 337);
            contexteTableau.font = "20px Calibri,Arial";
            contexteTableau.fillText("Puis laissez glisser la souris sur le tableau...", 400, 365);
        } else {
            contexteTableau.fillStyle='rgba(200, 200, 200, 1)';
            contexteTableau.fillRect(200, 261, 400, 120);
            contexteTableau.font = "35px Calibri,Arial";
            contexteTableau.textAlign = "center";
            contexteTableau.fillStyle = "#444";
            contexteTableau.fillText("Activez le son... ", 400, 300);
            contexteTableau.fillText("et cliquez ici !", 400, 337);
            contexteTableau.font = "20px Calibri,Arial";
            contexteTableau.fillText("Puis laissez glisser la souris sur le tableau...", 400, 365);
            }
    };              
 
    /* Teste le clic de la souris sur le canevas : Attention ! Il est nécessaire de cliquer sur le canevas pour pouvoir jouer les sons au passage de la souris */
    canevasTableau.onclick = function(souris) {
 
        /* Récupération des coordonnées de la souris */
        var tailleRect = canevasTableau.getBoundingClientRect();
        x = 0;
        y = 0;
        x = souris.clientX - tailleRect.left;
        y = souris.clientY - tailleRect.top;
 
        /* Si le clic a lieu dans le rectangle opaque, lance l'exploration du tableau */
        if (x>=200 && x<=600 && y>=261 && y<=381) {
            aCommence = true;
            exploration();
        }
    };    
};
 
intro();

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
<!DOCTYPE html>
 
<html>	
 
	<head>
		<title> Eugène Delacroix - La Liberté guidant le peuple </title>
		<meta charset= "utf-8">
		<link rel="stylesheet" href="LiberteGuidantLePeuple.css" />
	</head>
 
	<body>
 
		<audio id="lecteurAudio">
		</audio>
 
		<!-- Affichage du tableau comme fond d'un canevas. En cas de changement de tableau penser à modifier les dimensions ici et dans le code JavaScript -->
		<canvas id="tableau" width="800" height="642" style="background: url('LiberteGuidantLePeuple.jpg') no-repeat center center">
		</canvas>
 
		<script src="LiberteGuidantLePeuple.js"></script>
	</body> 
</html>

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
body {
    text-align: center;         /* Centrer le canevas */
}
 
canvas {
    border-radius: 10px;           /* Coins du tableau arrondis */
    box-shadow: 0px 0px 100px #000;     /* Ombre autour du tableau */
}

[oZile]

Bon, je me réponds à moi-même. J'ai réussi à trouver une solution satisfaisante ici. Je coupe les sons à chaque clic... Du coup, chaque zone circulaire réagit de la même façon...

Par contre, ce n'est pas satisfaisant globalement, car j'aimerais bien comprendre quel est le problème...

[Golgotha]

Bonjour,

pour moi le problème vient de la fonction onClick qui devrait être seulement fonctionnel au début :

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
    canevasTableau.onclick = function(souris) {
    /* si le jeu n'est pas commencé */
    if (!aCommence){

        /* Récupération des coordonnées de la souris */
        var tailleRect = canevasTableau.getBoundingClientRect();
        x = 0;
        y = 0;
        x = souris.clientX - tailleRect.left;
        y = souris.clientY - tailleRect.top;
 
        /* Si le clic a lieu dans le rectangle opaque, lance l'exploration du tableau */
        if (x>=200 && x<=600 && y>=261 && y<=381) {
            aCommence = true;
            exploration();
        }
      }
    };

[oZile]

Bonjour Golgotha,

Merci pour ton aide. Finalement j'avais fait le même raisonnement que toi et avais mis la variable aCommence comme condition supplémentaire dans le test sur les coordonnées. Ça fonctionne correctement. Ta solution aussi très probablement.
Au moins, j'aurais appris que le onclick restait fonctionnel en continu... Ça ne fait que deux mois que j'ai appris JS et donc je découvre encore des trucs très basiques.

Encore merci à toi et à tous ceux qui ont perdu un peu de temps à me lire,
Gilles