Membre de ClickFR, Reseau francophone Paie-Par-Click
Accueil
Accueil
- [ CSS : ] [ DHTML : ] [ HTML : ] [ JavaScript : ] [ Refs : ]
Accueil

JavaScript 1.3

  Disparition d'une carte

fonction de ce script  principe de ce script  le script lui-meme  demonstration du script  telechargement du script

  Fonction
Voici un petit jeu dont le principe est connu de beaucoup de personnes mais ne le dévoilons pas tout de suite.
Concr&eciorc;tement, le navigateur vous présente 5 cartes à jouer parmi 20 (du Dix à l'As dans les 4 couleurs habituelles). Vous sélectionnez mentalement une de ces 5 cartes puis vous cliquez sur le lien qui la fera disparaître... et miracle, votre carte a bel et bien disparue !!

Pour avoir l'explication du 'truc', sélectionnez les quelques lignes 'vides' ci-dessous :
Le truc :
On vous présente 5 cartes parmi 20.
On vous en présente ensuite 4, mais aucune n'était là avant : si on vous propose au départ le 10 de pique, on vous montrera ensuite le 10 de trefle, sachant que la plupart du temps, vous n'aurez pas retenu toutes les cartes mais seulement une apparence générale du tirage (des têtes ou pas, du rouge, du noir), l'illusion est donc parfaite.

Fin de l'explication du truc.
  Principe
On sélectionne au hasard 5 nombres entre 0 et 19 (puisqu'on a 20 cartes), on appelle ensuite ces cartes parmi la liste qu'on a constituée au départ dans un tableau JavaScript et on affiche les 5 cartes sur la page.
Pour la disparition de la carte, on transforme d'abord les 5 cartes en leurs 'quasi jumelles' (on remplace les piques par des trefles, les coeurs par des carreaux et vice-versa) puis on sélectionne une des 5 cartes au hasard, on la retire et on présente les 4 cartes restantes qui bien sûr ne peuvent inclure la carte qui avait été repérée par le joueur !!
Pour brouiller un peu la mémoire visuelle du joueur, on lui présente d'abord le dos des cartes, il affichera lui-même les réponses en passant sur les cartes.
  Le script
dans la partie <head>
<script language="JavaScript">
// on choisi la valeur en abcisse (valeurx)
// Liste des noms des cartes
// Premier caractère : une lettre (c) juste pour éviter les problèmes avec Netscape
// Second caractère : niveau de la carte : 1 = 10, 2 = valet...
// Troisième caractère : la couleur : n = noir, r = rouge
// Quatrième caractère : le symbole en fonction de la couleur : 0 = coeur ou pique, 1 = carreau ou trefle
// Ex : c1n0 = 10 de pique, c1n1 = 10 de trefle, c5r1 = as de carreau
var cartes_lst = new Array('c1n0','c1n1','c1r0','c1r1','c2n0','c2n1', 'c2r0','c2r1','c3n0','c3n1','c3r0','c3r1','c4n0','c4n1','c4r0','c4r1', 'c5n0','c5n1','c5r0','c5r1');

// Le tableau qui recevra les index 5 cartes sélectionnées
var choix = new Array();

// Le tableau qui recevra les intitulés des 5 cartes sélectionnées
var cartes_choisies = new Array();


// Génération d'un nombre aléatoire entre 0 et 19 pour sélectionner une carte
function alea() {

// Cette méthode génère un nombre entre 0 et 1 (0,3456 ou 0,7834...)
var resultat = Math.random();
var qte_cartes = 1/(cartes_lst.length);

// On compare le nombre aléatoire à 1 divisé par 20 et on renvoie le numéro de l'intervalle pour obtenir un nombre entre 0 et 19
for ( k = 0; k < cartes_lst.length; k++ ) {
if ( resultat >= (qte_cartes*k) && resultat < (qte_cartes*(k+1)) ) { return k; }
}
}


// On va choisir les cartes
function cartes_select() {

// On en prend 5
for ( i = 0; i < 5; i++ ) {

// On lance la génération du nombre aléatoire qui nous reviendra entre 0 et 19
choix[i] = alea();

// L'intitulé de la carte correspondante est placé dans le tableau 'cartes_choisies'
cartes_choisies[i] = cartes_lst[(choix[i])];
}

// Classement alphabétique des 5 cartes pour éviter que deux cartes de même valeur et de même couleur (noir ou rouge) ne soit présentes
cartes_choisies.sort();
for ( var j = 0; j < 5; j++ ) {
if ( j < 4 ) {

// Si les trois premiers caractères d'une carte sont identiques à ceux de la carte suivante (c1n ou c4r ou c3n...)
if ( (cartes_choisies[j].substring(0,3)) == (cartes_choisies[(j + 1)].substring(0,3)) ) {

// On relance le choix des cartes !
cartes_select();
}
}
}
}


// Affichage des 5 cartes sélectionnées dans un tableau HTML
function affiche() {

// On sélectionne les cartes
cartes_select();

// Pour être sur que les cartes on été sélectionnées
if ( cartes_choisies.length > 0 ) {

// Début de l'écriture du tableau
document.write('<table cellspacing="5" cellpadding="1" border="0"><tr>');

// On écrit une cellule pour chaque carte (5)
for ( l = 0; l < 5; l++ ) {
document.write('<td><img src="cartes/' + cartes_choisies[l] + '.gif"></td>');
}

// On termine le tableau HTML
document.write('</tr></table>');
}
}


// Sélection d'un nombre aléatoire entre 0 et 4 inclus
function alea2() {
var resultat = Math.random();
var qte_cartes = 1/5;
for ( o = 0; o < 5; o++ ) {
if ( resultat >= (qte_cartes*o) && resultat < (qte_cartes*(o+1)) ) { return o; }
}
}


// Affichage des 4 nouvelles cartes
function magie() {

// On créé le tableau qui accueillera les cartes
var cartes_rendues = new Array();
for ( m = 0; m < 5; m++ ) {

// Si l'intitulé de la carte se termine par 0, on met 1 à la place
if ( cartes_choisies[m].substring(3,4) == '0' ) { cartes_rendues[m] = cartes_choisies[m].substring(0,3) + '1'; }

// Si l'intitulé de la carte se termine par 1, on met 0 à la place
if ( cartes_choisies[m].substring(3,4) == '1' ) { cartes_rendues[m] = cartes_choisies[m].substring(0,3) + '0'; }
}

// On élimine une des 5 cartes au hasard
delete cartes_rendues[alea2()];

// On classe les cartes pour que la carte 'vide' soit placée à la fin du tableau
cartes_rendues.sort();

// Début de l'ecriture du tableau HTML des nouvelles cartes
document.write('<center>Passez sur les images pour les retourner...<table cellspacing="5" cellpadding="0" border="0"><tr>');

// Pour chacune des 4 cartes, une cellule, on place les images du dos de la carte pour briser un peu la mémoire visuelle, OnMouseOver, les cartes rendues
for ( n = 0; n < 4; n++ ) {
document.write('<td><a href="javascript:void(0);" OnMouseOver="document.' + cartes_rendues[n] + '.src=\'cartes/' + cartes_rendues[n] + '.gif\';return true;"><img src="cartes/cdos.gif" name="' + cartes_rendues[n] + '" border="0"></a></td>');
}

// On termine le tableau HTML
document.write('</tr></table>Impressionnant non ?<br><a href="javascript:history.back();">rejouer</a><br>');
}
</script>

dans la partie <body>
Choisissez une carte (souvenez-vous en...)

<!-- Affichage des 5 cartes tirees au hasard -->
<script language="JavaScript">affiche();</script>

<!-- Lancement de la disparition -->
<a href="javascript:magie();">Cliquez ici, je la fais disparaître...</a>
  Démonstration

Voir la démonstration

  Téléchargement
Ce script est disponible en deux versions :
  • le script est intégré à la page où il agit,
  • le script est dans un fichier séparé de la page où il agit (fichier.js et fichier.html).

    L'intérêt d'un script dans un fichier séparé est de pouvoir le partager entre plusieurs pages html.
    Cela permet aussi de le rendre inaccessible à toute personne qui souhaiterai l'enregistrer pour une autre utilisation.
  • Script intégré :
    jeux_devin.zip
    105 Ko (il y a les images)
    telechargez le script telechargez le script
    Script séparé :
    jeux_devin2.zip
    106 Ko (il y a les images)
    Recherche
    aide sur la recherche
    hit-parade
    Votez TOP Ouaibe !

    statistiques
    aide sur les contacts aide sur la mailing-list aide sur la newsletter