XoX oyunu

Hazırlayan : 22430070025 Hatice Kocatürk

Projemde angular tabanlı XoX oyunu bir diğer adı ile TicTacToe geliştireceğim. Uygulamayı visual studio code programını kullanarak geliştireceğiz.

npm install -g @angular/cli

Öncelikle projemizi bu şekilde oluşturuyoruz.

VSC ile angular tabanlı uygulama geliştirirken yandaki ekran bizi karşılar. App klasörü içerisinde app.component.html, app.component.ts, app.module.ts adlı dosyalaramız var.

app.component.html : Bu bileşen ile oyunumuzda görünecek olan 9 kutu divini, yeni oyun button ayarlarını bunların style özelliklerini, buttona bastığımızda bizi hangi değişkene yönlendireceği (click) ayarlarını yani sayfamızın temek yapısını burada oluşturuyoruz.

app.component.ts : Değişkenlerimizi bu dosyada atıyoruz, yeni oyun başladığıında ne olacağını newGame(), oyunu yeniden başlatmak istediğimizde constructor(), işaretleme yapabilmek için setMark(), oyunun hangi şartlar altında biteceğini isGameOver(), yaptığımız hamlelere geri dönebilmek için returnSelcetMove() gibi özellikleri bu dosya içerisinde oluşturuyoruz.

index.html : Bootstrap'in derlenmiş CSS ve JS linklerini Bootstrop sayfasından kopyalayıp burada dahil ediyoruz. Head kısmına CSS body kısmına JS linklerini ekliyoruz

Terminale ng serve yazarak oyunu çalıştırabilirsiniz.

Tüm bu dosyaları kullanarak basit bir XoX oyunu oluşturacağız.

Projenin kodlarına ulaşmak için : https://github.com/wanda38/xox-oyunu.git

Oyunumuzun genel yapısı aşağıdaki gibidir. Kullanıcı kazananı, hamle sayısını, sıranın kimde olacağını (x veya O olarak), hamle sayılarını görebilmekte. Yeni oyuna basarak oyunu baştan başlatabilmekte ve hamlelerden birini seçerek istediği hamleye dönebilmektedir.

Page updated

Report abuse