Jump to content
×
×
  • Create New...

Lorem Ipsum is simply dummy text

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

Test Test

Lorem Ipsum is simply dummy text

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

Test Test

Lorem Ipsum is simply dummy text

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

Test Test

Lorem Ipsum is simply dummy text

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

Test Test

Lorem Ipsum is simply dummy text

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

Test Test

  • Bu Alana Reklam Verebilirsiniz
    Bu Alana Reklam Verebilirsiniz

Taş Kağıt Makas Oyunu Javascript İle Yapımı | Tüm Kaynak Kodları

Rate this topic


Recommended Posts

Taş Kağıt Makas Oyunu Javascript İle Yapımı | Tüm Kaynak Kodları
  • Members

kagit-makas-tas-oyunu.webp

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>

 

tas.webpmakas.webpkagit.webp

Ada LoveLace

Link to comment
https://weblep.com/topic/185-ta%C5%9F-ka%C4%9F%C4%B1t-makas-oyunu-javascript-i%CC%87le-yap%C4%B1m%C4%B1-t%C3%BCm-kaynak-kodlar%C4%B1/
Share on other sites


Konu Altı Reklam 1
Konu Altı Reklam 2
  • Replies 0
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...