Создайте игру в крестики-нолики с помощью jQuery

Опубликовано: 6 Января, 2022

В этом посте мы собираемся реализовать крестики-нолики для двух игроков с помощью jQuery. Его довольно легко разработать с помощью простых проверок и проверок ошибок. Игрок-1 начинает игру, и оба игрока делают ходы по очереди. Игрок, собравший прямую цепочку из 3 блоков, побеждает в игре. Здесь мы будем реализовывать эту игру во внешнем интерфейсе, используя только простую логику и проверки достоверности.

Предварительные требования: базовые знания некоторых интерфейсных технологий, таких как HTML, CSS, jQuery и Bootstrap.

Разработка макета: Прежде всего, мы разработаем макет сетки 3 * 3 и применим к нему некоторые эффекты CSS. Также должен отображаться текст, показывающий ход игрока. Он также должен содержать кнопку для сброса игры, когда это необходимо.

HTML-код:

 <!DOCTYPE html>
 < html lang = "en" >
 
< head >
    < meta charset = "utf-8" />
    < meta http-equiv = "X-UA-Compatible" content = "IE=edge, chrome=1" />
 
    < script src =
 " https://code.jquery.com/jquery-3.4.1.slim.min.js " >
    </ script >
    < link rel = "stylesheet" href =
 " https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css " >
    < script src =
 " https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js " >
    </ script >
    < link rel = "stylesheet" href =
 " https://use.fontawesome.com/releases/v5.7.0/css/all.css "
          integrity =
 "sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ"
          crossorigin = "anonymous" >
 
</ head >
 
< body >
   
    <!-- Heading -->
    < div class = "container-fluid text-center" >
        < h1 style = "color: white;" >TIC-TAC-TOE</ h1 ></ div >
    < br >
    < br >
    < div class = "container-fluid text-center" >
       
        <!-- Inform area for player's turn -->
        < h4 id = "screen" style = "color: white;" >
          PLAYER 1 TURN FOLLOWS
        </ h4 >
    </ div >
    < br >
    < div class = "container-fluid" >
        < div class = "row" >
            < div class = "col-lg-4" > </ div >
            < div class = "col-lg-4" >
                <!-- Playing Canvas -->
                < center >
                    < table >
                        < tr >
                            < td colspan = "3" >
                        </ tr >
                        < tr >
                            < td >
                                < button class = "sq1 r" ></ button >
                            </ td >
                            < td >
                                < button class = "sq2 r" ></ button >
                            </ td >
                            < td >
                                < button class = "sq3 r" ></ button >
                            </ td >
                        </ tr >
                        < tr >
                            < td >
                                < button class = "sq4 r" ></ button >
                            </ td >
                            < td >
                                < button class = "sq5 r" ></ button >
                            </ td >
                            < td >
                                < button class = "sq6 r" ></ button >
                            </ td >
                        </ tr >
                        < tr >
                            < td >
                                < button class = "sq7 r" ></ button >
                            </ td >
                            < td >
                                < button class = "sq8 r" ></ button >
                            </ td >
                            < td >
                                < button class = "sq9 r" ></ button >
                            </ td >
                        </ tr >
                    </ table >
                    < br >
                    < br >
                   
                    <!-- Reset button for Game -->
                    < input type = "button"
                           class = "reset btn btn-lg btn-danger btn-block"
                           value = "RESET" onClick = "reset()" />
                </ center >
            </ div >
            < div class = "col-lg-4" > </ div >
        </ div >
    </ div >
 </ body >
 
</ html > 

Код CSS:

 <!-- Applying CSS Properties -->
 <style>
    body {
        background-color : #000000 ;
    }
 
    button {
        height : 80px ;
        width : 80px ;
        background-color : white ;
        border : 0px transparent ;
        border-radius: 50% ;
        margin : 4px ;
        padding : 4px ;
    }
 
    .fa {
        font-size : 48px ;
        color : black ;
    }
 
    .reset {
        padding : 8px ;
    }
 
    .reset:hover {
        opacity: 0.8 ;
    }
 
</style>

Выход:

Реализация логики: Теперь нам нужно реализовать следующие шаги в нашем основном коде для имитации логики игры в крестики-нолики.

Последовательные ходы игроков: последовательные ходы следуют после того, как первый игрок сделает свой ход. Также следует соответствующим образом обновить текст, уведомляющий об очереди игрока.

 <!-- Consecutive player Turns -->
 <script>
 
// Flag variable for checking Turn
 // We'll be modifying our base logic in the
 // next steps as per requirements
 var turn = 1;
 
$( "button" ).click( function () {
    if (turn == 1) {
        $( "#screen" ).text( "PLAYER 2 TURN FOLLOWS" );
  
    // Check sign font from font-awesome
    $( this ).addClass( "fa fa-check" );
        turn = 2;
    }
    else {
        $( "#screen" ).text( "PLAYER 1 TURN FOLLOWS" );
      
        // Cross sign font from font-awesome
        $( this ).addClass( "fa fa-times" );
        turn = 1;
    }
 });
 </script>

