BiggerLess Card Game

In this example below you will see how to do a BiggerLess Card Game with some HTML / CSS and Javascript

This is my work for the school assignment from the course of mobile application programming. In this course we use web technology and the phoneGap application that transforms the specified code into native so the application can also be run on a mobile device using phoneGap. If the card is not displayed at some point, the server may not be responding, so the API server responds with 404 or 500. Refresh all and try again. Here you don't need phoneGap.

Thumbnail
This awesome code was written by THEK7, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright THEK7 ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>BiggerLess Card Game</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <link rel="icon" href="https://deckofcardsapi.com/static/img/favicon/apple-touch-icon-144x144.png">
    <link href="https://fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet">
    <title>Igra s kartama</title>
    <!--FONT AWESOME-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>

<body>
    <div id="aplikacija">
        <div id="newGame" class="popup">
            <i class="fa fa-info-circle" aria-hidden="true" id="info" onclick="popUp()"></i>
            <span class="popuptext" id="myPopup">
                Welcome!! In this game you can play alone or against someone. The game is played so that 2 cards from 52 cards are drawn.
                Then the game shows you one card, and you have to guess wheter the other one is bigger/smaller/equal to the
                current one. After that you have to wait 2.5 seconds for game to drawn 2 new cards. Enjoy.

            </span>
            <br>
            <br>
            <button id="setup">New Game</button>
            <button id="igrac" style="display:none">
                <i class="material-icons">&#xe7fd;</i> Player</button>
            <button id="dvaigraca" style="display:none">
                <i class="material-icons">&#xe7ef;</i> Players</button>
        </div>

        <div id="prikazKarte" style="display:none">
            <p id="ostalo">Cards remaining : </p>
            <img id="slikaKarte">
        </div>
        <div id="jedanIgrac" style="display:none">           
            <button id="veca">Higher</button>
            <button id="manja">Less</button>
            <button id="jednaka">Equal</button>
            <h1 id="ispisIgraca">FIRST PLAYER</h1>
        </div>
        <div id="statistikaJedan" style="display:none">
            <table id="prvaTablica">
                <tr>
                    <h1>
                        <i class="fa fa-desktop" aria-hidden="true"></i> STATISTIC
                    </h1>
                </tr>
                <tr>
                    <td>
                        <p class="statistika" id="tocno">Correct : </p>
                    </td>
                </tr>
            </table>
        </div>

        <div id="statistikaDva" style="display:none">
            <table id="drugaTablica">
                <tr>
                    <h1>
                        <i class="fa fa-desktop" aria-hidden="true"></i> STATISTIC
                    </h1>
                </tr>
                <tr>
                    <th>
                        FIRST PLAYER
                    </th>
                </tr>
                <tr>
                    <td>
                        <p class="statistika" id="tocnoPrvi">
                            </i> Correct : </p>
                    </td>
                </tr>
                <tr>
                    <th>
                        SECOND PLAYER
                    </th>
                </tr>
                <tr>
                    <td>
                        <p class="statistika" id="tocnoDrugi">Correct : </p>
                    </td>
                </tr>
            </table>
        </div>

    </div>

    <div id="footer">
        <p>Kristijan Kelić
            <i class="fa fa-copyright" aria-hidden="true"></i>
            <i class="fa fa-code"></i>
        </p>
        <p>Find me on:
            <a href="https://github.com/THEK7" style="color:white;" target="_blank" title="GitHub">
                <i class="fa fa-github" aria-hidden="true"></i>
            </a>
            <a href="https://codepen.io/THEK7/" style="color:white;" target="_blank" title="CodePen">
                <i class="fa fa-codepen" aria-hidden="true"></i>
            </a>
        </p>
        <p>Contact:
            <a href="mailto:kkelic7@gmail.com">
                <i class="fa fa-envelope" style="color:white" aria-hidden="true"></i>
            </a>
        </p>
    </div>
    <script type="text/javascript" src="cordova.js"></script>
</body>

</html>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/THEK7/biggerless-card-game-zPqMyQ */
/*za sve smo elemente postavili zadani font i box-sizing*/

* {
    box-sizing: border-box;
    font-family: "Source Code Pro", monospace;
}

h1 {
    text-align: center;
}

table tr th td {
    border-collapse: collapse;
    width: 32%;
}

th {
    text-align: left;
    padding-left: 10px;
}


/*CSS selector za element sa danim ID-om #statistikaJedan*/

#statistikaJedan h1,
#statistikaDva h1 {
    background: transparent;
    font-style: italic;
    text-align: left;
    padding: 10px;
    width: 33%;
    display: block;
    float: right;
}

#statistikaJedan,
#statistikaDva {
    padding-top: 38px;
    margin-bottom: 12%;
}


/*Kod statistike jedan, cards remaining je poravnato lijevo, a kod statistika dva
smo stavili na sredinu*/

#ostalo2 {
    text-align: center;
}


/*CSS selector za sve elemente sa klasom statistika, odnosi se na p elemente unutar div statistika*/

.statistika {
    background: transparent;
    text-align: left;
    padding-left: 10px;
}


/*sredili smo buttone*/

button {
    width: 100%;
    padding: 15px 25px;
    text-align: center;
    background-color: green;
    border: 0px;
    outline: none;
    color: white;
    border-radius: 25px;
    box-shadow: 0 5px #999;
    margin-bottom: 15px;
}


/*buttoni posebno za selectat vecu, manju i jednako, velicina uvijek 200px*/

#veca,
#manja,
#jednaka {
    margin: 0px, auto;
    width: 100%;
    font-size: 1vw;
    display: block;
}


/*pseudo-klase za button akcije, hover, active i disabled*/

button:hover {
    background-color: rgb(8, 51, 8);
    color: white;
}

button:active {
    box-shadow: 0 2px #666;
    transform: translateY(4px);
}

button:disabled {
    cursor: not-allowed;
}


/*sredili smo body da bude relativan, i da ima padding-bottom 8rem kako bi footer uvijek bio na dnu
i tako smo izbjegli stanje kada nam footer prelazi preko nekog djela contenta kada se učitaju slika
i buttoni, inače bi nam footer išao preko statistike*/

body {
    background-color: rgb(16, 75, 9);
    color: white;
    margin: 0;
    padding-bottom: 8rem;
    min-height: 100%;
    position: relative;
}

html {
    height: 100%;
    box-sizing: border-box;
}


/*sredili smo div element u kojem se prikazuje karta*/

#prikazKarte {
    margin: 0 auto;
    padding-top: 1rem;
    width: 33%;
    float: left;
    text-align: center;
    display: block;
    text-align: center;
}

#slikaKarte {
    width: 50%;
}

#jedanIgrac {
    width: 33%;
    display: block;
    display: block;
    float: left;
    padding: 2rem;
    margin-top: 5rem;
}


/*div element u kojem se pojavljuju buttoni redosljedom od New Game...New Card*/

#newGame {
    width: 100%;
    text-align: center;
}


/*Glavni div element u kojem je smješteno sve*/

#aplikacija {
    margin: 0 auto;
    padding: 2rem;
    width: 100%;
    min-height: 100%;
}


/*footer u kojem se nalazi ime autora, i kontakt podaci*/

#footer {
    background: linear-gradient(black, green);
    font-family: "Source Code Pro", monospace;
    font-size: 0.8rem;
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    /*padding: 1rem;*/
    text-align: center;
    color: white;
}

.popup {
    position: relative;
    margin: 0 auto;
    display: block;
    cursor: pointer;
    width: 100%;
}

.popup .popuptext {
    visibility: hidden;
    width: 100%;
    background-color: rgb(1, 44, 2);
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px 0;
    display: none;
    z-index: 1;
    margin: 0px auto;
    margin-top: 10px;
}

.popup .show {
    visibility: visible;
    display: block;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s
}

