Игра крестики нолики через js видео
Мы сделаем два варианта крестиков ноликов 1,Js + html + css и 2.Js + php + html + css.
В интернете вы сможете найти массу вариантов решения данной задачки, ну и мне захотелось побаловаться на эту тему…Тем более это будет полезным в изучение выше указанных языков.
- Живой пример крестики нолики javascript
- Поле для крестиков ноликов на javascript
- Скрипт для игры крестики нолики
- Использование php в формировании поля и функций
- P.S.
- Скачать готовый скрипт крестики нолики на javascript
- Видео игра крестики нолики через js
- Скачать можно здесь
Живой пример крестики нолики javascript
На отдельной странице сделали пример, на него можно посмотреть. И даже сыграть там в крестики нолики!Поле для крестиков ноликов на 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) и сместим на половину высоты и ширины вверх и влево.
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 раз...
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[0].innerHTML + [1] + [2] равно крестику, то выводalert - Крестики победили!, и отправляем в "rezult" значение "false"
& allBlock[1].innerHTML =='x'
& allBlock[2].innerHTML =='x')
{alert('Крестики победили!'); document.getElementById("rezult").innerHTML = false;}
Это надо повторить: 1) 3 горизонтальные строки 2) 3 вертикальные, и 3) 2 по диагонали...
Всё тоже самое только с ноликом повторим...
Открываем страницу и нажимаем "ctrl + U"
Итоговый листинг: внизу страницы ищем слово скачатьИспользование php в формировании поля
В архиве для скачивания будут две версии крестиков ноликов и с использованием php файл называется krestik_noliki_php.htmlЛогику предыдущего пункта мы не будем повторять, потому, что она такая же!
Единственно отличие в написании... добавим php и сократим код...
Таблица:
<?
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!? Это всего лишь пример...
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(\'Игра закончена - перезагрузите страницу\');
}
}';
}
?>
Заголовок
P.S.
Функцию function winner() - довольно сложно оптимизировать - оставляем пока как есть... возможно вернемся , когда-нибудь...
Вывод полного листинга - ничем не отличается от первого варианта - если смотреть на результат, но если посмотреть на листинг, то вы сможете увидеть, что таблица обрисована с помощью php и повторение функции - тоже обрисована в php.
Внесенные изменения, убрали проверку:
Добавили проверку на последний ход:
в цикле;
В самом низу:
И в проверке добавили в каждую строку: