Как да си направим една игра на кръстчета и нули на JavaScript

кратко въведение

игра структура

Файлът съдържа CSS стилове на игра елементи, като инсулт клетки и тип на мишката, когато мишката върху клетката.

Файлът JS съдържа основния код, която контролира играта.

В изходния код на CSS файла

#gameinfo / * Размер на шрифта на текстовото поле, с ID = gameinfo * /
#game маса граница: 3px жлеб синьо; / * Okaomka маса * /
фон изображение: URL ( "fon.jpg"); / * Фоново изображение за играта * >
#game маса TR TD граница: 1px пунктирана #eeb; / * Описват инсулт клетки * /
курсора: указател; / * Задайте курсора на мишката, за да се покаже, че е възможно да кликнете върху клетката * >
#game маса TR TD: навъртам / * Отбелязването на клетките, когато задържите курсора на мишката върху него * /

Кодът на страницата HTML

HTML. Следният код трябва да бъде поставена на уеб страницата. Всяка част от код подписан.

вътре маркер на главата.

Просто трябва да се регистрирате за определяне при зареждане = "initGame ();" в тялото маркер.

във вътрешността на тялото - когато ще контролира играта:

във вътрешността на тялото - когато е на игралното поле:

Най-големият код. И най-важното. В него има AI опонент, и функция за извеждане и изграждането на терена и проверка на победата. Но, тъй като анализът на програмата веднага, според мен, е малко по-сложно, на първо място, ще опиша накратко какво фрагмент и функция на програмата е отговорен за това.

Освен това има и функции, които са наречени от страницата. Чрез тези разговори се прехвърлят към играта на отбора по избор на потребителя, както и отговорите на играта - съобщение за края на играта, за привеждане в съответствие на кръстчета и нули, изчисляването на свой ред на противника компютър. Ето какво прави всеки един:

createField (т, з) - създаване на ново поле за размера w часа.
setCell (х, у, т) - поставя клетката в координати [X, Y] Т стойността (X или пръсти). Както и за замяна на образа на терена.
isWin () - проверки, за да видят кой е спечелил.
CompGame () - причинява компютъра играч, който за първи път груба сила се покажат всички възможности, като се започне isWin (). и след това се прави завой, което води setCell (х, у, т).
onCellClk (х, у) - наречен кликване координати предава клетки. Предизвиква isWin (). setCell (х, у, т) и CompGame (). Доклади за победа.

Var gameImgDir = "данни /";
VAR gTexts = []; // За езиковото.
gTexts [ 'win1'] = 'Win "; gTexts [ 'win2'] = '!';
gTexts [ "играят"] = '. "
gTexts [ 'започват'] = 'Започнете игра!

Var gField = []; // условия

