jQuery pexeso

HTML

Táto ukážka používa 20 obrázkov, z toho 10 unikátnych, ale tento kód ukazuje iba 3 unikátne obrázky pre skrátenie kódu, a tiež tam nie sú ďalšie funkcie, ktoré sú obsiahnuté v ukážke, rovnako ako počítadlo stlačení a tlačidlo pre reštart hry.

    
        0
        Click
    
     
    Reset


    

    

    

    

    

    

jQuery

Pre zamiešanie obrázkov som použil rovnaký kód, ako v predchádzajúcom článku o miešaní obrázkoch. Pridáme počítadlo koľko obrázkov bolo odhalených a koľko krát už užívateľ klikol. Tlačidlo reštart vyvolá funkcie pre počítadlo kliknutí, počítadlo uhádnutých obrázkov a znovu premieša obrázky.

var boxopened = "";
var imgopened = "";
var count = 0;
var found =  0;

function randomFromTo(from, to){
    return Math.floor(Math.random() * (to - from + 1) + from);
}

function shuffle() {
    var children = $("#boxcard").children();
    var child = $("#boxcard div:first-child");

    var array_img = new Array();

    for (i=0; i

Pri otáčaní obrázka, som pridal časové oneskorenie, aby si užívateľ mohol zapamatať kartičku ktorá bola otočená, a odviazal som click udalosť zo všetkých kartičiek aby sa zabránilo nepovolenému kliknutiu.

CSS
Pridal som priehľadnosť, keď sú odhalené dva zhodné obrázky v dvoch po sebe následujúcich ťahoch. Tieto dva obrázky budú stále odhalené s priehľadnosťou.

#boxcard {
    margin: 0 auto;
    width: 625px;
    z-index: 1;
}

#boxcard div {
    float: left;
    width: 100px;
    height: 100px;
    background: #d9d9d9;
    margin: 5px;
    padding: 5px;
    border: 1px solid #999;
    cursor: pointer;
    -webkit-border-radius: .5em;
    -moz-border-radius: .5em;
    border-radius: .5em;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.5);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.5);
    box-shadow: 0 1px 2px rgba(0,0,0,.5);
    z-index: 2;
}

#boxcard div img {
    border: none;
    z-index: 3;
}

.opacity {
    opacity: .6;
    filter: alpha(opacity=60);
}


      

Tagy: hra pexeso miesanie obrazky