JavaScript ile Taş – Kağıt – Makas Oyunu Yapımı

Yükleniyor

Çok basit javascript komutlarıyla taş-kağıt-makas oyunu yapımını anlatacağım inşallah.Aslında kendimin de yeni yeni öğrendiğim kodları size açıklayarak öğretme hevesine girdim. Bunda eğitim fakültesinde okumamın da etkisi olabilir. Eğitim aşkıyla yanıp tutuşuyorum anlayacağınız :)

Oyunun Önizlemesi İçin: Tıklayınız

Bittiğinde sizinki de böyle olacak :)

Taş-Kağıt-Makas Oyunu Neydi?

Taş-Kağıt-Makas oyunu, iki kişinin aynı anda taş, kağıt ya da makası seçmesi ve ortaya çıkan kombinasyona göre bir tarafın kazanması ya da beraberlikle sonuçlanan oyundu. Hepimiz küçükken oynamışızdır. Biz yazacağımız kodla bu oyunu bilgisayara karşı oynayacağız.

Gelelim Kodlamaya

Öncelikle oyunumuz bir internet sayfasında olacak. O yüzden her html sayfasında olduğu gibi klasik kodlarımızı yazalım


<!Doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <title>Taş-Kağıt-Makas</title>
</head>
<body>

</body>

</html>

Bu kodlarla sayfamızın başlığını Taş-Kağıt-Makas yaptık ve utf-8 dilinde yaparak ş, ğ, ı gibi Türkçe karakterlerimizin de sayfada görülebilmesini sağladık.

JavaScript’imizi yazalım

Oyunumuzun iki ana dayanağı var. 1- oyunucunun seçimi, 2- bilgisayarın seçimi. Öncelikle bu seçimleri scriptimize tanımlayalım


var oyuncuSecimi

var bilgisayarSecimi

ancak biz ne istiyoruz, oyuncu seçimini oyuncuya bırakmak, bilgisayar seçimini ise rastgele yapmak. Bunun için şunları yapıyoruz.


var oyuncuSecimi = prompt("taş, kağıt ya da makastan birini seç!");

var bilgisayarSecimi = Math.random();

prompt koduyla bir diyalog kutusu açtık ve kullanıcıya birini seçmesini söyledik. Math.random ile de bilgisayara 0 ile 1 arasında bir rasyonel sayı sallamasını söyledik. Ne alaka demeyin.


var oyuncuSecimi = prompt("taş, kağıt ya da makası seç");
var bilgisayarSecimi = Math.random();
if (bilgisayarSecimi < 0.34) {
 bilgisayarSecimi = "taş";
} else if(bilgisayarSecimi <= 0.67) {
 bilgisayarSecimi = "kağıt";
} else {
 bilgisayarSecimi = "makas";
}

&#91;/code&#93;

Bakınız ne oldu, 0 ile 1 arasında rasyonel sayıları 3'e ayırdık ve Math.random ile gelecek sayıyı böylelikle bilgisayarSecimi'ne atadık.
<h3>Kim Ne Yaptı?</h3>
Üstteki işlemler hiçbir zaman oyunumuzda ekranda gözükmez. Ancak bunlar oyunumuz için gereklidir. Şimdi kimin hangi seçimi yaptığını ekrana yazalım.



document.write("Sizin seçiminiz:"); document.write(" " + "<b>" + oyuncuSecimi + "</b><br />");
document.write("Bilgisayarın seçimi:"); document.write(" " + "<b>" + bilgisayarSecimi + "</b><br />");

Böylelikle ne oldu? Şu oldu:

Sizin seçiminiz: taş/kağıt/makas

Bilgisayarın seçimi: taş/kağıt/makas

İki Seçim de Aynı Olursa?

Evet, en civcivli kısımlara geliyoruz. Oyuncuya seçim yapmasını söyledik, bilgisayara rastgele bir seçim yaptırdık ve bunları ekrana yazdık. Peki kurallar? İşte şimdi onları ayarlayalım.


