Простая игра в крестики-нолики с использованием JavaScript

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

Как реализовать игру в крестики-нолики для двух игроков с помощью JavaScript?

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

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

Вид игры крестики-нолики

Имя файла: index.html

HTML

 <!DOCTYPE html>
 
< head >
    < meta name = "viewport" content =
        "width=device-width, initial-scale=1.0" >
 
    <!-- CSS file Included -->
    < link rel = "stylesheet"
        type = "text/css" href = "tic.css" >
 
    <!-- JavaScript file included -->
    < script src = "tic.js" ></ script >
 </ head >
 
< body >
    < div id = "main" >
        < h1 >TIC TAC TOE</ h1 >
 
        <!-- Game Instructions -->
        < p id = "ins" >Game starts by just Tap on
            box< br >< br >First Player starts as
            < b >Player X</ b >< br >And< br >Second Во- >Second
            Player as < b >Player 0</ b >
        </ p >
 
        < br >< br >
        <!-- 3*3 grid of Boxes -->
        < input type = "text" id = "b1" onclick =
            "myfunc_3(); myfunc();" readonly>
 
        < input type = "text" id = "b2" onclick =
            "myfunc_4(); myfunc();" readonly>
 
        < input type = "text" id = "b3" onclick =
            "myfunc_5(); myfunc();" readonly>
        < br >< br >
 
        < input type = "text" id = "b4" onclick =
            "myfunc_6(); myfunc();" readonly>
             
        < input type = "text" id = "b5" onclick =
            "myfunc_7(); myfunc();" readonly>
 
        < input type = "text" id = "b6" onclick =
            "myfunc_8(); myfunc();" readonly>
        < br >< br >
 
        < input type = "text" id = "b7" onclick =
            "myfunc_9(); myfunc();" readonly>
 
        < input type = "text" id = "b8" onclick =
            "myfunc_10();myfunc();" readonly>
 
        < input type = "text" id = "b9" onclick =
            "myfunc_11();myfunc();" readonly>
 
        <!-- Grid end here -->
        < br >< br >< br >
        <!-- Button to reset game -->
        < button id = "but" onclick = "myfunc_2()" >
            RESET
        </ button >
 
        < br >< br >
        <!-- Space to show player turn -->
        < p id = "print" ></ p >
 
    </ div >
 </ body >
 
</ html > 

Имя файла: tic.css

CSS

 <style>
    /* CSS Code */
    /* Heading */
    h 1 {
        color : orangered;
        font-size : 45px ;
    }
 
    /* 3*3 Grid */
    #b 1 , #b 2 , #b 3 , #b 4 , #b 5 ,
    #b 6 , #b 7 , #b 8 , #b 9 {
        width : 80px ;
        height : 52px ;
        margin : auto ;
        border : 1px solid gray ;
        border-radius: 6px ;
        font-size : 30px ;
        text-align : center ;
    }
 
    /* Reset Button */
    #but {
        box-sizing: border-box;
        width : 95px ;
        height : 40px ;
        border : 1px solid dodgerblue;
        margin : auto ;
        border-radius: 4px ;
        font-family : Verdana ,
            Geneva, Tahoma , sans-serif ;
 
        background-color : dodgerblue;
        color : white ;
        font-size : 20px ;
        cursor : pointer ;
    }
 
    /* Player turn space */
    # print {
        font-family : Verdana ,
            Geneva, Tahoma , sans-serif ;
 
        color : dodgerblue;
        font-size : 20px ;
    }
 
    /* Main Contianer */
    #main {
        text-align : center ;
    }
 
    /* Game Instruction Text */
    #ins {
        font-family : Verdana ,
            Geneva, Tahoma , sans-serif ;
             
        color : dodgerblue;
        font-size : 17px ;
    }
 </style>

Имя файла: tic.js

