لعبة Tic Tac Toe ب Javascript

منذ 5 سنوات imadbelasri Javascript
JS

فهاد الدرس غادي نشوفو كيفاش نقادو واحد اللعبة بسيطة سميتها Tic Tac Toe بإستعمال javascript هاد الدرس مكيتطلبش معرفة واسعة ب javascript أي مبتدئ غادي يقدر يستوعبو بسرعة.


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


- الصفحة الرئيسية وباقي الصفحات

اول حاجة غادي تمشي ل wamp/www وغادي تزيد مجلد جديد تسميه Tic-Tac-Toe من بعد تزيد فيه جوج مجلدات واحد تسميه css والآخر js غادي تقوم بتحميل bootstrap وغادي تزيد الملف bootstrap.min.css ف css والملف bootstrap.min.js ف js من بعد غادي تزيد ملف تسميه header.php و آخر تسميه footer.php وفالآخر تزيد ملف تسميه index.php لي هي الصفحة الرئيسية ديالنا لي غادي يكون الكود ديالها هو :

                                                    
                                                        <?php 
include('header.php');
?>
<div class="container">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <div class="panel panel-default">
                <h1 class="text-center text-primary">Tic Tac Toe</h1>
                <hr>
                <section class="questions-box row">
                    <div class="shouts col-md-8 col-md-offset-2" id="shouts">
                        <ul id="board">
                            <li id="spot1">+</li>
                            <li id="spot2">+</li>
                            <li id="spot3">+</li>
                            <li id="spot4">+</li>
                            <li id="spot5">+</li>
                            <li id="spot6">+</li>
                            <li id="spot7">+</li>
                            <li id="spot8">+</li>
                            <li id="spot9">+</li>
                        </ul>    
                    </div>
                </section>
                <div class="form-group row">
                    <div class="col-md-6 col-md-offset-3"> 
                         <button class="btn btn-default form-control" id="rejouer">Rejouer</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<?php include('footer.php');?>
                                                    
                                                

- header.php

الكود النهائي ديال الملف header.php

                                                        
                                                            <!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Simple Php Chat Box</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/styles.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
                                                        
                                                    

- footer.php

الكود النهائي ديال الملف footer.php

                                                        
                                                            <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    <script src="js/script.js"></script>
  </body>
</html>
                                                        
                                                    

- style.css

فاالمجلد css غادي نزيد واحد الملف ونسميه style.css غادي يكون فيه كود ديال css الكود النهائي ديالو هو :

                                                        
                                                            body{
    background:#000;
}
.panel{
    margin-top:100px;
    box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
}
.panel-footer{
    margin-bottom: 20px;
}
div.shouts ul li{
    list-style-type: none;
    float: left;
    text-align: center;
    margin : 10px auto;
    display: inline-block;
    background-color:  rgba(0, 0, 0, 0.5);
    font-size: 55px;
    margin: 10px;
    width:70px;
    height: 70px;
    border-radius: 5px;
    color:#FFF;
}
div.shouts ul li:hover{
   cursor: pointer;
   background: #000;
}
.btn-default{
    background: rgba(0, 0, 0, 0.8);
    color:#FFF;
}
.o{
    color:green !important;
}
.x{
    color:red !important;
}

                                                        
                                                    

- script.js

