СКРИПТЫ
ТЕГИ:
php (322)
js (242)
html (146)
css (127)
html tags (62)
js tag (56)
jquery (42)
text (37)
js method (36)
php array (33)
js date (33)
form html (30)
fonts (30)
online (27)
link (26)
Показать еще :
ruweb.net (25)
foto (22)
php file (20)
atom (20)
forum (19)
input (18)
hosting (18)
svg (18)
php date (17)
board (16)
php time (16)
html book (16)
color (15)
js events (14)
js url (14)
js time (14)
img (13)
htaccess (13)
osclass (13)
info (13)
notepad (13)
select (13)
php path (12)
keyboard (12)
table (12)
знак (12)
php img (12)
dw block (12)
download (12)
jsphp (11)
form (11)
icon (11)
yandex (10)
js delete (10)
mouse (10)
hover (9)
dosite (8)
php url (7)
browser (7)
cookie (7)
comment (7)
php get (6)
iframe (6)
list (6)
canvas (6)
mysql (6)
click (6)
tag a (5)
adminka (5)
value (5)
reg.ru (5)
search (5)
js math (5)
mb (5)
chart (5)
ftp (5)
year (5)
heading (5)
js id (5)
нок (4)
php var (4)
xml (4)
scandir (4)
ssl (4)
week (4)
day (4)
base64 (4)
bbcode (4)
js form (4)
task (4)
month (4)
console (4)
symbols (4)
pages (4)
vk (4)
submit (4)
https (3)
numbers (3)
js post (3)
js hash (3)
money (3)
vs code (3)
domen (3)
куб (3)
line (3)
captcha (3)
ucoz (3)
padding (3)
js img (3)
js vars (2)
рся (2)
youtube (2)
video (2)
sitemap (2)
tag hr (2)
prompt (2)
arrows (2)
details (2)
seo (2)
height (2)
google (2)
qr kod (2)
counter (2)
typeof (2)
speed (1)
rutube (1)
windows (1)
game (1)
header (1)
smile (1)
archive (1)
cursor (1)
jino (1)
scroll (1)
нод (1)

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

2018/05/15 Марат 3211 0 php | js | task | game | js_tag |

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

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

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

  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; //alertbutton;

        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; //alertbutton;
            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;

Можете не благодарить, лучше помогите!
Название скрипта :Игра крестики нолики
Ссылка на скачивание : Все скрипты на одной странице
Теги :
Еще никто не прокомментировал! COMMENTS+   BBcode
Подписаться + =

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

Построение гравиков
Основа для графика : счетчик посещаемости.
На отдельной : странице.
dwweb.ru есть здесь:
Последние комментарии :
Марат :
14.03.2023 21:07
Так... это когда было то... в 2018 году... мне не нравится(не нравилось), как поиск по файлам... как-то коряво было…
подробнее.
Moubrey :
14.03.2023 20:52
Их там два можно поставить, еще и по бокам, а в них еще друге окна станут вкладками, обычный проводник и…
подробнее.
Марат :
26.02.2023 12:20
Спасибо за внимательность!
подробнее.
V :
26.02.2023 11:49
В массиве месяцев пропущен октябрь!
подробнее.
Марат :
02.02.2023 10:48
Я не знаю, что это ... Такое понятие - "определена"... я не понимаю, что такое... есть такая фигня в Js, там, бывают…
подробнее.
Артур :
02.02.2023 06:51
При копировании всего кода из 3 главы "Вывод всех файлов из папки ссылками на них", при выполнении скрипта…
подробнее.
ruweb
Страница загружена за : 0.021583 секунд. Подробнее