Отметить / уведомить о недопустимых ходах: Кроме того, мы должны убедиться, что игрок на ходу не должен делать недопустимые ходы. Для этого мы проверим, не используется ли уже нажатая кнопка другим классом шрифтов в процессе. Если он уже отмечен шрифтом, отметьте ход недействительным на короткий промежуток времени.

 <!-- Script for checking any invalid moves -->
 $( "button" ).click( function () {
    if ($( this ).hasClass( "fa fa-times" ) ||
            $( this ).hasClass( "fa fa-check" ))
    {
        $( this ).css( "background-color" , "red" );
        setTimeout(() => {
            $( this ).css( "background-color" , "white" );
        }, 800);
    }
 });

Проверка на выигрышные ходы: мы разработаем функцию, которая будет проверять, заполнил ли игрок сетку или нет. Для этого нам нужно проверить 8 выигрышных конфигураций плеера. Мы отправим класс шрифта в функцию для проверки.

 <!-- Function to check the winning move -->
 function check(symbol) {
    if ($( ".sq1" ).hasClass(symbol) &&
        $( ".sq2" ).hasClass(symbol) &&
        $( ".sq3" ).hasClass(symbol))
    {
        $( ".sq1" ).css( "color" , "green" );
        $( ".sq2" ).css( "color" , "green" );
        $( ".sq3" ).css( "color" , "green" );
        return true ;
    } else if ($( ".sq4" ).hasClass(symbol)
            && $( ".sq5" ).hasClass(symbol)
            && $( ".sq6" ).hasClass(symbol))
    {
        $( ".sq4" ).css( "color" , "green" );
        $( ".sq5" ).css( "color" , "green" );
        $( ".sq6" ).css( "color" , "green" );
        return true ;
    } else if ($( ".sq7" ).hasClass(symbol)
            && $( ".sq8" ).hasClass(symbol)
            && $( ".sq9" ).hasClass(symbol))
    {
        $( ".sq7" ).css( "color" , "green" );
        $( ".sq8" ).css( "color" , "green" );
        $( ".sq9" ).css( "color" , "green" );
        return true ;
    } else if ($( ".sq1" ).hasClass(symbol)
            && $( ".sq4" ).hasClass(symbol)
            && $( ".sq7" ).hasClass(symbol))
    {
        $( ".sq1" ).css( "color" , "green" );
        $( ".sq4" ).css( "color" , "green" );
        $( ".sq7" ).css( "color" , "green" );
        return true ;
    } else if ($( ".sq2" ).hasClass(symbol)
            && $( ".sq5" ).hasClass(symbol)
            && $( ".sq8" ).hasClass(symbol))
    {
        $( ".sq2" ).css( "color" , "green" );
        $( ".sq5" ).css( "color" , "green" );
        $( ".sq8" ).css( "color" , "green" );
        return true ;
    } else if ($( ".sq3" ).hasClass(symbol)
            && $( ".sq6" ).hasClass(symbol)
            && $( ".sq9" ).hasClass(symbol))
    {
        $( ".sq3" ).css( "color" , "green" );
        $( ".sq6" ).css( "color" , "green" );
        $( ".sq9" ).css( "color" , "green" );
        return true ;
    } else if ($( ".sq1" ).hasClass(symbol)
            && $( ".sq5" ).hasClass(symbol)
            && $( ".sq9" ).hasClass(symbol))
    {
        $( ".sq1" ).css( "color" , "green" );
        $( ".sq5" ).css( "color" , "green" );
        $( ".sq9" ).css( "color" , "green" );
        return true ;
    } else if ($( ".sq3" ).hasClass(symbol)
            && $( ".sq5" ).hasClass(symbol)
            && $( ".sq7" ).hasClass(symbol))
    {
        $( ".sq3" ).css( "color" , "green" );
        $( ".sq5" ).css( "color" , "green" );
        $( ".sq7" ).css( "color" , "green" );
        return true ;
    } else {
        return false ;
    }
 }

Сброс игры: нажатие на эту кнопку сбросит игру.

 <!-- Resetting the game -->
 function reset()
 {
   $( "#screen" ).text( "PLAYER 1 TURN FOLLOWS" );
   $( "#screen" ).css( "background-color" , "transparent" );
   $( ".r" ).removeClass( "fa fa-check" );
   $( ".r" ).removeClass( "fa fa-times" );
   turn=1;
 
   // Reset Colors
   $( ".sq1" ).css( "color" , "black" );
   $( ".sq2" ).css( "color" , "black" );
   $( ".sq3" ).css( "color" , "black" );
   $( ".sq4" ).css( "color" , "black" );
   $( ".sq5" ).css( "color" , "black" );
   $( ".sq6" ).css( "color" , "black" );
   $( ".sq7" ).css( "color" , "black" );
   $( ".sq8" ).css( "color" , "black" );
   $( ".sq9" ).css( "color" , "black" );
 
}

Результат: Комбинируя все коды, написанные выше, получится полноценная игра в крестики-нолики.

Вопросы о Web технологиях JQuery HTML CSS-Misc HTML-Misc CSS Bootstrap

Создайте игру в крестики-нолики с помощью jQuery

РЕКОМЕНДУЕМЫЕ СТАТЬИ