DWWEB.RU
СКРИПТЫ

Крестики нолики javascript Js + php + html + css.

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

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

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

Тем более это будет полезным в изучение выше указанных языков.

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

И конечно же на эту игру можно Эту картинку, скриншот, можно увеличить в отдельном окне нажмите по нему!посмотреть.
1.

Игра крестики нолики на 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>

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

Объявим несколько переменных(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"

Итоговый листинг: внизу страницы

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(\'Игра закончена - перезагрузите страницу\');
        }
    }';    
}
?>

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

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

P.S.

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

if(rezult != "false")

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

в цикле;

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

В самом низу:

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

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

location.reload(); fail;

Не забудь !
Название скрипта :Игра крестики нолики
Скрипт № 53.2
Пример
Скачать - архив
Все скрипты на одной странице
Оставить комментарийCOMMENTS+
Сообщений пока нет - Вы можете стать первым
BBcode
нажмите, чтобы загрузить аватар
Загрузить свой аватар(max ширина, высота = 100px) ( как это работает)

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

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