@media all and (max-width: 780px) {
    #jedanIgrac {
        width: 50%;
        float: right;
        display: block;
        padding-top: 0px;
    }
    #prikazKarte {
        width: 50%;
        float: left;
        display: block;
    }
    #statistikaJedan h1,
    #statistikaDva h1 {
        width: 100%;
        font-size: 3vw;
        display: block;
        clear: both;
    }
    .statistika {
        font-size: 4vw;
    }
    table {
        position: relative;
        clear: both;
    }
    .popup .popuptext {
        margin: 0px auto;
        margin-top: 20px;
        left: 0%;
    }
    .popup {
        width: 100%;
    }
    #slikaKarte {
        width: 75%;
    }
    #veca,
    #manja,
    #jednaka {
        font-size: 4vw;
        margin-bottom: 5%;
        margin-top: 5px;
        padding: 10px;
    }

    #ispisIgraca{
        font-size: 4vw;
    }
}


/*Downloaded from https://www.codeseek.co/THEK7/biggerless-card-game-zPqMyQ */
/*Setup game-a, prikazujemo samo jedan button, te klikom na njega biramo između
igre s jednim ili dva igrača*/


/* niz vrijednosti karata */
var nizKarata = ["2","3","4","5","6","7","8","9","10","JACK","QUEEN","KING","ACE"];

var stara;
var nova;
var slikaNova;


/*varijabla koja nam služi kao okidač, provjerava o koliko je igrača riječ, ako je o jednom 
drugačiji je poredak elemenata nego za dva igrača i ovisno o tome prikazujemo određeno*/
var jedan;

/*varijabla koja služi za određivanje kojeg igrača je red za igrat*/
var prvi = true;



/*prilikom učitavanja aplikacije, tj. kad uređaj bude spreman, poziva se metoda postavi*/
window.onload = function()
{
    document.addEventListener("deviceready", postavi);
    postavi();
};

//metoda postavlja eventHandlere za događaj click na button-e sa id setup i igrac
function postavi()
{
    document.getElementById("setup").addEventListener("click", novaIgra);
    document.getElementById("igrac").addEventListener("click", jedanIgrac);
    document.getElementById("dvaigraca").addEventListener("click", dvaIgraca);
    document.getElementById("veca").addEventListener("click", function () { vecaKarta(stara, nova); });
    document.getElementById("manja").addEventListener("click", function () { manjaKarta(stara, nova); });
    document.getElementById("jednaka").addEventListener("click", function () { jednakaKarta(stara, nova); });
    
}

function popUp(){
    var pp =document.getElementById("myPopup");
    pp.classList.toggle("show");
}


//metoda koja se poziva kada se klikne button Nova Igra, učitava nova 2 botuna, a sakriva Nova Igra
function novaIgra()
{
    document.getElementById("igrac").style.display = "block";
    document.getElementById("dvaigraca").style.display = "block";
    document.getElementById("setup").style.display = "none";
}

/*metoda koja se poziva ako se klikne novoučitani button Jedan Igrač, ona učitava novi button
i postavlja eventHandlere za nova dva buttona koja će se pojaviti*/
function jedanIgrac()
{
    document.getElementById("prikazKarte").style.display = "block";
    document.getElementById("igrac").style.display = "none";
    document.getElementById("dvaigraca").style.display = "none";
    jedan = true;
    document.getElementById("ispisIgraca").innerHTML = "";
    dohvatiSpil();
}

function dvaIgraca()
{
    document.getElementById("prikazKarte").style.display = "block";
    document.getElementById("ispisIgraca").innerHTML = "FIRST PLAYER";
    document.getElementById("igrac").style.display = "none";
    document.getElementById("dvaigraca").style.display = "none";
    jedan = false;
    dohvatiSpil();
}




//globalna varijabla za ID špila

//var spilID;

/*kada smo jedan put pribavili špilID, da ne opterećujemo server sa stalnim zahtjevima
koristit ćemo ovaj dobijeni. Nakon nekog vremena kada se on izbriše potrebno je samo odkomentirat
gornju deklaraciju varijable spilID te ponovno pribavit ID, potom je opet zakomentirat a dobivenu spremit
u istu varijablu na način var spilID = "dobiveniID"*/
var spilID;


//varijable u koje spremamo score
var score = 0;
var score2 = 0;


