لعبة Tic Tac Toe ب Javascript


فهاد الدرس غادي نشوفو كيفاش نقادو واحد اللعبة بسيطة سميتها 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();
    });
});
                                


إشترك في قناتنا على اليوتيوب

بحث في الموقع


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