функция createField (т, з) gField = нов Array (w); // създаване на нов масив.
за (I = 0; и

Var Ht = "

"// маса глава маркер.
за (к = 0; J за (I = 0; и НТ + = "";
>
НТ + = ""// край на линията
>
document.getElementById ( "игра"). innerHTML = HT + "

";
НТ + = "

"; // вмъкнете таблица на страницата.
document.getElementById ( "gameinfo) innerText = gTexts [" начало "] .; // съобщение дисплей
>
функция setCell (х, у, т) gField [х] [Y] = Т; // Запомни т в масива
Var imgsrc = gameImgDir + 'c_null.gif; // изображението по подразбиране
ако (т == "х") imgsrc = gameImgDir + 'c_x.gif; // изображение за напречно
ако (т == "О") imgsrc = gameImgDir + 'c_o.gif; // изображение до петите
Var oName = "с" + х + "_" + у; // име на компилация снимки
document.getElementById (oName) .src = imgsrc; // подмяна на изображението
ако document.getElementById (oName) .alt = т (т = нула!); // ако изображенията са изключени, играта ще бъде в текстов режим :)
>

функционира isWin () // контролни зони 3 до 3.
за (STX = 0; STX<=gField.length-3 ; stX++) for ( stY=0 ; stY<=gField[0].length-3 ; stY++) // Если размер поля больше трёх.
Var LC = gField [STX] [кочина]; // проверка линия
ако за (I = 0 (LC = нула!); и<3 ; i++ ) if ( gField[i+stX][i+stY] != lC ) lC=null; // если проверяемая клетка не содержит lC, то сбросить значение lC
ако (LC = нула!) връщане LC; // ако победа се засича.
LC = gField [2 + STX] [кочина];
ако за (I = 0 (LC = нула!); и<3 ; i++ ) if ( gField[2-i+stX][i+stY] != lC ) lC=null;
ако (LC = нула!) връщане LC;

за (I = 0; и<3 ; i++ ) LC = gField [STX + Ь] [кочина];
ако за (J = 0 (LC = нула!); й<3 ; j++ ) if ( gField[i+stX][j+stY] != lC ) lC=null;
ако (LC = нула!) връщане LC;
>
за (к = 0; J<3 ; j++ ) LC = gField [STX] [кочина + й];
ако за (I = 0 (LC = нула!); и<3 ; i++ ) if ( gField[i+stX][j+stY] != lC ) lC=null;
ако (LC = нула!) връщане LC;
>
>
// да се направи - ако всички клетки са заети, но никой не печели, жребият, но толкова дълго, тъй като това не е направено. Опитайте сами да завърши този тест;)
върнете невярна; // ако никой не печели
>

функция CompGame () Var TX = нула, Тай = нула, ТР = 0; // TP - приоритета на избраните клетки мишени.
Var STX = 0, кочина = 0;
за (STX = 0; STX Var LC = gField [STX] [кочина];
ако ((LC! = 'х') (LC! = 'О')) gField [STX] [кочина] = "х";
ако (isWin () == "х") TX = STX; Тай = кочина;
ТР = 3;
> Иначе ако (ТР<3) gField[stX][stY]='o';
ако (isWin () == "о") TX = STX; Тай = кочина;
ТР = 2;
> Иначе ако (ТР<2) VAR мини = -1, макси = 1, minj = -1, maxj = 1;
ако (STX> = gField.length-1) макси = 0; ако (STY> = gField [0] .length-1) maxj = 0;
ако (STX<1) mini=0; if (stY<1) minj=0;
// намерите следващия пръст на крака.
за (I = мини; и<=maxi;i++) for (j=minj;j<=maxj;j++) if ( (i!=0) && (j!=0) ) ако (gField [STX + Ь] [кочина + й] == "о") ТХ = STX; Тай = кочина;
ТР = 1;
>
>
ако (ТР<1) TX = STX; Тай = кочина;
>
>
>
gField [STX] [кочина] = LC;
>
>
ако ((Тексас! = нула) (ту! = нула)) setCell (ТХ, Тай, "о"); // постави палеца в клетката.
>
>

функция onCellClk (х, у) ако (gField [х] [Y] == нула) Var победа = isWin (); // проверка за победа.
ако (победа!) setCell (X, Y, "х");
победа = isWin (); // проверка за победа
ако (победа!) CompGame (); // стартирате компютъра играч
победа = isWin (); // проверка за победа
>
ако (! победа) gameinfo.innerText = gTexts [ 'играя'] // съобщение на дисплея
> Иначе VAR МОН = gTexts [ 'win1'] + Win + gTexts [ 'win2 "];
сигнализиране (MES); // съобщение на дисплея на победата
gameinfo.innerText = МОН;
>
>
>

Други файлове

Само за игрите изискват графични файлове:

c_null.gif - образа на празна клетка
c_x.gif - клетка изображение от х
c_o.gif - образ на клетка с о
fon.jpg - фоново изображение

Ако използвате GIF анимация, тя работи, но в различни браузъри започват на анимацията се появи малко по-различно.

Това е всичко. Опитайте се да практикуват в създаването на HTML-страници, и се опитайте да стартирате тази игра, като събира само себе си. Ако се оказа, че аз нарочно остави незавършено съобщение nechey. Опитайте сами да проверите за nechyu, и го добавете към играта.