//Metoda koja šalje XML request serveru kako bi dobili novi špil
function dohvatiSpil() {
    if (spilID === undefined) {
        var zahtjevSpil = new XMLHttpRequest();
        zahtjevSpil.onreadystatechange = function(){
            if(this.readyState == 4 && this.status == 200){
                obradiSpil(this);
            }
        };
        zahtjevSpil.open('GET', 'https://deckofcardsapi.com/api/deck/new/shuffle/', true);
        zahtjevSpil.send();
    }
}

//Metoda koja obrađuje novodobiveni špil
function obradiSpil(zahtjev) {
    var podaci = JSON.parse(zahtjev.responseText);
    spilID = podaci.deck_id;
    dohvatiKartu();
}


//Metoda koja dohvaća kartu sa servera
function dohvatiKartu() {
    var zahtjevKarta = new XMLHttpRequest();
    zahtjevKarta.onreadystatechange = function(){
        if(this.readyState == 4 && this.status ==200){
            obradiKartu(this);
        }
    };
    zahtjevKarta.open("GET", "https://deckofcardsapi.com/api/deck/" + spilID + "/draw/?count=2", true);
    zahtjevKarta.send();


    /*postavljamo div element u kojem se prikazuje karta i ostali sadržaj
    da se pojavi display = "block" kako bismo vidjeli kartu i statistiku*/

    document.getElementById("jedanIgrac").style.display = "block";
    document.getElementById("veca").disabled = false;
    document.getElementById("manja").disabled = false;
    document.getElementById("jednaka").disabled = false;

    /*provjeravamo koliko igrača igra i ovisno o tome prikazujemo elemente*/
    if(jedan == true){
        document.getElementById("statistikaJedan").style.display = "block";
    }
    else{
        document.getElementById("statistikaDva").style.display = "block";      
    }
}

//Metoda koja provjerava da li je uspješno pribavljen request i obrađuje dobivene podatke za prikaz karte
function obradiKartu(zahtjev) {
    var podaci = JSON.parse(zahtjev.responseText);
    document.getElementById("ostalo").innerHTML = "Remaining cards: " + (podaci.remaining);

    if (podaci.remaining == 0) {
        if(jedan == false){
            if(score > score2){
                window.alert("PLAYER 1 WON");
            }
            else if(score2 > score){
                window.alert("PLAYER 2 WON");
            }
            else{
                window.alert("DRAW");
            }
            score = 0;
            score2 =0;
            document.getElementById("tocnoPrvi").innerHTML = "Correct: " + score;
            document.getElementById("tocnoDrugi").innerHTML = "Correct: " + score2;
        }
        ponovnoPromjesaj();         
    }
    else {
        //spremamo vrijednosti dobiveni podataka u varijable radi daljnjeg korištenja
        var slikaKarte = podaci.cards[0].image;

        stara = podaci.cards[0].value;
        nova = podaci.cards[1].value;

        slikaNova = podaci.cards[1].image;
        
        document.getElementById("slikaKarte").src = slikaKarte;
    }
    
}


//Metoda koja služi da se špil nanovo promješa kada se istroše 52 karte
function ponovnoPromjesaj() {
    zahtjevKarta = new XMLHttpRequest();
    zahtjevKarta.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
            obradiKartu(this);
        }
    };
    zahtjevKarta.open("GET", "https://deckofcardsapi.com/api/deck/" + spilID + "/shuffle/", true);
    zahtjevKarta.send();
}