var compare = function(secim1, secim2) {
 if(secim1 === secim2) {
 return document.write ("Berabere!");
 }

yukarıdaki kodla compare adında bir fonksiyon ürettik ve parametrelerini secim1 ve secim2 yaptık. ve dedik ki, secim1 ile secim2 aynı olursa ekrana "Berabere!" yaz. oradaki return'un amacı ise birazdan o fonksiyona eklenecek kodların çalışmasını engellemek. Çünkü oyun berabereyse, diğer ihtimallere bakmaya gerek kalmamış demektir.

secim1 Taş Olursa Neler Olur?

Eveet. Şimdi de gelelim compare fonksiyonumuza secim1 "taş" olursa hangi durumda ne olacağını belirtmeye.


if(secim1 === "taş") {
 if(secim2 === "makas") {
 document.write("Sen Kazandın!");
 }
 else {
 document.write("Kaybettin!");
 }
}

compare fonksiyonumuza dedik ki, eğer secim1 (yani oyuncu seçimi) taş olursa aşağıdakilere bir göz at. Aşağısına da bir başka if komutu ekledik ve secim2 "makas" olursa "Sen Kazandın!", eğer olmazsa (ki bu durumda bilgisayar seçimi kağıt oluyor) "Kaybettin!" yazdırmasını söyledik.

secim1 Kağıt Olursa?

Aynı yukarıdaki kodda olduğu gibi compare fonksiyonumuza bir if komutu ve o komutun içinde de bir başka if / else komutu ekliyoruz.

,

if(secim1 === "kağıt") {
 if(secim2 === "taş") {
 document.write("Sen Kazandın!");
 } else {
 document.write("Kaybettin!");
 }
}

Gelelim son ihtimale.

secim1 Makas Olursa?

Yukarıdaki iki kodda olduğu gibi bunu da compare fonksiyonuna tanımlıyoruz.


if(secim1 === "makas") {
 if(secim2 === "taş") {
 document.write("Kaybettin!");
 } else {
 document.write("Kazandın!");
 }
}};

Şimdi kodda pek farklılık yok. Üstteki diğer ikisine göre tek farkı sonundaki fazladan } işareti ve noktalı virgül (;). Bunun nedeni ise compare fonksiyonunu kapatıyor oluşumuz. Tebrikler, oyunun kurallarını yazdık!

Oyun Başlasın!

compare fonksiyonumuzu oyuncuSecimi ve bilgisayarSecimi parametreleriyle kullanıyoruz ve oyunumuz hazır hale geliyor


compare(oyuncuSecimi, bilgisayarSecimi);

Büyük Resmi Görün

Kodlarımız tamam, oyunumuz oynanmaya hazır. Bütün bunlarla kodumuz şu hali aldı.


<!Doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <title>Taş-Kağıt-Makas</title>
</head>
<body>
<script type="text/javascript">
var oyuncuSecimi = prompt("taş, kağıt ya da makası seç");
var bilgisayarSecimi = Math.random();
if (bilgisayarSecimi < 0.34) {
 bilgisayarSecimi = "taş";
} else if(bilgisayarSecimi <= 0.67) {
 bilgisayarSecimi = "kağıt";
} else {
 bilgisayarSecimi = "makas";
}
document.write("Sizin seçiminiz:"); document.write(" " + "<b>" + oyuncuSecimi + "</b><br />");
document.write("Bilgisayarın seçimi:"); document.write(" " + "<b>" + bilgisayarSecimi + "</b><br />");

var compare = function(secim1, secim2) {
 if(secim1 === secim2) {
 return document.write ("Berabere!");
 }

if(secim1 === "taş") {
 if(secim2 === "makas") {
 document.write("Sen Kazandın!");
 }
 else {
 document.write("Kaybettin!");
 }
}
if(secim1 === "kağıt") {
 if(secim2 === "taş") {
 document.write("Sen Kazandın!");
 } else {
 document.write("Kaybettin!");
 }
}
if(secim1 === "makas") {
 if(secim2 === "taş") {
 document.write("Kaybettin!");
 } else {
 document.write("Kazandın!");
 }
}};
compare(oyuncuSecimi, bilgisayarSecimi);
</script>

</body>
</html>

Eğer Oyunu WordPress'te, Blogger'da vs. yazı içine ekleyecekseniz şu kodu kullanın:

</pre>
<script type="text/javascript">
var oyuncuSecimi = prompt("taş, kağıt ya da makası seç");
var bilgisayarSecimi = Math.random();
if (bilgisayarSecimi < 0.34) {
 bilgisayarSecimi = "taş";
} else if(bilgisayarSecimi <= 0.67) {
 bilgisayarSecimi = "kağıt";
} else {
 bilgisayarSecimi = "makas";
}
document.write("Sizin seçiminiz:"); document.write(" " + "<b>" + oyuncuSecimi + "</b><br />");
document.write("Bilgisayarın seçimi:"); document.write(" " + "<b>" + bilgisayarSecimi + "</b><br />");

var compare = function(secim1, secim2) {
 if(secim1 === secim2) {
 return document.write ("Berabere!");
 }

if(secim1 === "taş") {
 if(secim2 === "makas") {
 document.write("Sen Kazandın!");
 }
 else {
 document.write("Kaybettin!");
 }
}
if(secim1 === "kağıt") {
 if(secim2 === "taş") {
 document.write("Sen Kazandın!");
 } else {
 document.write("Kaybettin!");
 }
}
if(secim1 === "makas") {
 if(secim2 === "taş") {
 document.write("Kaybettin!");
 } else {
 document.write("Kazandın!");
 }
}};
compare(oyuncuSecimi, bilgisayarSecimi);
</script>

Bir başka anlatımda görüşmek dileğiyle.

JavaScript ile Taş – Kağıt – Makas Oyunu Yapımı” için 1 yorum

    Author’s gravatar

    başlangıç için iyi bir örnek. teşekkür ederim paylaşım için.

    Cevapla

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir