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

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

2018/05/15 Марат 3140 0 PHP | JS | TASK | GAMES |

Мы сделаем два варианта крестиков ноликов 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
Название скрипта :Игра крестики нолики
Скрипт № 52.2
Пример
Ссылка на скачивение: Все скрипты на одной странице
Теги:
Крестики нолики javascript играигра крестики нолики javascript

НАШИ ПРОЕКТЫ : Проекты находятся в разной степени готовности (просто их столько, что времени не хватает…) Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru! © 2015 - 2020