function vecaKarta(prva, druga) {
    if (jedan == true) {
        if (nizKarata.indexOf(prva) < nizKarata.indexOf(druga)) {
            score = score + 1;
        }

        document.getElementById("tocno").innerHTML = "Correct: " + score;
        document.getElementById("slikaKarte").src = slikaNova;
    }
    else {
        if (prvi == true) {
            if (nizKarata.indexOf(prva) < nizKarata.indexOf(druga)) {
                score = score + 1;
            }
            document.getElementById("tocnoPrvi").innerHTML = "Correct: " + score;
            prvi = false;
            document.getElementById("slikaKarte").src = slikaNova;
            if (prvi == true) {
                document.getElementById("ispisIgraca").innerHTML = "FIRST PLAYER";
            }
            else {
                document.getElementById("ispisIgraca").innerHTML = "SECOND PLAYER";
            }
        }
        else {
            if (nizKarata.indexOf(prva) < nizKarata.indexOf(druga)) {
                score2 = score2 + 1;
            }
            document.getElementById("tocnoDrugi").innerHTML = "Correct: " + score2;
            prvi = true;
            document.getElementById("slikaKarte").src = slikaNova;
            if (prvi == true) {
                document.getElementById("ispisIgraca").innerHTML = "FIRST PLAYER";
            }
            else {
                document.getElementById("ispisIgraca").innerHTML = "SECOND PLAYER";
            }
        }
    }
    document.getElementById("veca").disabled = true;
    document.getElementById("manja").disabled = true;
    document.getElementById("jednaka").disabled = true;
    setTimeout(dohvatiKartu, 2500);
}

function manjaKarta(prva, druga) {
    if (jedan == true) {
        if (nizKarata.indexOf(prva) > nizKarata.indexOf(druga)) {
            score = score + 1;
        }

        document.getElementById("tocno").innerHTML = "Correct: " + score;
        document.getElementById("slikaKarte").src = slikaNova;
    }
    else {
        if (prvi == true) {
            if (nizKarata.indexOf(prva) > nizKarata.indexOf(druga)) {
                score = score + 1;
            }
            document.getElementById("tocnoPrvi").innerHTML = "Correct: " + score;
            prvi = false;
            document.getElementById("slikaKarte").src = slikaNova;
            if (prvi == true) {
                document.getElementById("ispisIgraca").innerHTML = "FIRST PLAYER";
            }
            else {
                document.getElementById("ispisIgraca").innerHTML = "SECOND PLAYER";
            }
        }
        else {
            if (nizKarata.indexOf(prva) > nizKarata.indexOf(druga)) {
                score2 = score2 + 1;
            }
            document.getElementById("tocnoDrugi").innerHTML = "Correct: " + score2;
            prvi = true;
            document.getElementById("slikaKarte").src = slikaNova;
            if (prvi == true) {
                document.getElementById("ispisIgraca").innerHTML = "FIRST PLAYER";
            }
            else {
                document.getElementById("ispisIgraca").innerHTML = "SECOND PLAYER";
            }
        }
    }
    document.getElementById("veca").disabled = true;
    document.getElementById("manja").disabled = true;
    document.getElementById("jednaka").disabled = true;
    setTimeout(dohvatiKartu, 2500);
}

function jednakaKarta(prva, druga) {
    if (jedan == true) {
        if (nizKarata.indexOf(prva) == nizKarata.indexOf(druga)) {
            score = score + 1;
        }

        document.getElementById("tocno").innerHTML = "Correct: " + score;
        document.getElementById("slikaKarte").src = slikaNova;
    }
    else {
        if (prvi == true) {
            if (nizKarata.indexOf(prva) == nizKarata.indexOf(druga)) {
                score = score + 1;
            }
            document.getElementById("tocnoPrvi").innerHTML = "Correct: " + score;
            prvi = false;
            document.getElementById("slikaKarte").src = slikaNova;
            if (prvi == true) {
                document.getElementById("ispisIgraca").innerHTML = "FIRST PLAYER";
            }
            else {
                document.getElementById("ispisIgraca").innerHTML = "SECOND PLAYER";
            }
        }
        else {
            if (nizKarata.indexOf(prva) == nizKarata.indexOf(druga)) {
                score2 = score2 + 1;
            }
            document.getElementById("tocnoDrugi").innerHTML = "Correct: " + score2;
            prvi = true;
            document.getElementById("slikaKarte").src = slikaNova;
            if (prvi == true) {
                document.getElementById("ispisIgraca").innerHTML = "FIRST PLAYER";
            }
            else {
                document.getElementById("ispisIgraca").innerHTML = "SECOND PLAYER";
            }
        }
    }
    document.getElementById("veca").disabled = true;
    document.getElementById("manja").disabled = true;
    document.getElementById("jednaka").disabled = true;
    setTimeout(dohvatiKartu, 2500);
}

Comments