آخر ملف غادي نزيدوه هو script.js فالمجلد js هاد الملف هو لي غادي يكون فيه الكود ديال اللعبة ولي غادي يعرض النتائج والفائز الكود النهائي ديالو هو :

                                                        
                                                            $(document).ready(function(){
    var x = 'x';
    var o = 'o';
    var turns = 0;
    var spot1 = $('#spot1');
    var spot2 = $('#spot2');
    var spot3 = $('#spot3');
    var spot4 = $('#spot4');
    var spot5 = $('#spot5');
    var spot6 = $('#spot6');
    var spot7 = $('#spot7');
    var spot8 = $('#spot8');
    var spot9 = $('#spot9');
    $('#board li').on('click',function(e){
        if( spot1.hasClass('o') && spot2.hasClass('o') && spot3.hasClass('o') ||
            spot4.hasClass('o') && spot5.hasClass('o') && spot6.hasClass('o') ||
            spot7.hasClass('o') && spot8.hasClass('o') && spot9.hasClass('o') ||
            spot1.hasClass('o') && spot4.hasClass('o') && spot7.hasClass('o') ||
            spot2.hasClass('o') && spot5.hasClass('o') && spot8.hasClass('o') ||
            spot3.hasClass('o') && spot6.hasClass('o') && spot9.hasClass('o') ||
            spot1.hasClass('o') && spot5.hasClass('o') && spot9.hasClass('o') ||
            spot3.hasClass('o') && spot5.hasClass('o') && spot7.hasClass('o') 
        ){
            alert('o a gagné!');
            $('#board li').removeClass('disable');
            $('#boardl li').removeClass('o');
            $('#board li').removeClass('x');
            $('#board li').text('+');
        }else if( spot1.hasClass('x') && spot2.hasClass('x') && spot3.hasClass('x') ||
                spot4.hasClass('x') && spot5.hasClass('x') && spot6.hasClass('x') ||
                spot7.hasClass('x') && spot8.hasClass('x') && spot9.hasClass('x') ||
                spot1.hasClass('x') && spot4.hasClass('x') && spot7.hasClass('x') ||
                spot2.hasClass('x') && spot5.hasClass('x') && spot8.hasClass('x') ||
                spot3.hasClass('x') && spot6.hasClass('x') && spot9.hasClass('x') ||
                spot1.hasClass('x') && spot5.hasClass('x') && spot9.hasClass('x') ||
                spot3.hasClass('x') && spot5.hasClass('x') && spot7.hasClass('x') 
        ){
            alert('x a gagné!');
            $('#board li').removeClass('disable');
            $('#board li').removeClass('o');
            $('#board li').removeClass('x');    
            $('#board li').text('+');
        }else if(turns == 9){
            alert('égalité!');
            $('#board li').removeClass('disable');
            $('#board li').removeClass('o');
            $('#board li').removeClass('x');  
            $('#board li').text('+'); 
        }else if($(this).hasClass('disabled')){
            alert('cette case est déja remplie!');
        }else if(turns%2 == 0){
            turns++;
            $(this).text(o);
            $(this).addClass('disabled o');
            if( spot1.hasClass('o') && spot2.hasClass('o') && spot3.hasClass('o') ||
                spot4.hasClass('o') && spot5.hasClass('o') && spot6.hasClass('o') ||
                spot7.hasClass('o') && spot8.hasClass('o') && spot9.hasClass('o') ||
                spot1.hasClass('o') && spot4.hasClass('o') && spot7.hasClass('o') ||
                spot2.hasClass('o') && spot5.hasClass('o') && spot8.hasClass('o') ||
                spot3.hasClass('o') && spot6.hasClass('o') && spot9.hasClass('o') ||
                spot1.hasClass('o') && spot5.hasClass('o') && spot9.hasClass('o') ||
                spot3.hasClass('o') && spot5.hasClass('o') && spot7.hasClass('o') 
            ){
                alert('o a gagné!');
                turns = 0;
            }
        }else{
            turns++;
            $(this).text(x);
            $(this).addClass('disabled x');
            if( spot1.hasClass('x') && spot2.hasClass('x') && spot3.hasClass('x') ||
                spot4.hasClass('x') && spot5.hasClass('x') && spot6.hasClass('x') ||
                spot7.hasClass('x') && spot8.hasClass('x') && spot9.hasClass('x') ||
                spot1.hasClass('x') && spot4.hasClass('x') && spot7.hasClass('x') ||
                spot2.hasClass('x') && spot5.hasClass('x') && spot8.hasClass('x') ||
                spot3.hasClass('x') && spot6.hasClass('x') && spot9.hasClass('x') ||
                spot1.hasClass('x') && spot5.hasClass('x') && spot9.hasClass('x') ||
                spot3.hasClass('x') && spot5.hasClass('x') && spot7.hasClass('x') 
            ){
                alert('x a gagné!');
                turns = 0;
            }
        }
    });
     //REJOUER
    $('#rejouer').click(function(){
       location.reload();
    });
});
                                                        
                                                    

دروس ذات صلة

JS

كيفاش نصاوب إختبار بإستعمال Javascript

فهاد الدرس الاول من سلسلة javascript غادي نشوفو كيفاش نقادو واحد المشروع لي عبارة عن إختبار ديال الأ...


JS

لعبة Tic Tac Toe ب Javascript

فهاد الدرس غادي نشوفو كيفاش نقادو واحد اللعبة بسيطة سميتها Tic Tac Toe بإستعمال javascript هاد الدرس...


JS

كيفاش تصاوب تطبيق صرف عملات بإستخدام JSON

فهاد الدرس الجديد غادي نشوفو كيفاش نصوبو واحد التطبيق بسيط لي كيعرض سعر صرف العملات فمثلا المستخدم ك...


JS

كيفاش تصاوب تطبيق كيحسب مؤشر كتلة الجسم بإستخدام JSON

فهاد الدرس غادي نقومو بالبرمجة ديال واحد لAPI بسيط كيمكن من حساب كتلة الجسم من بعد ما كيستقبل الوزن...


JS

لعبة Domino ب javascript

فهاد الدرس الجديد من سلسلة javascript غادي نشوفو كيفاش نقادو واحد اللعبة بسيطة لعبة دومينو المستخدم...


JS

كيفاش تصاوب jeu de math ب javascript

فهاد الدرس الجديد من سلسلة javascript غادي نشوفو كيفاش نقادو واحد اللعبة بسيطة سميتها jeu de math لي...


JS

application كتحسب المسافة بين المدن ب html & css & javascript

فهاد الدرس الجديد من سلسلة javascript غادي نشوفو كيفاش نقادو واحد ل application كتحسب المسافة مابين...


JS

برمج ساعة باستعمال javascript

فهاد الدرس الجديد من سلسلة javascript غادي نشوفو كيفاش نبرمجو ساعة فالساعة غادي تكون كتعرض الوقت الح...


JS

كيفاش تسجل المعلومات فل local storage ديال navigateur

فهاد الدرس الجديد من سلسلة javascript غادي نشوفو كيفاش تسجل المعلومات فل local storage ديال nav...


JS

ألة حاسبة للمبتدئين ب javascript

فهاد الدرس الجديد من سلسلة javascript غادي نشوفو كيفاش نقادو آلة حاسبة للمبتدئين لي غادي تمكن من الق...