X un O

Problēmas apraksts

Spēle ar 3 x 3 laukumu, kas spēles gaitā tiek piepildīts ar simboliem X un O. Abu spēlētāju uzdevums ir panākt 3 X vai O rindā. Uzvar veiklākais.

Spēles laukums

Izmantojot html tabulas, izveido spēles laukumu kā paraugā. Ievēro dalījumu rindās un kolonnās!

Laukuma rūtiņās ievieto pogas, ko spēlētāji izmantos, lai izdarītu gājienu.

Sanumurē lauciņu pogas, pielietojot id="lauks1", id="lauks2" utt. Visām pievieno vienotu klasi, kas ļaus atlasīt visus spēles lauciņus, lai tos izslēgtu vai ieslēgtu.

Spēles loģika

Pogai [ Jauna spēle ] pievieno onclick="jaunaSpele();" atribūtu, lai tas kalpo kā poga iedarbinot kodu, kas notīra laukumu jaunai spēlei.

Loģikas daļā script.js pievieno funkciju

// notīra laukumu un sāk jaunu spēli
function jaunaSpele() {
    var laucinji = document.getElementsByClassName("laucins");
    for (var laucins of laucinji) {
        // pievieno kodu, kas ieslēdz visus lauciņus un nodzēš tajos attēlotos simbolus
    }
}

Visiem 9 spēles lauciņiem pievieno atribūtu onclick="gajiens(this);", kas nobloķēs attiecīgo lauciņu, marķējot to ar X vai O. Parametrs this funkcijai lauciņa elementu (pogu) padod kā parametru, lai tas nav "jāmeklē".

script.js sadaļā pievieno funkciju

function gajiens(laucinjs) {
    // izdara gājienu (ieraksta simbolu pogā un izslēdz to)
}

Nepieciešama arī funkcija, kas pārbauda iespējamo uzvaru vai neizšķirtu pēc katra gājiena.

Pievieno funkciju

function uzvara() {
    if (laucins1.textContent == "X" && laucins2.textContent == "X" && laucins3.textContent == "X") {
        alert("Uzvarēja X");
    }
    // līdzīgā veidā jāpārbauda visas iespējamās kombinācijas
}

Lai pārbaudītu neizšķirtu, nepieciešams saskaitīt izdarītos gājienus.

Loģikas koda sākumā pievieno skaitītāju

var gajieni = 0;

Funkcijā, kas nostrādā pie katra gājienā, pievieno kodu, kas palielina skaitītāju par 1.

Uzvaras pārbaudes koda sākumā pārbaudi, vai gājienu skaits sasniedzis 9 (pilns laukums). Tādā gadījumā izvada ziņojumu (alert) ar tekstu "Neizšķirts!".