JavaScript

 // Function called whenever user tab on any box
 function myfunc() {
 
    // Setting DOM to all boxes or input field
    var b1, b1, b3, b4, b5, b6, b7, b8, b9;
    b1 = document.getElementById( "b1" ).value;
    b2 = document.getElementById( "b2" ).value;
    b3 = document.getElementById( "b3" ).value;
    b4 = document.getElementById( "b4" ).value;
    b5 = document.getElementById( "b5" ).value;
    b6 = document.getElementById( "b6" ).value;
    b7 = document.getElementById( "b7" ).value;
    b8 = document.getElementById( "b8" ).value;
    b9 = document.getElementById( "b9" ).value;
 
    // Checking if Player X won or not and after
    // that disabled all the other fields
    if ((b1 == 'x' || b1 == 'X' ) && (b2 == 'x' ||
        b2 == 'X' ) && (b3 == 'x' || b3 == 'X' )) {
        document.getElementById( 'print' )
            .innerHTML = "Player X won" ;
        document.getElementById( "b4" ).disabled = true ;
        document.getElementById( "b5" ).disabled = true ;
        document.getElementById( "b6" ).disabled = true ;
        document.getElementById( "b7" ).disabled = true ;
        document.getElementById( "b8" ).disabled = true ;
        document.getElementById( "b9" ).disabled = true ;
        window.alert( 'Player X won' );
    }
    else if ((b1 == 'x' || b1 == 'X' ) && (b4 == 'x' ||
        b4 == 'X' ) && (b7 == 'x' || b7 == 'X' )) {
        document.getElementById( 'print' )
            .innerHTML = "Player X won" ;
        document.getElementById( "b2" ).disabled = true ;
        document.getElementById( "b3" ).disabled = true ;
        document.getElementById( "b5" ).disabled = true ;
        document.getElementById( "b6" ).disabled = true ;
        document.getElementById( "b8" ).disabled = true ;
        document.getElementById( "b9" ).disabled = true ;
 
        window.alert( 'Player X won' );
    }
    else if ((b7 == 'x' || b7 == 'X' ) && (b8 == 'x' ||
        b8 == 'X' ) && (b9 == 'x' || b9 == 'X' )) {
        document.getElementById( 'print' )
            .innerHTML = "Player X won" ;
        document.getElementById( "b1" ).disabled = true ;
        document.getElementById( "b2" ).disabled = true ;
        document.getElementById( "b3" ).disabled = true ;
        document.getElementById( "b4" ).disabled = true ;
        document.getElementById( "b5" ).disabled = true ;
        document.getElementById( "b6" ).disabled = true ;
        window.alert( 'Player X won' );
    }
    else if ((b3 == 'x' || b3 == 'X' ) && (b6 == 'x' ||
        b6 == 'X' ) && (b9 == 'x' || b9 == 'X' )) {
        document.getElementById( 'print' )
            .innerHTML = "Player X won" ;
        document.getElementById( "b1" ).disabled = true ;
        document.getElementById( "b2" ).disabled = true ;
        document.getElementById( "b4" ).disabled = true ;
        document.getElementById( "b5" ).disabled = true ;
        document.getElementById( "b7" ).disabled = true ;
        document.getElementById( "b8" ).disabled = true ;
        window.alert( 'Player X won' );
    }
    else if ((b1 == 'x' || b1 == 'X' ) && (b5 == 'x' ||
        b5 == 'X' ) && (b9 == 'x' || b9 == 'X' )) {
        document.getElementById( 'print' )
            .innerHTML = "Player X won" ;
        document.getElementById( "b2" ).disabled = true ;
        document.getElementById( "b3" ).disabled = true ;
        document.getElementById( "b4" ).disabled = true ;
        document.getElementById( "b6" ).disabled = true ;
        document.getElementById( "b7" ).disabled = true ;
        document.getElementById( "b8" ).disabled = true ;
        window.alert( 'Player X won' );
    }
    else if ((b3 == 'x' || b3 == 'X' ) && (b5 == 'x' ||
        b5 == 'X' ) && (b7 == 'x' || b7 == 'X' )) {
        document.getElementById( 'print' )
            .innerHTML = "Player X won" ;
        document.getElementById( "b1" ).disabled = true ;
        document.getElementById( "b2" ).disabled = true ;
        document.getElementById( "b4" ).disabled = true ;
        document.getElementById( "b6" ).disabled = true ;
        document.getElementById( "b8" ).disabled = true ;
        document.getElementById( "b9" ).disabled = true ;
        window.alert( 'Player X won' );
    }
    else if ((b2 == 'x' || b2 == 'X' ) && (b5 == 'x' ||
        b5 == 'X' ) && (b8 == 'x' || b8 == 'X' )) {
        document.getElementById( 'print' )
            .innerHTML = "Player X won" ;
        document.getElementById( "b1" ).disabled = true ;
        document.getElementById( "b3" ).disabled = true ;
        document.getElementById( "b4" ).disabled = true ;
        document.getElementById( "b6" ).disabled = true ;
        document.getElementById( "b7" ).disabled = true ;
        document.getElementById( "b9" ).disabled = true ;
        window.alert( 'Player X won' );
    }
    else if ((b4 == 'x' || b4 == 'X' ) && (b5 == 'x' ||
        b5 == 'X' ) && (b6 == 'x' || b6 == 'X' )) {
        document.getElementById( 'print' )
            .innerHTML = "Player X won" ;
        document.getElementById( "b1" ).disabled = true ;
        document.getElementById( "b2" ).disabled = true ;
        document.getElementById( "b3" ).disabled = true ;
        document.getElementById( "b7" ).disabled = true ;
        document.getElementById( "b8" ).disabled = true ;
        document.getElementById( "b9" ).disabled = true ;
        window.alert( 'Player X won' );
    }
 
    // Checking of Player X finsh
    // Checking for Player 0 starts, Is player 0 won or
    // not and after that disabled all the other fields
    else if ((b1 == '0' || b1 == '0' ) && (b2 == '0' ||
        b2 == '0' ) && (b3 == '0' || b3 == '0' )) {
        document.getElementById( 'print' )
            .innerHTML = "Player 0 won" ;
        document.getElementById( "b4" ).disabled = true ;
        document.getElementById( "b5" ).disabled = true ;
        document.getElementById( "b6" ).disabled = true ;
        document.getElementById( "b7" ).disabled = true ;
        document.getElementById( "b8" ).disabled = true ;
        document.getElementById( "b9" ).disabled = true ;
        window.alert( 'Player 0 won' );
    }
    else if ((b1 == '0' || b1 == '0' ) && (b4 == '0' ||
        b4 == '0' ) && (b7 == '0' || b7 == '0' )) {
        document.getElementById( 'print' )
            .innerHTML = "Player 0 won" ;
        document.getElementById( "b2" ).disabled = true ;
        document.getElementById( "b3" ).disabled = true ;
        document.getElementById( "b5" ).disabled = true ;
        document.getElementById( "b6" ).disabled = true ;
        document.getElementById( "b8" ).disabled = true ;
        document.getElementById( "b9" ).disabled = true ;
        window.alert( 'Player 0 won' );
    }
    else if ((b7 == '0' || b7 == '0' ) && (b8 == '0' ||
        b8 == '0' ) && (b9 == '0' || b9 == '0' )) {
        document.getElementById( 'print' )
            .innerHTML = "Player 0 won" ;
        document.getElementById( "b1" ).disabled = true ;
        document.getElementById( "b2" ).disabled = true ;
        document.getElementById( "b3" ).disabled = true ;
        document.getElementById( "b4" ).disabled = true ;
        document.getElementById( "b5" ).disabled = true ;
        document.getElementById( "b6" ).disabled = true ;

                    
                                            Technical Scripter
                                            JavaScript
                                            HTML
                                            CSS-Misc
                                            HTML-Misc
                                            JavaScript-Misc
                                            CSS
                                    
РЕКОМЕНДУЕМЫЕ СТАТЬИЧто такое тернарный оператор?
23 Января, 2024
Количество чисел между L и R, взаимно простых с P
27 Февраля, 2023
Постройте матрицу, каждая строка и столбец которой содержат N и M единиц соответственно.
27 Февраля, 2023
Максимизируйте сумму трех чисел, выполнив побитовое XOR
27 Февраля, 2023
Проверьте, совпадает ли набор первых элементов X одного массива с набором первых элементов Y другого
27 Февраля, 2023
Подсчитать подстроки нечетной длины с медианой, такой же, как K-й символ строки
27 Февраля, 2023
Найти лексикографически первый идентификатор каждого домена из заданного массива идентификаторов электронной почты
27 Февраля, 2023
Найдите общее количество фигур 'X'
26 Февраля, 2023