Cum de a face un joc de cruci și zerouri javascript

scurtă introducere

structura de joc

Fișierul CSS conține stiluri de elemente de joc, cum ar fi celulele accident vascular cerebral, și de tip mouse-ul atunci când treceți peste celula.

Fișierul JS conține codul de bază, care controlează jocul.

Codul sursă al fișierului CSS

#gameinfo / * Dimensiunea fontului caseta de text, cu ID-ul = gameinfo * /
Tabel #game chenar: 3px uluc albastru; / * Masa de Okaomka * /
background-image: url ( "fon.jpg"); / * Imaginea de fundal pentru joc * >
tabel #game tr td de frontieră: #eeb punctată 1px; / * Descrieți celule accident vascular cerebral * /
cursor: pointer; / * Setați cursorul mouse-ului pentru a arăta că este posibil să faceți clic pe celula * >
#game tabel tr td: Hover / * Evidențierea celulelor, atunci când treceți cursorul mouse-ului pe ea * /

Codul din pagina HTML

HTML. Următorul cod trebuie să fie introdus pe pagina web. Fiecare bucată de cod semnat.

în interiorul tag-ul HEAD.

Doar trebuie să vă înregistrați setarea onload = „initGame ();“ în tag-ul BODY.

În interiorul corpului - în cazul în care va controla jocul:

în interiorul corpului - în cazul în care este terenul de joc:

Cel mai mare cod. Și cel mai important. În ea, există AI adversarului, și o funcție de afișare și construcția terenului, și verificarea victoria. Dar, după cum analiza programului dintr-o dată, cred, este un pic cam complicat, în primul rând, voi descrie pe scurt ce fragment și funcția programului este responsabil pentru ceea ce.

În plus, există funcții care sunt apelate de pe pagină. Prin aceste apeluri sunt transferate la joc echipa pe selecții utilizatorului, și răspunsurile de joc - un mesaj despre sfârșitul jocului, alinierea și cruci zerouri, calculul rândul adversarului computerului. Iată ce face fiecare dintre ele:
  • createField (w, h) - crearea unui nou câmp pentru dimensiunea w h.
  • setCell (x, y, t) - plasează celula la coordonatele [x, y] valoarea t (X sau tep). Precum și înlocuirea imaginii pe teren.
  • isWin () - controale pentru a vedea cine a câștigat.
  • CompGame () - determină player-ul de calculator, care verifică mai întâi brute force toate opțiunile, începând cu isWin (). și apoi face un viraj, cauzând setCell (x, y, t).
  • onCellClk (x, y) - numita Click-coordonate celulele transmise. Cauze isWin (). setCell (x, y, t) și CompGame (). Rapoarte despre victoria.

var gameImgDir = "date /";
gTexts var = []; // Pentru multilingvism.
gTexts [ 'win1'] = 'Win'; gTexts [ 'win2'] = '';
gTexts [ 'joaca'] =“. '
gTexts [ 'start'] = 'Începe jocul!'

var gField = []; // câmp de joc

