danielhagnoul

Comment dévoiler lettre par lettre un message caché ?

Noter ce billet

par

, 21/02/2018 à 15h57 (1613 Affichages)

J'utilise un générateur ES2015 pour construire le message caché. Lorsque l'utilisateur active un bouton, il actionne l'itérateur qui appelle le générateur, lequel modifie le message caché en dévoilant une lettre au hasard. Lorsque le message est totalement dévoilé, le bouton est rendu inactif ( disabled ).

Pour cacher le message j'utilise str.replace( /[A-za-z0-9\u00C0-\u00FF]/g, "*" ), // \u00C0-\u00FF pour les à, é, è, etc.

Le générateur est assez simple, il parcourt l' Array arIndex. Pour construire arIndex on utilise la fonction kBrouilleArray() de dvjhUtilities-1.5.1.js.

Attention : un message caché se compose au minimum de deux lettres !

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
/*
 * Pour remplacer une partie d'un String
 */ 
String.prototype.replaceAt = function( index, replacement ){
	return this.substr( 0, index ) + replacement + this.substr( index + replacement.length );
}
 
/*
 * Générateur dévoilant un message lettre par lettre
 */
function* donneResponse( str ){
	const
		strLength = str.length;
 
	let 
		message = str.replace( /[A-za-z0-9\u00C0-\u00FF]/g, "*" ), // \u00C0-\u00FF pour les à, é, è, etc.
		arIndex = kBrouilleArray( Array.from( new Array( strLength ), ( item, i ) => i ) ); // dans dvjhUtilities-1.5.1.js
 
	for ( const index of arIndex ){
		if ( str[ index ] === " " ) continue;
		yield message = message.replaceAt( index, str[ index ] );
	}
}
 
/*
 * Itérateur mettant en oeuvre le générateur donneMessage
 */ 
let response = donneResponse( "À Édouart 4 baron du néant" );

Exeemple :

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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
	<!-- cache-control avec max-age=60 pour le développement uniquement -->
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <meta name="author" content="Daniel Hagnoul">
	<title>Test</title>
  <style>
                *,
                *:after,
                *:before {
                        box-sizing: border-box;
                }
                
                /* CSS du test */
                
                
                /* Fin CSS du test */
 
  </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.3/moment.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.3/locale/fr.js"></script>
	<script src="http://danielhagnoul.developpez.com/lib/dvjh/dvjhUtilities-1.5.1.js"></script>
	<script>
    'use strict';
 
                document.addEventListener( "DOMContentLoaded", ev => {
                        // le DOM est construit, la page web n'est pas visible
                        moment.locale( "fr" );
                        klog( `DOM ready   : ${ new kDvjhDate() }` );
                        
                        // code du test
                
                
                        // fin code du test
                        
                }, false );
    
    window.addEventListener( "load", ev => { 
                        // le DOM est construit et la page web est visible
                        klog( `Window load : ${ new kDvjhDate() }` );
                        
      // code du test
                        
                        /*
                         * Pour remplacer une partie d'un String
                         */ 
                        String.prototype.replaceAt = function( index, replacement ){
                                return this.substr( 0, index ) + replacement + this.substr( index + replacement.length );
                        }
                        
                        /*
                         * Générateur dévoilant un message lettre par lettre
                         */
                        function* donneResponse( str ){
                                const
                                        strLength = str.length;
                                
                                let 
                                        message = str.replace( /[A-za-z0-9\u00C0-\u00FF]/g, "*" ), // \u00C0-\u00FF pour les à, é, è, etc.
                                        arIndex = kBrouilleArray( Array.from( new Array( strLength ), ( item, i ) => i ) ); // dans dvjhUtilities-1.5.0.js
                                
                                for ( const index of arIndex ){
                                        if ( str[ index ] === " " ) continue;
                                        yield message = message.replaceAt( index, str[ index ] );
                                }
                        }
                        
                        /*
                         * Itérateur mettant en oeuvre le générateur donneMessage
                         */ 
                        let response = donneResponse( "À Édouart 4 baron du néant" );
                        
                        /*
                         * Gestionnaire d'événement "donne une lettre"
                         */ 
                        const
                                elemDemo = document.querySelector( "#demo" ),
                                elemBtnIndice = document.querySelector( "#btnIndice" );
                        
                        elemBtnIndice.addEventListener( "click", ev => {
                                let message = response.next();
                                
                                if ( ! message.done ){
                                        elemDemo.textContent = message.value;
                                } else {
                                        elemDemo.setAttribute( "disabled", true );
                                }
                        }, false );
 
                        // fin code du test
                                                
      kIDUnique();
    }, false );
  </script>
</head>
<body>
	<main>
 
		<p id="demo"></p>
		<button id="btnIndice">Donner une lettre</button>
 
	</main>
</body>
</html>

Nom : 88x31.png
Affichages : 261
Taille : 1,4 Ko

Licence Creative Commons Attribution 2.0 Belgique

Mis à jour 08/06/2018 à 11h42 par danielhagnoul (Licence)

Tags: es2015, générateur, generator, iterateur, iterator, lettre par lettre, message caché

Catégories: Javascript , Développement Web , ES2015

« Fichier dvjhUtilities-1.5.1.js Liste des billets Utilisation du localStorage sur plusieurs exemplaires d'une page web »

Commentaires

LittleWhite - 22/02/2018 21h14
- |
Hello,

J'aime bien ce genre de chose. Mais je n'ai pas l'impression, où je n'ai pas compris comment cela été remplacé au hasard.
Sinon, une petite page de démo serait cool.
danielhagnoul - 23/02/2018 23h52
- |
Dans mon bloc j'utilise souvent les ressources des billets précédents, c'est pourquoi je n'explique pas les codes "élémentaires" à chaque fois.

On construit un Array avec Array.from(), voir : https://www.developpez.net/forums/bl...ns-array-from/

La part de hasard dans l'Array arIndex est apportée par kBrouilleArray, code dans : https://www.developpez.net/forums/bl...ties-1-5-0-js/

Cette fonction utilise kIntRandom (dans le même fichier).

Ces deux fonctions sont très anciennes, je les avais mises au point en juin 2010 pour tester Alea avec un générateur de mots de passe, c'est ici : https://www.developpez.net/forums/d9...e/#post5295714 et ici : http://danielhagnoul.developpez.com/...motdepasse.php

Pour comprendre le fonctionnement interne de ces fonctions (assez simple), je pense qu'il faut copier-coller leurs codes et les tester de différentes manières vous-même.
LittleWhite - 24/02/2018 10h10
- |
En effet, je ne passe pas assez souvent sur le blog pour avoir vu tous les codes .

danielhagnoul

Comment dévoiler lettre par lettre un message caché ?

Noter ce billet

Commentaires

+ Créer un blog

Archives

Catégories globales

Catégories de l'utilisateur

<	Décembre 2024
Di	Lu	Ma	Me	Je	Ve	Sa
24	25	26	27	28	29	30
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	1	2	3	4

<	Décembre 2024
Di	Lu	Ma	Me	Je	Ve	Sa
24	25	26	27	28	29	30
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	1	2	3	4

<	Décembre 2024
Di	Lu	Ma	Me	Je	Ve	Sa
24	25	26	27	28	29	30
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	1	2	3	4