Resolu.

-
Edité par Tababa 19 avril 2018 à 16:39:06

-
Edité par Tababa 19 avril 2018 à 16:39:15

var moncanvas = document.getElementById('lememory');
var ctx = moncanvas.getContext('2d');
var dessinreussi = false;
var cptretourne = false;
var start = false;
var positionsImage = {x: [], y: []};
var imagedejatrouve = [];
var lesimageaffiche = [];
var lesVersoImage = [];
var LesImages = [];
var retourner1, retourner2;
var nbclick = 0;
var imageclick = 0;
var dejatrouver;
var unnb; 
var nbutileposition;
var face;
var dos = new Image();
var trouve = new Image();
dos.src = 'img_pokemon_237_237/pokeball.png';
trouve.src = 'img_pokemon_237_237/pokeball-trouve.png';
 
function sleep(ms)
{
    let start = new Date().getTime();
    while (new Date().getTime() - start < ms)
        break;
}
// Inserer une image dans LesImages par couples (0-1)=image 1 (2-3)= image 2 (3-4) = image 3 ... ect
for(let i = 0; i < 16; i++)
{
    let n = i / 16;
    let img = new Image();
    let imgSources = [
        "img_pokemon_237_237/pokemon-celebi.png",
        "img_pokemon_237_237/pokemon-deoxys.png",
        "img_pokemon_237_237/pokemon-hoopa.png",
        "img_pokemon_237_237/pokemon-mandrillon.png",
        "img_pokemon_237_237/pokemon-marshadow.png",
        "img_pokemon_237_237/pokemon-new.png",
        "img_pokemon_237_237/pokemon-rayquaza.png",
        "img_pokemon_237_237/pokemon-zoroark.png"
    ];
    // J'affiche les couples d'images côte à côte, 2 par 2, ce qui fait 8 couples (donc je vais afficher chaques couples representant 1/8 chacun)
    for (let j = 1; j <= 8; j++)
        if (n < j / 8)
        {
            UneImage.src = imgSources[j - 1];
            LesImages.push(UneImage);
        }
}
var paireoupas = function winoupas()
{
    let func1 = (r1, r2, alert = null) => {
        let ctx1 = moncanvas.getContext('2d');
        let ctx2 = moncanvas.getContext('2d');
        // Vu que les paires dans le tableau sont 0-1, 2-3, 3-4, ect. Elles se suivent donc je verifie si ce sont des paires ou pas
        if(r1 == r2 + 1)
        {
            ctx2.drawImage(trouve, positionsImage.x[r1], positionsImage.y[r1]);
            ctx1.drawImage(trouve, positionsImage.x[r2], positionsImage.y[r2]);
            imagedejatrouve.push(r1);
            imagedejatrouve.push(r2);
            if (alert)
                alert(alert);
        }
        else
        {
            sleep(1000);
            mettrededos(r1);
            mettrededos(r2);
        }
    };
    if (retourner1 > retourner2)
        func1(retourner1, retourner2, 'modif');
    else if(retourner2 > retourner1)
        func1(retourner2, retourner1, 'gg');
}

var mettredeface = function tournerface()
{
    if(!cptretourne)
    {
        ctx.clearRect(positionsImage.x[uneimage], positionsImage.y[uneimage], 237, 237);
        ctx.drawImage(LesImages[uneimage], positionsImage.x[uneimage], positionsImage.y[uneimage]);
    }
}
var turnimg = function retourner1image(unnumeroimage)
{
    // Si l'image est caché alors je l'affiche
    if(lesVersoImage[unnumeroimage])
    {
        ctx.clearRect(positionsImage.x[unnumeroimage], positionsImage.y[unnumeroimage], 237, 237);
        ctx.drawImage(LesImages[unnumeroimage], positionsImage.x[unnumeroimage], positionsImage.y[unnumeroimage]);
        if(cptretourne)
        {
            retourner2 = unnumeroimage;
            paireoupas();
        }
        else
            retourner1 = unnumeroimage;

        lesVersoImage[unnumeroimage] = false;
        cptretourne = !cptretourne;
    }
}
 
