2 dk, tahmini okuma süresi
Javascript ile X-O-X
En Son Güncelleme: 11 Mayıs, 2022Bu oyun projesinde temel HTML, CSS ve javascript ile basit bir oyun oluşturacağız. Bu oyun tamamen çalışır durumda. Ama yine de iyileştirme için yapmak isteyebileceğiniz bir çok bölüm de bulacaksınız. Hadi aşlayalım!
§HTML Dosyamız
Oyun için oluşturmak istedğimiz HTML dosyamız 3 ana bölümden oluşuyor. Sıranın kimde olduğunu göstermek için kullanacağımız başlık. Oyun tahtamızı oluşturacak div. "Modal"ımız için başka bir başlık. MAdlımız başlangıçta görünmez olacak ancak oyun bittiğinde görünür hale getireceğiz. Modalda, sayfayı yeniden yüklemek için bir butonumuz olacak.
"index.html" dosyasının tam kodu burada:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
<script defer src="main.js"></script>
</head>
<body>
<h1 class="turn-title"></h1>
<div class="game-wrapper">
<div class="game-box 1"></div>
<div class="game-box 2"></div>
<div class="game-box 3"></div>
<div class="game-box 4"></div>
<div class="game-box 5"></div>
<div class="game-box 6"></div>
<div class="game-box 7"></div>
<div class="game-box 8"></div>
<div class="game-box 9"></div>
</div>
<div class="finished-modal">
<button class="modal-btn">RESTART</button>
<p class="modal-text"></p>
</div>
</body>
</html>
§Oyunumuza Biraz CSS Ekleyelim
Temel bilgilerle başlayacağız. Öncelikle "style.css" dosyasını oluşturun. Ben tüm projelerime aşağıdaki kod parçasını ekleyerek başlıyorum :
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: rgb(226, 237, 236);
}
Tek yaptığımız projemiz için bazı temel değerler belirlemekti.
Şimdi oyun tahtamızı şekillendirmeye başlayabiliriz. Tahtamızda 9 kutu içeren 3x3 grid olacak. "border" değerleriyle çalışmak yerine gride daha koyu bir arka plan değeri verdim ve bir grid aralığı (grid-gap) değeri belirledim. Artık kutuların nerede olduğunu biliyoruz. CSS dosyamızın bu kısmını az önce yazdığımız kısmın hemen altına ekleyebilirsiniz:
.turn-title {
margin-bottom: 50px;
}
.game-wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 1vw;
background: rgb(0, 0, 0);
border: none;
}
.game-box {
width: 140px;
height: 140px;
font-size: 8rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: rgb(151, 218, 212);
}
Aslında bu kısmı mobil kullanıcılar için "responsive" hale getirdim ama size küçük bir meydan okuma olsun diye sonra geri dönüp sildim. BEnden nacizane bir tavsiye, oyununuzu daha güzel bir hale getirin ve kişiselleştirin. Hatta kısa bir animasyon bile oluşturabilirsiniz. Bir adım daha ileri gitmek her zaman iyi bir fikirdir. Bu çok daha kendinden emin bir web developer olmanıza yardımcı olacaktır.
CSS'mizin geri kalanı, sayfayı yenilemek için modal ve modal butonlarımız için olacak. Modal sayfayı "display: fixed" deperiyle ekranı kaplayacak. Bu, onu sayfamızdaki diğer tüm içeriğin üzerinde tutacaktır. Modal içindeki içerik merkezde görünecektir (minimum CSS ile). Burada görebileceğiniz gibi, burada kullandığım CSS de çok basit:
.finished-modal {
width: 100%;
background: rgba(0, 0, 0, 0.5);
height: 100%;
color: white;
font-size: 2rem;
position: fixed;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
visibility: hidden;
}
.modal-btn {
background-color:rgb(100, 170, 166);
padding: 20px;
font-size: 2rem;
border-radius: 15px;
border: none;
color: white;
transition: 0.5s;
}
.modal-btn:hover {
background-color: rgb(9, 169, 156);
cursor: pointer;
}
Bu kodu, biraz tutarlı bir görünüm sağlamak için style.css dosyasının altına ekleyin.
§Javascript ile Oyunumuzu Çalıştıralım
Javascript, oyunumuzun tek (biraz) karmaşık kısmı. Her şeyden önce ihtiyacımız olan, kutuların içinde oluşturulacak bir dizi değerdir (array oluşturacağız). Bu değerler daha sonra üzerlerine tıklanarak seçilecek ve mevcut kullanıcının işaretiyle (veya harfleriyle) değiştirilecek. "Mevcut" değeri "X" ve "O" arasında değiştireceğiz.
Oynama sırasının kimde olduğunu kullanıcılara bir şekilde göstermemiz gerekiyor. Bunun için boş h1 başlığını seçeceğiz ve bu başlığın metin içeriğini dinamik bir şekilde oluşturacağız.
Grid içindeki (ve kutulardaki) değerleri işlemek için bir array kullanmayı seçtim (length 9 olacak şekilde). Başlangıçta 9 boş dize (sitring) değeri alacak. HTML dosyamızda, class değerlerinde kutularımızı da numaralandırdığımızı görebilirsiniz. Böylece bu class değerlerini kullanarak üzerlerine tıkladığımızda arraydeki yerlerini kolayca saptayabileceğiz. Bu, boş string değeri kullanıcı için sahip olduğumuz mevcut değerle (X veya O) değiştirmemize yarayacak.
Oyun tahtamızdaki her tıklamadan sonra kazanan olup olmadığını kontrol etmek için 2 fonksiyon oluşturdum. Yatay ve dikey kontrollerimiz için basit bir for döngüsü kullanacağız. Çapraz olarak sıralama olup olmadığını kontrol etmek için oluştruduğum fonksiyon yerine çok daha iyisini oluşturabilirsiniz. Ben mümkün olduğu kadar basit tutmaya çalıştım. Sizin için iyi bir egzersiz olabilir.
Yukarıda açıklanan fonksiyonlarımızda bir kazanan bulursak, elbette bu durumda bir şey yapmamız gerekiyor. Bir mesaj belirleyip bu mesajı modalımızı kullanarak göstermeliyiz. Modalın "display" değerini hidden'dan block'a değiştireceğiz ve modalımızı göstereceğiz.
I tried to explain the code in comments as well. If there is anything you have trouble understanding, just play with the code for a while and I'm sure you will make sense of it. The full code can be found here:
Kodu yorumlarda da açıklamaya çalıştım. Anlamakta zorlandığınız bir şey varsa, sadece kodla biraz oynayın ve eminim anlayacaksınız. Kodun tamamı burada bulabilirsiniz:
const turn = document.querySelector('.turn-title');
const finishedModal = document.querySelector('.finished-modal');
const modalBtn = document.querySelector('.modal-btn');
const boxes = document.querySelectorAll('.game-box')
const gameArray = ["","","","","","","","",""];
let winner = undefined;
// X ile başlayacağız
let current = "X";
// Şimdi sıranın kime ait olduğunu göstermek için
// başlığın metin değerini ayarlayın.
turn.textContent = `${current}'s Turn`
// gameArray'i değerleri bu fonksiyonla kutuların içine
// yazdırılacak
const render = () => {
for(let i = 0; i < 9; i++){
boxes[i].textContent = gameArray[i]
}
}
render();
addEventListener('click', (e) => {
// Yeniden başlat (restart) düğmesine tıklarsak
if(e.target === modalBtn) {
window.location.reload(true);
return
}
// Kutunun numarasını seç
const boxNum = parseInt(e.target.classList[1]) - 1;
// Kutu boş değilse
if(gameArray[boxNum] !== "") return
// Kutu boşsa
gameArray[boxNum] = current
// Bir kazanan olup olmadığını kontrol edin
horizontalVerticalCheck()
diagonalCheck();
// Arraydeki tüm boş dizeler (stringler) değiştirilirse
if(gameArray.indexOf("") < 0) gameFinished(winner)
// En son aktif işareti yerleştirin
if(current === 'X') current = 'O';
else if(current === 'O') current = 'X';
turn.textContent = `${current}'s Turn`
// En son diziyi oluşturmak için render'ı tekrar çalıştırın
render();
});
const diagonalCheck = () => {
if(
gameArray[0] === gameArray[4] &&
gameArray[0] === gameArray[8] &&
gameArray[0] !== ""
){
console.log(current, "kazandı")
winner = current;
gameFinished(winner)
return;
}
else if(
gameArray[2] === gameArray[4] &&
gameArray[2] === gameArray[6] &&
gameArray[2] !== ""
) {
console.log(current, "kazandı")
winner = current;
gameFinished(winner)
return;
}
}
const horizontalVerticalCheck = () => {
// Yatay ve dikey hizalamaları kontrol ediyoruz
for(let i = 0; i < 3; i++){
// dikey hizalamayı kontrol ediyoruz
if(
// örnek: arr[0] === arr[3] === arr[6]
gameArray[i] === gameArray[i+3] &&
gameArray[i] === gameArray[i+6] &&
gameArray[i] !== ""
){
console.log(current, "kazandı")
winner = current;
gameFinished(winner)
return;
}
// check for horizontal alignment
else if(
// örnek: arr[0] === arr[1] === arr[2]
gameArray[3*i] === gameArray[3*i+1] &&
gameArray[3*i] === gameArray[3*i+2] &&
gameArray[3*i] !== ""
) {
console.log(current, "kazandı")
winner = current;
gameFinished(winner)
return;
}
}
}
const gameFinished = (winner) => {
let text = undefined;
// Oyun bittiğinde bir kazanan yoksa
if(winner === undefined) {
text = "Kimse kazanmadı"
} else {
text = `${winner} kazandı, tebrikler!`
}
// "text" yukarıda tanımlanmışsa
if(text !== undefined) {
const modal = document.querySelector('.finished-modal');
const p = document.querySelector('.modal-text');
p.textContent = text;
modal.appendChild(p);
// modal'ı göster
modal.style.visibility = 'visible';
}
}
§Sonuç
Bu oyunu oluşturmak kesinlikel eğlenceliydi. Eminim siz de bu oyunu oluştururken gayet eğleneceksiniz. Buradaki kodu sadece kopyalamayın, geliştirin ve kendinizden bişeyler ekleyin.
Not all games need to be complex, this was an example for creating a simple yet fun game using some basic web development knowledge.
Bütün oyunların karmaşık olmasına gerek yok. Bu oyun bazı temel web geliştirme bilgilerini kullanarak basit ama eğlenceli bir oyun yaratabileceğinize bir örnekti.
Ilker AkbiyikBenzer Paylaşımlar
