СКРИПТЫ
ТЕГИ:
php (282)
js (144)
html (132)
css (99)
html tags (58)
jquery (39)
edit text (37)
php array (30)
form html (29)
fonts (22)
foto (21)
ruweb.net (19)
atom (19)
forum (19)
html book (17)
board (17)
Показать еще :
php file (16)
svg (16)
js method (16)
hosting (16)
link (15)
htaccess (13)
color (13)
osclass (13)
path (12)
table (12)
js delete (11)
icon (11)
php date (11)
jsphp (11)
notepad (11)
input (11)
online (11)
php img (10)
yandex (10)
url (10)
form (10)
mouse (9)
info (9)
comment (7)
img (7)
cookie (7)
task (7)
ftp (7)
php url (7)
dosite (6)
click (6)
hover (6)
js url (6)
reg.ru (5)
chart (5)
php get (5)
adminka (5)
value (5)
mb (5)
js id (4)
bbcode (4)
submit (4)
js form (4)
browser (4)
select (4)
search (4)
js copy (4)
iframe (4)
symbols (4)
captcha (3)
https (3)
js post (3)
vk (3)
scandir (3)
js time (3)
ssl (3)
vs code (3)
height (2)
details (2)
youtube (2)
tag hr (2)
sitemap (2)
title (2)
ukoz (2)
cursor (2)
console (2)
seo (2)
js vars (2)
video (2)
smile (1)
windows (1)
numbers (1)
archive (1)
header (1)
books (1)
domen (1)
padding (1)

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

2018/05/15 Марат 597 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;

Пользуйтесь на здоровье! Не забудьте сказать спасибо
Название скрипта :Игра крестики нолики
Ссылка на скачивание : Все скрипты на одной странице
Теги :

Сообщение системы комментирования :

01.09.2021

Форма пока доступна только админу... скоро все заработает...надеюсь...

Счетчик в график :

Построение гравиков
Основа для графика : счетчик посещаемости.
Последние комментарии :
Марат :
17.10.2021 39:28
Давно не делал и страницу и видео в один день... чет, как-то выжитый как…
подробнее.
Марат :
10.10.2021 17:20
Добавлен новый смайл
подробнее.
Марат :
05.10.2021 26:37
Страница sitemap.html восстановлена. Но будут вводиться только страницы…
подробнее.
Марат :
04.10.2021 38:22
Добавил несколько вариантов поставить смайл на страницу своего сайта! 3 варианта! Кроме варианта скачать…
подробнее.
Марат :
17.09.2021 28:02
Установка Яндекс поиск на сайт! Контент обновлен на 100%. Такое ощущение, что старый текст не я…
подробнее.
Марат :
07.09.2021 23:21
Частенько приходится исправлять ошибки и вот...как-то я обратил внимание на надпись: "нажми ctrl enter" на сайте и…
подробнее.
ruweb