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 :

Pouvoir cliquer-déplacer des images


Sujet :

JavaScript

  1. #1
    Membre habitué
    Homme Profil pro
    sans
    Inscrit en
    Mai 2007
    Messages
    482
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Meurthe et Moselle (Lorraine)

    Informations professionnelles :
    Activité : sans

    Informations forums :
    Inscription : Mai 2007
    Messages : 482
    Points : 193
    Points
    193
    Par défaut Pouvoir cliquer-déplacer des images
    bonjour,

    J'ai une demande un peu particulière.
    Je viens de récupérer un script de puzzle présent sur un site connu (https://codes-sources.commentcamarch.../40264/1077268).
    Ce script ne fonctionnant pas, j'ai voulu le signaler dans les commentaires mais le bouton "Ajouter un commentaire" ne fonctionne pas non +, d'où mon post ici.
    Voici le script en question:
    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
    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
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    <html>
    <head>
    <style>
    table{
        border-collapse:collapse;
    }
    table tr td, table tr td img{
        margin:0px;
        padding:0px;
    }
    </style>
    <script>
        var g=false;
        var l=500;
        function init(){
            m=new matrice();
        }
        function aclique(px, py){
            if (g){
                if (confirm("voulez vous recommencer ?")){
                    melange(l);
                    g=false;
                }
            }else{
                if (m.clique(px, py)){
                    m.affiche();
                    if (m.finit()){
                        alert("good game !!!");
                        g=true;
                    }
                }else{
                    alert("click incorect !");
                }
            }
        }
        function melange(i){
            var j, py, px, a, o=-1;
            for (j=0;j<i;j++){
                b=true;
                while (b){
                    px=m.freex;
                    py=m.freey;
                    b=false;
                    a=Math.floor(Math.random()*4);
                    if (a==0){
                        px++;
                    }else if (a==1){
                        px--;
                    }else if (a==2){
                        py++;
                    }else if (a==3){
                        py--;
                    }
                    if (px < 0 || px > 9 || py < 0 || py > 9 || o==a)
                        b=true;
                    if (!b){
                        if (a==0){
                            o=1;
                        }else if (a==1){
                            o=0;
                        }else if (a==2){
                            o=3;
                        }else if (a==3){
                            o=2;
                        }
                    }
                }
                if (!m.clique(px, py)){
                    alert("click invalide !");
                }
            }
            m.affiche();
        }
        function matrice(){
            this.freex=9;
            this.freey=9;
            this.clique=matriceclique;
            this.affiche=matriceaffiche;
            this.finit=matricefinit;
            this.tab=new Array(10);
            this.goodgame=new Array(10);
            for (i=0;i<10;i++){
                this.tab[i]=new Array(10);
                this.goodgame[i]=new Array(10);
                for (j=0;j<10;j++){
                    this.tab[i][j]=document.getElementById(i+"_"+j).src;
                    this.goodgame[i][j]=document.getElementById(i+"_"+j).src;
                }
            }
        }
        function matricefinit(){
            for (i=0;i<10;i++){
                for (j=0;j<10;j++){
                    if (this.tab[i][j]!=this.goodgame[i][j]){
                        return false;
                    }
                }
            }
            return true;
        }
        function matriceaffiche(){
            for (i=0;i<10;i++){
                for (j=0;j<10;j++){
                    if (document.getElementById(i+"_"+j))
                        document.getElementById(i+"_"+j).src=this.tab[i][j];
                }
            }
        }
        function matriceclique(px, py){
            if (Math.abs(px-this.freex)+Math.abs(py-this.freey)==1){
                if (this.tab[this.freex][this.freey] && this.tab[px][py]){
                    a=this.tab[px][py];
                    this.tab[px][py]=this.tab[this.freex][this.freey];
                    this.tab[this.freex][this.freey]=a;
                    this.freex=px;
                    this.freey=py;
                    return true;
                }else{
                    //alert(px+'---'+py+'-----///-----'+this.freex+'---'+this.freey);
                    return false;
                }
            }else{
                //alert("mauvais click ("+this.freex+","+this.freey+") click en : ("+px+","+py+")");
                return false;
            }
        }
        m=0;
        //alert(m.tab);
    </script>
    </head>
    <?php
    if (isset($_GET['image'])){
        $rep=base64_encode($_GET['image']);
        echo '<body onload="init();setTimeout(\'melange(l);\', 10000);">';
        if (!is_dir('images/decoupe')){
            mkdir('images/decoupe');
        }
        if (!is_dir('images/decoupe/'.$rep.'')){
            mkdir('images/decoupe/'.$rep.'');
        }
        if (!file_exists('images/decoupe/'.$rep.'/image_0_0.png')){
            $a=imagecreatefromjpeg('images/'.$_GET['image']);
            $x=imagesX($a);
            $y=imagesY($a);
            $b=imagecreatetruecolor(500,500);
            ImageCopyResized($b,$a,0,0,0,0,500,500,$x, $y);
            $c=imagecreatetruecolor(50,50);
            $cb = imagecolorallocate($c,0,0,0);
            $cw = imagecolorallocate($c,200,200,200);
            for ($x=0;$x<10;$x++){
                for ($y=0;$y<10;$y++){
                    if ($x!=9 || $y!=9){
                        imagecopy($c, $b,
                            0, 0,
                            $x*50, $y*50,
                            50, 50);
                    }else{
                        imagefilledrectangle($c, 0, 0, 50,50, $cw);
                    }
                    imageline($c, 0, 0, 49,0, $cb);
                    imageline($c, 49, 0, 49,49, $cb);
                    imageline($c, 49, 49, 0,49, $cb);
                    imageline($c, 0, 49, 0,0, $cb);
                    imagepng($c, 'images/decoupe/'.$rep.'/image_'.$x.'_'.$y.'.png');
                }
            }
        }
        
        echo '
        <table>';
        for ($y=0;$y<10;$y++){
            echo '<tr>';
            for ($x=0;$x<10;$x++){
                echo '<td><img src="images/decoupe/'.$rep.'/image_'.$x.'_'.$y.'.png" id="'.$x.'_'.$y.
                    '" onclick="aclique('.$x.','.$y.');" /></td>';
            }
            echo '</tr>';
        }
        echo '</table>';
    }else{
        echo '<body>';
        if (!is_dir('images/small/')){
            mkdir('images/small/');
        }
        $a=opendir('images/');
        while(false!==($f=readdir($a))) {
            if (is_file('images/'.$f)) {
                if (!is_file('images/small/'.$f)) {
                    $c=imagecreatefromjpeg('images/'.$f);
                    $x=imagesX($c);
                    $y=imagesY($c);
                    $k=min(160/$x, 120/$y);
                    $x2=$x*$k;
                    $y2=$y*$k;
                    $b=imagecreatetruecolor($x2, $y2);
                    ImageCopyResized($b,$c,0,0,0,0,$x2,$y2,$x, $y);
                    imagepng($b, 'images/small/'.$f);
                }
                echo '<a href="puzzle.php?image='.$f.'"><img src="images/small/'.$f.'" /></a>';
            }
        }
    }
    ?>
    </body>
    </html>

    Vous pouvez voir le problème en ligne :
    Allez à
    • l'adresse http://foretvirtuelle.com/adet3/puzzle.php
    • Cliquez sur une des 3 images présentes puis attendez 6-7 secondes; le script mélange bien les images.
    • On est censés pouvoir cliquer-déplacer les images et c'est là que ça ne fonctionne plus.

    Auriez-vous une piste ?
    D'avance, merci.

  2. #2
    Modérateur

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

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 054
    Points : 44 568
    Points
    44 568
    Par défaut
    Bonjour,
    On est censés pouvoir cliquer-déplacer les images et c'est là que ça ne fonctionne plus.
    Non uniquement cliquer est prévu si la case est adjacente au « trou » alors elle se remplace.

  3. #3
    Membre habitué
    Homme Profil pro
    sans
    Inscrit en
    Mai 2007
    Messages
    482
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Meurthe et Moselle (Lorraine)

    Informations professionnelles :
    Activité : sans

    Informations forums :
    Inscription : Mai 2007
    Messages : 482
    Points : 193
    Points
    193
    Par défaut
    Bien peu utile pour un puzzle car hyper restrictif, ce n'est pas ce que je recherche. Je n'ai plus qu'à continuer mes recherches pour trouver un autre script.
    Merci NoSmoking.

  4. #4
    Expert éminent sénior
    Avatar de ProgElecT
    Homme Profil pro
    Retraité
    Inscrit en
    Décembre 2004
    Messages
    6 091
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 68
    Localisation : France, Haute Savoie (Rhône Alpes)

    Informations professionnelles :
    Activité : Retraité
    Secteur : Communication - Médias

    Informations forums :
    Inscription : Décembre 2004
    Messages : 6 091
    Points : 16 655
    Points
    16 655
    Par défaut
    Salut

    Citation Envoyé par Denis Placé, post #1
    Je viens de récupérer un script de puzzle présent sur un site ....
    Vous pouvez voir le problème en ligne :
    Allez à

    l'adresse http://foretvirtuelle.com/adet3/puzzle.php
    Il y a confusion entre puzzle et jeu du taquin.
    Ce qui te fait dire
    Citation Envoyé par Denis Placé
    Bien peu utile pour un puzzle ....
    ben oui, le code ne concerne pas un puzzle.
    pourquoi pas, pour remercier, un pour celui/ceux qui vous ont dépannés.
    saut de ligne
    OOOOOOOOO👉 → → Ma page perso sur DVP ← ← 👈

  5. #5
    Membre habitué
    Homme Profil pro
    sans
    Inscrit en
    Mai 2007
    Messages
    482
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Meurthe et Moselle (Lorraine)

    Informations professionnelles :
    Activité : sans

    Informations forums :
    Inscription : Mai 2007
    Messages : 482
    Points : 193
    Points
    193
    Par défaut
    Le script était "vendu" comme celui d'un puzzle, chose que je cherchais; c'est taquin

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Déplacer des images
    Par theMonz31 dans le forum ASP.NET
    Réponses: 5
    Dernier message: 05/05/2015, 09h53
  2. Déplacer des images
    Par stade13 dans le forum jQuery
    Réponses: 0
    Dernier message: 03/07/2012, 15h32
  3. Déplacer des objets images sur une page
    Par KeKeMaN dans le forum Général Conception Web
    Réponses: 3
    Dernier message: 17/02/2009, 09h59
  4. Réponses: 4
    Dernier message: 04/12/2008, 19h53

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