Funcția createField (w, h) gField = new Array (w); // a crea o nouă matrice.
pentru (i = 0; i

var hT = "

„; // tabel etichetă antet.
pentru (j = 0; j„;
hT + = "
„;
hT + = "„;
>
hT + = "„// capăt al liniei
>
document.getElementById ( 'joc'). innerHTML = hT + "
„// a insera un tabel pe o pagină.
document.getElementById ( 'gameinfo') innerText = gTexts [ 'start'] .; // mesaj de afișare
>
Funcția setCell (x, y, t) gField [x] [y] = t; // Nu uitați t în matrice
var imgsrc = gameImgDir + 'c_null.gif'; // imaginea implicită
if (t == 'x') imgsrc = gameImgDir + 'c_x.gif'; // Image cross
dacă ( 'o' t ==) imgsrc = gameImgDir + 'c_o.gif'; // imagine până-n picioare
var oName = "c" + x + "_" + y; // imagini numele de compilare
document.getElementById (oName) .src = imgsrc; // înlocuire imagine
în cazul în care document.getElementById (oName) .alt = t (t = nul!); // dacă imaginile sunt dezactivate, jocul va fi în modul text :)
>

funcționa isWin () // zone de verificare 3 la 3.
pentru (STX = 0; STX<=gField.length-3 ; stX++) for ( stY=0 ; stY<=gField[0].length-3 ; stY++) // Если размер поля больше трёх.
var lc = gField [STX] [Sty]; // control de linie
în cazul în care pentru (i = 0 (lc = nul!); I<3 ; i++ ) if ( gField[i+stX][i+stY] != lC ) lC=null; // если проверяемая клетка не содержит lC, то сбросить значение lC
dacă lc (lc = nul!) întoarcere; // dacă este detectată victoria.
lc = gField [2 + STX] [Sty];
în cazul în care pentru (i = 0 (lc = nul!); I<3 ; i++ ) if ( gField[2-i+stX][i+stY] != lC ) lC=null;
dacă lc (lc = nul!) întoarcere;

pentru (i = 0; i<3 ; i++ ) lc = gField [STX + i] [Sty];
în cazul în care pentru (j = 0 (lc = null!); j<3 ; j++ ) if ( gField[i+stX][j+stY] != lC ) lC=null;
dacă lc (lc = nul!) întoarcere;
>
pentru (j = 0; j<3 ; j++ ) lc = gField [STX] [Sty + j];
în cazul în care pentru (i = 0 (lc = nul!); I<3 ; i++ ) if ( gField[i+stX][j+stY] != lC ) lC=null;
dacă lc (lc = nul!) întoarcere;
>
>
// a face - în cazul în care toate celulele sunt ocupate, dar nimeni nu a câștigat, remiză, dar atâta timp cât acest lucru nu se face. Încearcă-l singur pentru a termina acest test;)
return false; // dacă nimeni nu câștigă
>

Funcția CompGame () var tx = null, ty = nul, tp = 0; // tp - prioritatea celulelor țintă selectate.
var STX = 0, STY = 0;
pentru (STX = 0; STX var lc = gField [STX] [Sty];
if ((lc! = 'x') (lc! = 'O')) gField [STX] [Sty] = 'x';
if (isWin () == 'x') tx = STX; ty = Sty;
tp = 3;
> Else if (tp<3) gField[stX][stY]='o';
în cazul în care (isWin () == 'o') tx = STX; ty = Sty;
tp = 2;
> Else if (tp<2) mini var = -1, maxi = 1, Minj = -1, maxj = 1;
if (STX> = gField.length-1) maxi = 0; if (STY> = gField [0] .length-1) maxj = 0;
în cazul în care (STX<1) mini=0; if (stY<1) minj=0;
// găsi următorul deget de la picior.
pentru (i = mini; i<=maxi;i++) for (j=minj;j<=maxj;j++) if ( (i!=0) && (j!=0) ) if (gField [STX + i] [Sty + j] == 'o') tx = STX; ty = Sty;
tp = 1;
>
>
în cazul în care (tp<1) tx = STX; ty = Sty;
>
>
>
gField [STX] [Sty] = lc;
>
>
if ((tx! = null) (ty! = null)) setCell (tx, ty, 'o'); // a pus un deget de la picior în cușcă.
>
>

Funcția onCellClk (x, y) if (gField [x] [y] == null) var win = isWin (); // verifica pentru victorie.
dacă (câștig!) setCell (x, y, 'x');
câștig = isWin (); // verifica victoria
dacă (câștig!) CompGame (); // porni player-ul calculatorului
câștig = isWin (); // verifica victoria
>
if (! câștig) gameinfo.innerText = gTexts [ 'joaca'] // mesaj de afișare
> mes var Else = gTexts [ 'win1'] + câștiga + gTexts [ 'win2'];
alertă (mes); // mesaj de afișare a victoriei
gameinfo.innerText = mes;
>
>
>

alte fișiere

Doar pentru jocurile necesare fișiere grafice:
  • c_null.gif - imaginea unei celule goale
  • c_x.gif - imagine de celule de la x
  • c_o.gif - imagine de celule cu o
  • fon.jpg - imagine de fundal
Dacă utilizați animație GIF, acesta funcționează, dar în diferite browsere începe de animație este afișată ușor diferit.

Asta e tot. Încercați să practice în crearea de HTML-pagini, și încercați să rulați acest joc prin colectarea propriu. În cazul în care sa dovedit că am lăsat în mod deliberat mesajul nechey neterminat. Încercați-vă pentru a verifica nechyu, și adăugați-l la joc.