لعبة Domino ب javascript


فهاد الدرس الجديد من سلسلة javascript غادي نشوفو كيفاش نقادو واحد اللعبة بسيطة لعبة دومينو المستخدم كيدخل القيمة لي غادي يربح يلا وصلها وكيبقى يرمي ف les dominos واللعاب لي طاح فواحد مرة أو ستة جوج مرات كيخسر ال score ديالو اللعاب يمكنلو ي garder ال score لي جمع وكيتزاد عليه حتى كيربح.

نظرة سريعة بالفيديو

1- الملف header.php

اول حاجة غادي تمشي ل wamp/www أو xampp/htdocs وغادي تزيد مجلد جديد تسميه domino-jscript بعد غادي تزيد ملف تسميه header.php فيه الكود لي كيمكن من الربط مع ملفات css لي غادي نحتاجو الكود ديالو هو :

                                <!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="UTF-8">
        <link href="https://fonts.googleapis.com/css?family=Lato:100,300,600" rel="stylesheet" type="text/css">
        <link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css">
        <link type="text/css" rel="stylesheet" href="style.css">
        <title>Domino</title>
    </head>
    <body>
                            

2- الملف footer.php

من بعد غادي تزيد ملف تسميه footer.php فيه الكود لي كيمكن من الربط مع ملف javascript لي غادي نزيدو من بعد و لي غادي نحتاجو الكود ديالو هو :

                                        <script src="app.js"></script>
    </body>
</html>
                            

3- الملف index.php

من بعد غادي تزيد ملف تسميه index.php لي هو الصفحة الرئيسية ديالنا ولي فيه l'interface html ولي فيها الأسماء ديال les joueurs و score ديالهم وكل واحد منهم عندو واحد لid خاص به هو باش غادي نسترجعوهم فملف javascript وكاين les boutons لي كيمكنونا من اللعب وتخزين النتيجة ديالنا ولي حتى هما عندهم id خاص بهم هو باش غادي نسترجعوهم فملف javascript وكنزيدو ل header ديالنا هو ولfooter فالصفحة الرئيسية الكود ديال الملف هو :

                                <?php include('header.php');?>
    <div class="wrap clearfix">
        <div class="joueur-0-panel active" id="joueur-0-panel">
            <div class="joueur-nom" id="nom-0">Joueur 1</div>
            <div class="joueur-score" id="score-0">43</div>
            <div class="joueur-gain-box">
                <div class="joueur-gain-label">Gains</div>
                <div class="joueur-gain-score" id="gain-0">11</div>
            </div>
            <div class="form-group">
                <input type="number" class="form-controller" id="value-0" value="0" placeholder="Entrer une valeur">
            </div>
        </div>
        <div class="joueur-1-panel" id="joueur-1-panel">
            <div class="joueur-nom" id="nom-1">Joueur 2</div>
            <div class="joueur-score" id="score-1">72</div>
            <div class="joueur-gain-box">
                <div class="joueur-gain-label">Gains</div>
                <div class="joueur-gain-score" id="gain-1">0</div>
            </div>
            <div class="form-group">
                <input type="number" class="form-controller" id="value-1" value="0" placeholder="Entrer une valeur">
            </div>
        </div>
        <button class="btn-nouveau" id="btn-nouveau"><i class="ion-ios-plus-outline"></i>Nouveau Jeu</button>
        <button class="btn-rouler" id="btn-rouler"><i class="ion-ios-loop"></i>Rouler les dés</button>
        <button class="btn-recolter" id="btn-recolter"><i class="ion-ios-download-outline"></i>Récolter</button>
        <img src="dice-5.png" alt="des" class="domino" id="domino">
    </div>
<?php include('footer.php');?>
                            

4- الملف style.css

من بعد غادي تزيد ملف تسميه style.css غادي يكون فيه كود ديال css لي غادي يمكنا باش نزيدو des styles css للصفحة الرئيسية ديالنا الكود النهائي ديالو هو :

                                    * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    
}

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

body {
    background-image: #C9C9C9;
    background-size: cover;
    background-position: center;
    font-family: Lato;
    font-weight: 300;
    position: relative;
    height: 100vh;
    color: #555;
}

