DiceX

Un joc simplu cu zaruri, recurgând la jQuery și random.org. A simple dice game, using jQuery and random.org.

HTML

<body>
    <article class="continut" id="top">
        <header class="h">
            <h1>DiceX</h1>
        </header>
        <div>
            <!-- legatura care conduce la redarea regulilor jocului, doar daca mouse-ul e plasat pe textul 'Reguli' -->
            
<h6 class="menu right"><a href="#" onmouseover="joc.redaReguli(true);" onmouseout="joc.redaReguli(false);">Reguli</a></h6>

            <!-- initial, regulile jocului sunt ascunse -->
            <div id="ajutor" class="text">Regulile jocului <em>DiceX</em> sunt simple: "arunci" cele 2 zaruri &#351;i c&acirc;&#351;tigi 10 tuc&#351;i numai dac&#259; suma punctelor ob&#355;inute este mai mare de 7. Uneori, pot ap&#259;rea surprize... <strong>Mult&#259; baft&#259;!</strong>
            </div>
            <!-- interactiunea propriu-zisa cu utilizatorul, adica apasarea butonului care va cauza invocarea metodei 'aruncaZaruri()' ce declanseaza 'actiunea' jocului -->
            <div class="actiune">
                <input value="Arunc&#259; zarurile!" type="button" title="Apas&#259; pentru aruncarea zarurilor" onclick="joc.aruncaZaruri();" />
            </div>
            <!-- acest <div> va contine starea curenta a fiecarui zar -->
            <div class="zaruri">	<span id="zar1"><!-- initial, vid --></span>
	<span id="zar2"><!-- initial, vid --></span>

            </div>
            <!-- acest <div> va include scorul acumulat de jucator -->
            <div class="scor" id="scor" title="Scorul curent">Apas&#259; butonul pentru a &icirc;ncepe joaca.</div>
        </div>
        <footer></footer>
    </article>

CSS

/* Foaie de stiluri CSS folosita la redarea interfetei jocului DiceX 
 * 
 * Autor: Sabin-Corneliu Buraga -- http://www.purl.org/net/busaco
 * Ultima actualizare: 21 august 2014
 * */
 * {
    margin: 0;
}
body {
    font-family: sans-serif;
    color: #333;
    background: #EEE;
    margin: 0;
    font-size: 1em;
}
.continut {
    width: 30em;
    margin: 0px auto;
}
h1 {
    font-family: sans-serif;
    font-weight: bold;
    font-size: 20pt;
    color: #F30;
    text-align: center;
}
h6 {
    font-size: 10pt;
    padding-top: 0.3em;
    padding-bottom: 0.3em;
}
p, div {
    line-height: 1.3;
    margin-top: 0.6em;
    margin-bottom: 0.6em;
    font-family: Georgia, serif;
    font-size: 1em;
}
input {
    background: blue;
    border: 0;
    padding: 0.3em;
    color: white;
    font-size: 1.3em;
}
input:hover {
    background: #F30;
}    
}
a:visited {
    color: black;
}
a:hover {
    color: #F30;
    text-decoration: none;
}
a {
    font-family: sans-serif;
    font-weight: bold;
    text-decoration: underline;
    color: black;
}
.right {
    text-align: right;
}
.h {
    padding: 1em;
}
.text {
    background: #FF9;
    color: #000;
    font-size: 1em;
    font-family: Arial, Helvetica, sans-serif;
    padding: 0.2em;
    border-style: solid;
    border-width: 0.1em;
    border-color: #000;
}
#ajutor {
    margin: 0.3em;
}
.actiune {
    margin-top: 2em;
    margin-bottom: 3em;
    text-align: center;
}
.scor {
    font-size: 1.1em;
    font-family: Georgia, serif;
    text-align: center;
    margin-top: 1em;
}
.zaruri {
    width: 10em;
    height: 2em;
    margin: 0 auto;
    text-align: center;
}
#zar1, #zar2 {
    margin: 0.1em;
    padding: 0.2em;
    font-size: 2em;
    font-family: sans-serif;
    font-weight: 900;
    background: #FF9;
    color: #333;
}

JavaScript

/**
 * Implementeaza un joc simplu cu 2 zaruri
 * @author Sabin-Corneliu Buraga -- http://www.purl.org/net/busaco
 */
$(function () { // cod rulat atunci cand browser-ul e pregatit de interactiune
    $("div#ajutor").hide (); // initial, textul de ajutor nu e afisat
    $("#zar1").hide (); // initial, nu sunt afisate valorile...
    $("#zar2").hide (); // ...zarurilor (nu au fost inca 'aruncate')
});

function Zar (valoareZar) { // 'clasa' privitoare la managementul unui zar
    /* proprietati */
    this.valoareZar = valoareZar; // valoarea curenta a zarului
    /* metode */
    this.obtineZar = function () { // furnizeaza valoarea curenta a zarului
        return this.valoareZar;
    };
    this.aruncaZar = function () { // simuleaza actiunea de 'aruncare' a zarului		
        // varianta apeland serviciul Web oferit de random.org
        var rezultat;
        $.ajax ({
            'url': 'http://www.random.org/integers/?num=1&min=1&max=6&base=10&col=1&format=plain&rnd=new',
            'async': false, // transfer sincron (de ce?)
            'success': function (date) {
                rezultat = date;
            }
        }).fail (function () {
            // apelul a esuat, semnalam la consola acest aspect
            console.log ('Cererea nu a putut fi satisfacuta de random.org');
            // ...si calculam valoarea zarului in mod clasic
            rezultat = Math.round (Math.random () * 5) + 1;
        });
        return this.valoareZar = parseInt (rezultat, 10);
    };
}

function Joc (scorInitial) { // clasa referitoare la implementarea jocului
    /* proprietati */
    this.scorCurent = scorInitial; // scorul curent
    this.zar1 = new Zar (0); // instantele celor 2 zaruri
    this.zar2 = new Zar (0);
    /* metode */
    this.aruncaZaruri = function () { // actiunea de 'aruncat' zarurile
        if (this.zar1.aruncaZar () + this.zar2.aruncaZar () > 7) {
            this.scorCurent += 10; // incrementarea scorului daca survine norocul
        }
    ...