Bir çoğumuzun bildiği bir oyundur. Ellerimizi kağıt, makas, taş şekline sokarak bir birimize karşı üstünlük sağlamaya çalışırız. Oyunu kaybeden oyunun başındaki belirlenen cezayı çekmek zorunda kalır.
Şimdi oyunun kuralı biraz açıklayalım.
Kağıt Taşa karşı üstündür.
Taş Makas karşı üstündür.
Makasta taşa karşı üstündür.
Şimdi bu derecelendirmeden yola çıkarak javascript aşağıdaki kağıt, makas, taş oyununu hazırladım. Kodları inceleyebilirsiniz.
Oyunun çalışmasını biraz açıklayayım. Kağıt, makas, taş resimlerinden birine tıkladığında; aynı zamanda bilgisayar da bir seçim yapar. Yapılan seçim yukarıdaki şartlara göre değerlendirilir. Sonuç olarak kazanan belirlenmiş olunur. Tekrar resimlere tıklandığında oyun yeniden başlamış olur.
Not: Aşağıda paylaşılan resimleri de uygulama klasörüne eklemeniz gerekmektedir.
<!doctype html>
<html>
<head>
<title>KAĞIT, TAŞ, MAKAS OYUNU</title>
<meta charset="utf-8">
<style>
body{
background: #e74c3c;
}
#liste img{
padding:5px;
border:1px #232333 solid;
}
#sonuc{
float:left;
width: 260px;
height: 260px;
font-size:2em;
padding:20px;
background: #f1c40f;
}
#pc-sonuc{
float:left;
}
</style>
</head>
<body>
<div id="liste">
<img src="kagit.png" id="kagit" width="300" height="300" data-id="0">
<img src="makas.png" id="makas" width="300" height="300" data-id="1">
<img src="tas.png" id="tas" width="300" height="300" data-id="2">
</div>
<div id="pc-sonuc">
<img src="" id="pc-secim" width="300" height="300" alt="pc seçimi">
</div>
<div id="sonuc">
</div>
<script>
var liste=["kagit.png","makas.png","tas.png"];
var kagit=document.getElementById("kagit");
var makas=document.getElementById("makas");
var tas=document.getElementById("tas");
var pcSecim=document.getElementById("pc-secim");
var sonucYazdir=document.getElementById("sonuc");
kagit.onclick=secimYap;
makas.onclick=secimYap;
tas.onclick=secimYap;
function secimYap(){
var pc= RasgeleKagit();
/*dizi sıralamasını kullanmak daha mantıklıydı fakat yukarıdaki resimlerin sıralamsı değişince hata verecektir.*/
/*bu karşılaştırmada da rsimlerin isimlerine dikkat etmek gerekiyor.*/
var secim= this.dataset.id;
if(pc==0 && secim==0)
{
sonuc="ikinizde aynı seçimi yaptınız";
}
else if(pc==0 && secim==1)
{
sonuc="Kazandın, makas kağıdı keser";
}
else if(pc==0 && secim==2)
{
sonuc="Kaybettin, kağıt taşı sarar";
}
else if(pc==1 && secim==0)
{
sonuc="Kaybettin, makas kağıdı keser";
}
else if(pc==1 && secim==1)
{
sonuc="ikinizde aynı seçimi yaptınız";
}
else if(pc==1 && secim==2)
{
sonuc="Kazandın, Taş makası kırar";
}
else if(pc==2 && secim==0)
{
sonuc="Kazandın, kağıt taşı sarar";
}
else if(pc==2 && secim==1)
{
sonuc="Kaybettin, Taş makası kırar";
}
else if(pc==2 && secim==2)
{
sonuc="ikinizde aynı seçimi yaptınız";
}
sonucYazdir.innerHTML=sonuc;
}
function RasgeleKagit(){
var sayi= Math.round(Math.random()*2);
pcSecim.src=liste[sayi];
return sayi;
}
</script>
</body>
</html>
İkinci Not: HTML img etiketini kullanmayı bilmeyenler boşuna kodları kopyalamasın, zaten uygulamayı çalıştırmayı başaramayacaktır.
Uygulamada kullanılan resimler
Yorumlar
Yorum Gönder