.wrap {
    width: 1000px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    box-shadow: 0px 10px 50px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.joueur-0-panel,
.joueur-1-panel {
    width: 50%;
    float: left;
    height: 600px;
    padding: 100px;
}



/**********************************************
*** joueurS
**********************************************/

.joueur-nom {
    font-size: 40px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 100;
    margin-top: 20px;
    margin-bottom: 10px;
    position: relative;
}

.joueur-score {
    text-align: center;
    font-size: 80px;
    font-weight: 100;
    color: #EB4D4D;
    margin-bottom: 130px;
}

.active { background-color: #f7f788; }
.active .joueur-nom { font-weight: 300; }

.active .joueur-nom::after {
    content: "\2022";
    font-size: 47px;
    position: absolute;
    color: #EB4D4D;
    top: -7px;
    right: 10px;
    
}

.joueur-gain-box {
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    width: 40%;
    margin: 0 auto;
    padding: 12px;
    text-align: center;
}

.joueur-gain-label {
    text-transform: uppercase;
    margin-bottom: 10px;
    font-size: 12px;
    color: #FFF;
}

.joueur-gain-score {
    font-size: 30px;
}

button {
    position: absolute;
    width: 200px;
    left: 50%;
    transform: translateX(-50%);
    color: #555;
    background: none;
    border: none;
    font-family: Lato;
    font-size: 20px;
    text-transform: uppercase;
    cursor: pointer;
    font-weight: 300;
    transition: background-color 0.3s, color 0.3s;
}

button:hover { font-weight: 600; }
button:hover i { margin-right: 20px; }

button:focus {
    outline: none;
}

i {
    color: #EB4D4D;
    display: inline-block;
    margin-right: 15px;
    font-size: 32px;
    line-height: 1;
    vertical-align: text-top;
    margin-top: -4px;
    transition: margin 0.3s;
}

.btn-nouveau { top: 45px;}
.btn-rouler { top: 403px;}
.btn-recolter { top: 467px;}

.domino {
    position: absolute;
    left: 50%;
    top: 178px;
    transform: translateX(-50%);
    height: 100px;
    box-shadow: 0px 10px 60px rgba(0, 0, 0, 0.10);
}

.win { background-color: #f7f7f7; }
.win .joueur-nom { font-weight: 300; color: #EB4D4D; }
.form-group{
    margin-top: 10px;
    margin-left: 90px;
}
.form-controller{
    height:50px;
    text-align: center;
    width: 58%;
    color:#222;
}
                                

5- الملف app.js

من بعد غادي تزيد ملف تسميه app.js غادي يكون فيه الكود javascript لي هو الأساس فاولا كنديكلاري les variables لي غادي نحتاج من بعد كنعيط لfoncton init لي كت initialiser كل مكونات l'interface ليهما score و اللاعب الحالي والحقول وles variables لي ديكلاريت منبعد كندير الكود لي كيتنفد مني كنكليكي على لbouton rouler ولي كنسترجعو بل id ديالو أولا كنتحقق واش الحقل ماخاويش القيمة ديالو كنزيدها ف variable منبعد كنcréer رقم عشوائي ما بين 1 و 6 بواسطة ; Math.floor(Math.random()*6)+1 منبعد كنعرض تصويرة الدومينو لي هي par défaut مخفية ولي ل id ديالها فيه واحد الرقم كيكون فبلاصتو الرقم العشوائي لي خلقنا منبعد كن tester يلا كان الرقم العشوائي كيخالف واحد ول variable multipleSix مكتساويش جوج لي هو عدد الستات لي مخصش اللعاب يوصلو كنزيد الرقم العشوائي لل variable roundScore لي كتعرض فالscore الحالي ديال اللاعب مكنش كنعيط للfonction nextPlayer لي كتعاود ت initialiser اللعبة وكتعطي اللعب للاعب الآخر منبعد كاين الكود ملي كيكليكي المستخدم على recolter ولي كتمكنو باش الscore ديالو كيتحفظ ومنبعد كيتزاد عليه وكن tester يلا كان كثر من الرقم لي دخل اللاعب فالحقل كيتعلن رابح مكنش كنعيط للfonction nextPlayer لي كتعطي اللعب للآخر أما الكود ديال ال bouton nouveau ففقط كنعيط لل fonction init لي كتمكن باش نبداو اللعب من جديد الكود النهائي هو :

                                    var scores,roundScore,activePlayer,playing;
init();
document.getElementById('btn-rouler').addEventListener('click',function(){
   playerWiningScore = document.getElementById('value-'+activePlayer).value;
   if(playerWiningScore == ""){
       alert("Veuillez remplir le champ vide");
   }else{
        if(playing){
            var domino = Math.floor(Math.random()*6)+1;
            var desClass = document.getElementById("domino");
            desClass.style.display = 'block';
            desClass.src = 'dice-' + domino + '.png';
            if(domino === 6){
                multipleSix++;
            }
            console.log(multipleSix);
            if(domino !== 1 && multipleSix !== 2){
                roundScore += domino;
                document.getElementById('gain-'+activePlayer).textContent = roundScore;
            }else{
                nextPlayer();
            }
        }
   }
});
document.getElementById('btn-recolter').addEventListener('click',function(){
    if(playing){
        scores[activePlayer] += roundScore;
        document.getElementById('score-'+activePlayer).textContent = scores[activePlayer];
        if(scores[activePlayer] >= playerWiningScore){
            playing = false;
            document.getElementById("nom-" + activePlayer).textContent="Tu as gagné";
            document.getElementById("domino").style.display = 'none';
            document.getElementById("joueur-" + activePlayer +"-panel").classList.add('win');
            document.getElementById("joueur-"+ activePlayer +"-panel").classList.remove('active');
        }else{
            nextPlayer();
        }
    }
});
document.getElementById('btn-nouveau').addEventListener('click',init);
function nextPlayer(){
    activePlayer === 0 ?  activePlayer = 1 : activePlayer = 0;
    roundScore = 0; 
    multipleSix = 0;
    document.getElementById('gain-0').textContent = '0';
    document.getElementById('gain-1').textContent = '0';
    document.getElementById("joueur-0-panel").classList.toggle('active');
    document.getElementById("joueur-1-panel").classList.toggle('active');
    document.getElementById("domino").style.display = 'none';
}
function init(){
    scores = [0,0];
    roundScore = 0;
    activePlayer = 0;
    playing = true;
    playerWiningScore = 0;
    multipleSix = 0;
    document.getElementById('gain-0').textContent = '0';
    document.getElementById('gain-1').textContent = '0';
    document.getElementById('score-0').textContent = '0';
    document.getElementById('score-1').textContent = '0';
    document.getElementById("domino").style.display = 'none';
    document.getElementById('nom-0').textContent = 'joueur 1';
    document.getElementById('nom-1').textContent = 'joueur 2';
    document.getElementById("joueur-0-panel").classList.remove('win');
    document.getElementById("joueur-1-panel").classList.remove('win');
    document.getElementById("joueur-0-panel").classList.remove('active');
    document.getElementById("joueur-1-panel").classList.remove('active');
    document.getElementById("joueur-0-panel").classList.add('active');
    document.getElementById('value-0').value = "";
    document.getElementById('value-1').value = "";
}
                                


بحث في الموقع


إشترك للتوصل بالجديد