Tic-tac-toe, 3×3 ızgara kullanan popüler bir oyundur. Oyunun amacı, üç sembolü düz bir yatay, dikey veya çapraz sıraya yerleştiren ilk oyuncu olmaktır.
HTML, CSS ve JavaScript kullanarak bir web tarayıcısında çalışan bir Tic-tac-toe oyunu oluşturabilirsiniz. 3×3 ızgarayı içeren içeriği eklemek için HTML'yi ve oyun tasarımına biraz stil eklemek için CSS'yi kullanabilirsiniz.
Daha sonra oyunun işlevselliği için JavaScript'i kullanabilirsiniz. Bu, sembolleri yerleştirmeyi, oyuncular arasında sırayla olmayı ve kimin kazanacağına karar vermeyi içerir.
Tic-Tac-Toe Oyunu için Kullanıcı Arayüzü Nasıl Oluşturulur
Bu oyunun kaynak kodunun tamamını şuradan okuyabilir ve indirebilirsiniz: GitHub deposu.
Tic-tac-toe, programlamayı öğrenirken yapabileceğiniz pek çok oyundan biridir. Yeni bir dili veya ortamı pratik etmek iyidir, örneğin PICO-8 oyun geliştirme motoru.
Bir web tarayıcısında çalışan bir Tic-tac-toe oyunu oluşturmak için sayfa içeriği için HTML eklemeniz gerekir. Daha sonra bunu CSS kullanarak biçimlendirebilirsiniz.
- "index.html" adlı yeni bir dosya oluşturun.
- "index.html" içine bir HTML dosyasının temel yapısını ekleyin:
html>
<htmldil="tr-US">
<KAFA>
<başlık>Tic Tac Toe Oyunubaşlık>
KAFA>
<vücut>
vücut>
html> - HTML gövde etiketinin içine, her satırda üç hücre olacak şekilde üç satır içeren bir tablo ekleyin:
<divsınıf="konteyner">
<masa>
<tr>
<tdİD="1">td>
<tdİD="2">td>
<tdİD="3">td>
tr>
<tr>
<tdİD="4">td>
<tdİD="5">td>
<tdİD="6">td>
tr>
<tr>
<tdİD="7">td>
<tdİD="8">td>
<tdİD="9">td>
tr>
masa>
div> - HTML dosyanızla aynı klasörde "styles.css" adında yeni bir dosya oluşturun.
- CSS dosyasının içinde, 3'e 3 ızgaranıza biraz stil ekleyin:
masa {
sınır çöküşü: yıkılmak;
marj: 0 Oto;
}td {
Genişlik: 100piksel;
yükseklik: 100piksel;
Metin hizalama: merkez;
dikey hizalama: orta;
sınır: 1pikselsağlamsiyah;
} - Head etiketine ekleyerek CSS dosyasını HTML dosyanıza bağlayın:
<bağlantırel="stil sayfası"tip="metin/css"href="stil.css">
Oyun Tahtasına Sırayla Sembol Ekleme
Oyunda, her biri "X" veya "O" sembolüne sahip iki oyuncu olacak. Izgara hücrelerinden birine tıklayarak bir "X" veya "O" sembolü ekleyebilirsiniz. Bu, biriniz düz bir yatay, dikey veya çapraz sıra oluşturana kadar devam edecektir.
Bu işlevi JavaScript kullanarak ekleyebilirsiniz.
- HTML ve CSS dosyalarınızla aynı klasörde "script.js" adında bir JavaScript dosyası oluşturun.
- Komut dosyasını gövde etiketinin altına ekleyerek JavaScript dosyasını HTML dosyanıza bağlayın:
<vücut>
Kodunuz burada
<senaryokaynak="script.js">senaryo>
vücut> - JavaScript dosyasının içine, oyuncunun sembolünü temsil edecek bir dize ekleyin. Bu, "X" veya "O" olabilir. Varsayılan olarak, ilk oyuncu bir "X" yerleştirir:
izin vermek oyuncu Sembolü = "X"; - Oyunun bitip bitmediğini takip etmek için başka bir değişken ekleyin:
izin vermek oyunBitti = YANLIŞ - HTML tablosundaki her hücrenin kimliği 1 ile 9 arasındadır. Tablodaki her hücre için, kullanıcı hücreye her tıkladığında çalışacak bir olay dinleyicisi ekleyin:
için (izin vermek ben = 1; ben <= 9; ben++) {
belge.getElementById (i.toString()).addEventListener(
"tıklamak",
işlev() {
}
);
} - Olay dinleyicisinin içinde, geçerli sembolü görüntülemek için iç HTML'yi değiştirin. kullandığınızdan emin olun bir JavaScript koşullu ifadesi önce hücrenin boş olduğundan ve oyunun henüz bitmediğinden emin olmak için:
eğer (Bu.innerHTML "" && !oyunBitti) {
Bu.innerHTML = playerSymbol;
} - Izgarada gösterilecek sembole stil vermek için HTML öğesine bir sınıf ekleyin. CSS sınıflarının adı, sembole bağlı olarak "X" veya "O" olacaktır:
Bu.classList.add (playerSymbol.toLowerCase()); - "styles.css" dosyasının içine, "X" ve "O" sembolleri için bu iki yeni sınıfı ekleyin. "X" ve "O" sembolleri farklı renklerde görüntülenecektir:
.X {
renk: mavi;
yazı Boyutu: 80piksel;
}.Ö {
renk: kırmızı;
yazı Boyutu: 80piksel;
} - JavaScript dosyasında, innerHTML'yi sembolü gösterecek şekilde değiştirdikten sonra, sembolü değiştirin. Örneğin, oyuncu az önce bir "X" yerleştirdiyse, sonraki sembolü "O" olarak değiştirin:
eğer (oyuncuSembol "X")
oyuncu Sembolü = "Ö"
başka
oyuncu Sembolü = "X" - Oyunu çalıştırmak için, 3'e 3 ızgarayı görüntülemek için "index.html" dosyasını bir web tarayıcısında açın:
- Hücrelere tıklayarak sembolleri ızgaraya yerleştirmeye başlayın. Oyun "X" ve "O" sembolleri arasında değişecektir:
Kazanan Nasıl Belirlenir?
Şu anda, bir oyuncu art arda üç sembol yerleştirmiş olsa bile oyun devam edecektir. Bunu her dönüşten sonra kontrol etmek için bir bitiş koşulu eklemeniz gerekecek.
- JavaScript dosyanızın içine, 3'e 3 ızgara için olası tüm "kazanan" konumları saklamak için yeni bir değişken ekleyin. Örneğin, "[1,2,3]" en üst sıradır veya "[1,4,7]" köşegen bir sıradır.
izin vermek WinPos = [
[1, 2, 3], [4, 5, 6],
[7, 8, 9], [1, 4, 7],
[2, 5, 8], [3, 6, 9],
[1, 5, 9], [3, 5, 7]
]; - checkWin() adlı yeni bir işlev ekleyin:
işlevcheckwin() {
} - İşlevin içinde, olası kazanan konumların her biri arasında geçiş yapın:
için (izin vermek ben = 0; i < winPos.uzunluk; ben++) {} - for döngüsünün içinde, tüm hücrelerin oyuncunun sembolünü içerip içermediğini kontrol edin:
eğer (
belge.getElementById (winPos[i][]0]).innerHTML oynatıcıSymbol &&
belge.getElementById (winPos[i][]1]).innerHTML oynatıcıSymbol &&
belge.getElementById (winPos[i][]2]).innerHTML oynatıcıSymbol
) {} - Koşul doğru olarak değerlendirilirse, tüm semboller düz bir çizgidedir. if ifadesinin içinde, kullanıcıya bir mesaj görüntüleyin. "win" adlı bir CSS sınıfı ekleyerek HTML öğesinin stilini de değiştirebilirsiniz:
belge.getElementById (winPos[i][]0]).classList.add("kazanç");
belge.getElementById (winPos[i][]1]).classList.add("kazanç");
belge.getElementById (winPos[i][]2]).classList.add("kazanç");
oyunBitti = doğru;setTimeout(işlev() {
uyarı (playerSymbol + "kazanır!");
}, 500); - Bu "win" CSS sınıfını "styles.css" dosyasına ekleyin. Oyuncu kazandığında, kazanan hücrelerin arka plan rengini sarıya çevirecektir:
.kazanç {
arka plan rengi: sarı;
} - Bir oyuncunun her dönüşünde, önceki adımlarda eklenen olay işleyicinin içinde checkWin() işlevini çağırın:
için (izin vermek ben = 1; ben <= 9; ben++) {
// Bir oyuncu bir hücreye her tıkladığında
belge.getElementById (i.toString()).addEventListener(
"tıklamak",
işlev() {
eğer (Bu.innerHTML "" && !oyunBitti) {
// Hücrede "X" veya "O" göster ve biçimlendir
Bu.innerHTML = playerSymbol;
Bu.classList.add (playerSymbol.toLowerCase());
// Bir oyuncunun kazanıp kazanmadığını kontrol edin
checkWin();
// Bir sonraki dönüş için sembolü diğeriyle değiştir
eğer (oyuncuSembol "X")
oyuncu Sembolü = "Ö"
başka
oyuncu Sembolü = "X"
}
}
);
}
Oyun Tahtası Nasıl Sıfırlanır
Bir oyuncu oyunu kazandığında, oyun tahtasını sıfırlayabilirsiniz. Beraberlik durumunda oyun tahtasını da sıfırlayabilirsiniz.
- HTML dosyasında tablodan sonra bir sıfırlama düğmesi ekleyin:
<düğmeİD="Sıfırla">Sıfırladüğme> - Sıfırlama düğmesine biraz stil ekleyin:
.konteyner {
görüntülemek: esnek;
esnek yön: kolon;
}#Sıfırla {
marj: 48piksel 40%;
dolgu malzemesi: 20piksel;
} - JavaScript dosyasına, kullanıcı sıfırlama düğmesine her tıkladığında çalışacak bir olay işleyici ekleyin:
belge.getElementById("Sıfırla").addEventListener(
"tıklamak",
işlev() {}
); - Kılavuzdaki her hücre için getElementById() işlevini kullanarak HTML öğesini alın. "O" ve "X" sembollerini ve diğer tüm CSS stillerini kaldırmak için innerHTML'yi sıfırlayın:
için (izin vermek ben = 1; ben <= 9; ben++) {
belge.getElementById (i.toString()).innerHTML = "";
belge.getElementById (i.toString()).classList.remove("X");
belge.getElementById (i.toString()).classList.remove("Ö");
belge.getElementById (i.toString()).classList.remove("kazanç");
oyunBitti = YANLIŞ;
} - "index.html" dosyasını bir web tarayıcısında açarak oyunu çalıştırın.
- Izgaraya "X" ve "O" sembollerini yerleştirmeye başlayın. Sembollerden birini kazanmaya çalışın.
- Oyun tahtasını sıfırlamak için sıfırlama düğmesine basın.
Oyun Yaparak JavaScript Öğrenmek
JavaScript'te daha fazla proje oluşturarak programlama becerilerinizi geliştirmeye devam edebilirsiniz. JavaScript ve HTML gibi platformlar arası, açık teknolojileri kullanarak bir web ortamında basit oyunlar ve araçlar oluşturmak kolaydır.
Programlamanızı geliştirmenin, program yazma pratiği yapmaktan daha iyi bir yolu yoktur!