В связи с переходом на новый движок... возможны сбои в работе! Простите!
Работы производятся прямо сейчас 19-03-2024! 🞨
Меню :
js tag (56)
games (4)
task (4)
js (244)
php (329)



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

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

Мы сделаем два варианта крестиков ноликов 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; //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;
Не стесняемся говорить спасибо!
Помочь проекту DwWeb.ru

Поделиться ссылкой! C друзьями или врагами!

Этим вы очень поможете проекту! Заранее огромное спасибо!

Ещё : dwweb.ru есть здесь:
ruweb
Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru! © 2015 - 2024 Контакты. Реклама на сайте Лучший хостинг : RUWEB + помощь по RUWEB
Страница загружена за : 0.019967 секунд. Подробнее