var mettrededos = function tournerdos(uneimage)
{
    ctx.clearRect(positionsImage.x[uneimage], positionsImage.y[uneimage], 237, 237);
    ctx.drawImage(dos, positionsImage.x[uneimage], positionsImage.y[uneimage]);
    lesVersoImage[uneimage] = true;
}
// Récuperer le clique
function clickcanvas(event)
{
    // Je récupère les valeurs x et y du clique utilisateur et les ajustes aux valeurs de positionnement d'image pour les faire correspondre à mes valeurs
    let rect = lememory.getBoundingClientRect();
    let mousePosX = event.clientX - rect.left;
    let mousePosY = event.clientY - rect.top;
     
         if(mousePosX >= 900) mousePosX = 900;
    else if(mousePosX >= 600) mousePosX = 600;
    else if(mousePosX >= 300) mousePosX = 300;
    else if(mousePosX <= 300) mousePosX = 0;

         if(mousePosY >= 1050) mousePosY = 1050;
    else if(mousePosY >= 700) mousePosY = 700;
    else if(mousePosY >= 350) mousePosY = 350;
    else if(mousePosY < 350) mousePosY = 0;

    if(start)
    {      
        // Récupération du numero de l'image sur laquelle on a cliqué dans la variable imageclick
        dejatrouver = false;
        for (let i = 0; i < 16; i++)
        {
            if(imagedejatrouve[i] == imageclick)
                dejatrouver = true;

            if(positionsImage.x[i] == mousePosX && positionsImage.y[i] == mousePosY)
                imageclick = i;
        }
        if(dejatrouver)
        {
        // alert("Inutile d'appuyer ici vous avez déjà trouver cette carte");
        }
        else
        {
            nbclick = nbclick + 1;
            turnimg(imageclick);
        }
    }
}
 
var toutretourner = function dessindos()
{
    ctx.clearRect(0, 0, moncanvas.width, moncanvas.height);
    for(let i = 0; i < 16; i++)
    {
        lesVersoImage[i] = true;
        if(i <= 3)
        {
            nbutileposition = i * 300;
            ctx.drawImage(dos, nbutileposition, 0);
        }
        else if(i <= 7)
        {
            nbutileposition = (i - 4) * 300;
            ctx.drawImage(dos, nbutileposition, 350);
        }
        else if(i <= 11)
        {
            nbutileposition = (i - 8) * 300;
            ctx.drawImage(dos, nbutileposition, 700);
        }
        else if(i <= 15)
        {
            nbutileposition = (i - 12) * 300;
            ctx.drawImage(dos, nbutileposition, 1050);
        }
    }
    return false;
}
// Dessiner 4 images par ligne au hasard 
function dessin()
{
    start = true;
    face = true;
    ctx.clearRect(0, 0, moncanvas.width, moncanvas.height);
    for(let i = 0; i < 16; i++)
    {
        lesimageaffiche[i] = false;
        lesVersoImage[i] = false;
    }
    /*
        Résumé d'une boucle
            Tant qu'on ne dessine pas (dessinreussi == false) on génère un nombre si on a pas encore affiché l'image correspondant à ce nombre on le fait
            sinon on recommence tant que c'est pas le cas.
    */
    for(let i = 0; i < 16; i++)
    {
        let func1 = (b, n) => {
            while (dessinreussi == false)
            {
                randomNbr = Math.floor(Math.random() * 16);
                if(!lesimageaffiche[randomNbr])
                {
                    nbutileposition = b;
                    ctx.drawImage(LesImages[randomNbr], nbutileposition, n);
                    positionsImage.x[randomNbr] = nbutileposition;
                    positionsImage.y[randomNbr] = n;
                    lesimageaffiche[randomNbr] = true;
                    dessinreussi = true;
                }
            }
        };
        if(i <= 3) func1(i * 300, 0);
        else if(i <= 7) func1((i - 4) * 300, 350);
        else if(i <= 11) func1((i - 8) * 300, 700);
        else if(i <= 15) func1((i - 12) * 300, 1050);

        dessinreussi = false;
    }
}

-
Edité par Tababa 19 avril 2018 à 16:39:33

J'avais écrit du texte, mais il est pas là... :x

_________________

J'ai modifier un peu ton code pour le rendre plus lisible et compacte. Cela ne résout pas le problème, mais ça le facilite indirectement

Probleme resolu.

-
Edité par Tababa 19 avril 2018 à 16:39:42