Всех друзей поздравляем с Новым годом! Всего вам самого наилучшего! Всех благ, здоровья а материальное приложится!
СКРИПТЫ althtmlcssphpjsblog

Игра крестики нолики через js видео

Поддержи проект!!! smile

Мы сделаем два варианта крестиков ноликов 1,Js + html + css и 2.Js + php + html + css.

В интернете вы сможете найти массу вариантов решения данной задачки, ну и мне захотелось побаловаться на эту тему…Тем более это будет полезным в изучение выше указанных языков.

Навигация по странице :
  1. Живой пример крестики нолики javascript
  2. Поле для крестиков ноликов на javascript
  3. Скрипт для игры крестики нолики
  4. Использование php в формировании поля и функций
  5. P.S.
  6. Скачать готовый скрипт крестики нолики на javascript
  7. Видео игра крестики нолики через js

Игра крестик нолики

  1. Живой пример крестики нолики javascript

    На отдельной странице сделали пример, на него можно посмотреть. И даже сыграть там в крестики нолики!
  2. Поле для крестиков ноликов на javascript

    Нарисуем таблицу, которая будет у нас 3 х 3, значит нам потребуется три строки(tr) и три столбца(td)
    В каждом "td" нам понадобится отдельный "id" с кнопкой "button", где будет событие "onclick"? внутри должна быть функция, которая будет уникальная.

    Див с "id = rezult" - будем использовать для хранения ранее использованного знака, либо 0 либо х.

    <table class="center">

        <tr>

            <td><button id="id_1" onclick="foo_1()" class="block"></button></td>

            <td><button id="id_2" onclick="foo_2()" class="block"></button></td>

            <td><button id="id_3" onclick="foo_3()" class="block"></button></td>

        </tr>

        <tr>

            <td><button id="id_4" onclick="foo_4()" class="block"></button></td>

            <td><button id="id_5" onclick="foo_5()" class="block"></button></td>

            <td><button id="id_6" onclick="foo_6()" class="block"></button></td>

        </tr>

        <tr>

            <td><button id="id_7" onclick="foo_7()" class="block"></button></td>

            <td><button id="id_8" onclick="foo_8()" class="block"></button></td>

            <td><button id="id_9" onclick="foo_9()" class="block"></button></td>

        </tr>

    </table>

    <div id="rezult"></div>

    Стили для кнопок:

    Поставим ширину(width) и высоту(height) в 50px. Выше мы уже прикрепили класс(center) к таблице - отцентрируем, поставим ширину и высоту, позиция(absolute) и сместим на половину высоты и ширины вверх и влево.

    <style> 

    button {

        width: 50px;

        height: 50px;

    }

    table.center {

        top: 50%;

        left: 50%;

        width: 160px;

        height: 160px;

        position: absolute;

        margin-left: -80px;

        margin-top: -80px;

    }

    </style>

  3. Скрипт для игры крестики нолики:

    Объявим несколько переменных(var),

    Напишем функцию(function) где foo_1 - должен быть равным той строке где мы уже писали сверху в "td".

    Получим, что есть у нас в ид =rezult и присвоим одноименной переменной это же значение.

    Условие если в "rezult" не false, будем выполнять скрипт иначе Игра закончена - вывод(alert).

    В "button" получим что есть внутри, и далее условие, если не пустота и внутри же условие если в "rezult" крестик, то в "permennaya" либо ноль либо крестик

    И значение "permennaya" будем отправлять и в button который имеет - уникальный "id_" (где после нижнего подчеркивания уникальный номер) и в "rezult".

    Вставим функцию "winner();".

    Кроме объявления ременных это надо повторить еще 8 раз...

    var permennaya , button, allBlock;

    function foo_1 (){     

        rezult = document.getElementById("rezult").innerHTML;

        if(rezult != "false")

        {  

        button =document.getElementById("id_1").innerHTML; //alert(button);

        if(button === "") {if(rezult == "x"){permennaya = "0"} else { permennaya = "x";}

          document.getElementById("id_1").innerHTML  = permennaya; 

          document.getElementById("rezult").innerHTML  = permennaya; }

          winner();     

        }

        else

        {

          alert('Игра закончена - перезагрузите страницу');

        }

    Проверка на нолик и крестики

    В "td" есть класс - "block", значение всех получим в массив:

    allBlock = document.getElementsByClassName("block");

    Сделаем условие для первой строки , если в трех ячейках allBlock[0].innerHTML + [1] + [2] равно крестику, то вывод(alert) - Крестики победили!, и отправляем в "rezult" значение "false"

    if(allBlock[0].innerHTML =='x' 

        & allBlock[1].innerHTML =='x' 

        & allBlock[2].innerHTML =='x')

        {alert('Крестики победили!'); document.getElementById("rezult").innerHTML  =  false;} 

    Это надо повторить: 1) 3 горизонтальные строки 2) 3 вертикальные, и 3) 2 по диагонали...

    Всё тоже самое только с ноликом повторим...

    Открываем страницу и нажимаем "ctrl + U"

    Итоговый листинг: внизу страницы ищем слово скачать
  4. Использование php в формировании поля

    В архиве для скачивания будут две версии крестиков ноликов и с использованием php файл называется krestik_noliki_php.html
    2.

    Логику предыдущего пункта мы не будем повторять, потому, что она такая же!

    Единственно отличие в написании... добавим php и сократим код...

    Таблица:

    <table class="center">
    <? 
    for ($i = 1; $i <= 9; $i++) { 
        if($i == 1)  {echo  '<tr>'."\n"; ;}
        echo '<td><button id="id_'.$i.'" onclick="foo_'.$i.'()" class="block"></button></td>'."\n"; 
        if(($i % 3 == 0) ) {echo  '</tr><tr>'."\n"; ;}
    }
    ?>
    </table>

    Скрипт в цикле:

    Смысл цикла - написана одна функция, которая будет повторяться 9 раз.

    И будет меняться только та часть, где добавленная переменная $i - это "id_" и "foo_" - сокращение кода не такое уж большое, но если принять во внимание, а если требуется повторить данную функцию 100 раз!? Или 1000!? Это всего лишь пример...

    <? echo '<script>
    var permennaya , button, allBlock;';
    for ($i = 1; $i < 10; $i++) {
    $foo =  'foo_'.$i;
    $id =   'id_'.$i;
    echo 'function  '.$foo.' (){         
            rezult = document.getElementById("rezult").innerHTML;
            if(rezult != "false")
            {  
            button =document.getElementById("'.$id.'").innerHTML; //alert(button);
            if(button === "") {if(rezult == "x"){permennaya = "0"} else { permennaya = "x";}
            document.getElementById("'.$id.'").innerHTML  = permennaya; 
            document.getElementById("rezult").innerHTML  = permennaya; }
            winner();            
            }
            else
            {
                alert(\'Игра закончена - перезагрузите страницу\');
            }
        }';    
    }
    ?>
  5. Заголовок

  6. P.S.

    Функцию function winner() - довольно сложно оптимизировать - оставляем пока как есть... возможно вернемся , когда-нибудь...

    Вывод полного листинга - ничем не отличается от первого варианта - если смотреть на результат, но если посмотреть на листинг, то вы сможете увидеть, что таблица обрисована с помощью php и повторение функции - тоже обрисована в php.


    Внесенные изменения, убрали проверку:

    if(rezult != "false")

    Добавили проверку на последний ход:

    в цикле;

    count = document.getElementById("arhiv").innerHTML += arhiv; count = count.length;

    В самом низу:

    if(count == "9") { alert('Ничья!');  location.reload(); }

    И в проверке добавили в каждую строку:

    location.reload(); fail;


Вас может еще заинтересовать список тем : #PHP | #JS | #TASK | #GAMES |
Последняя дата редактирования : 2019-12-19 12:36
Название скрипта :Игра крестики нолики
Скрипт № 55.2
Пример
Ссылка на скачивание : Все скрипты на одной странице
//dwweb.ru/comments_1_5/include/img/hand_no_foto.png
no
no
Еще никто не прокомментировал! COMMENTS+   BBcode
аватар
🞨
Загрузить свой аватар
(max ширина, высота = 200px)

Подписаться + =
Теги:
Крестики нолики javascript играигра крестики нолики javascript

Последние комментарии :
Марат :
03/12/2020 08:47
Давно пользуюсь данным скриптом, который написал еще при царе горохе!За десять лет изменилось то, что и при…
подробнее.
Ольга Попова :
02/12/2020 11:42
Я уж было обрадовалась, а у меня не…
подробнее.
Марат :
23/11/2020 07:38
Приходите ещё!
подробнее.
Лило :
23/11/2020 06:34
Благодарю, удобно
подробнее.
Марат :
15/11/2020 01:57
Здесь отвечал...1) Есть вот комментарии от вконтактае, очень простые 2)Такое же есть от мордокниги, 3) смотрите…
подробнее.