JavaScript

JavaScript Kağıt, Makas, Taş Oyunu Yapımı

9 sene önce
5 Yorum
yazan Hayri
12.119 views

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.

İkinci Not: HTML img etiketini kullanmayı bilmeyenler boşuna kodları kopyalamasın, zaten uygulamayı çalıştırmayı başaramayacaktır.

Uygulamada kullanılan resimler

kagit makas tas

İlginizi Çekebilir

Yorum

  • hafif de olsa üstüne ekledim.
    buyrun =

    KAĞIT, TAŞ, MAKAS

    body{
    text-align: center;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    }
    #liste img{
    padding:5px;
    border:1px #232333 solid;
    width: 50px;
    height:50px;
    margin-left: 10px;

    }
    #liste img:hover{
    padding:5px;
    border:1px #232333 solid;
    width: 50px;
    height:50px;
    margin-left: 10px;
    background-color: lightgray;
    }
    #sonuc{
    text-align: center;
    width: 150px;
    height: 150px;
    font-size:2em;
    padding:20px;
    border:1px #232333 solid;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    }
    #pc-sonuc{
    font-size: 50px;
    text-align: center;
    }

    VS

    var liste=[“https://cdn.glitch.com/84a48414-c146-4849-8541-bded6e94ec87%2F9e0df0fe-f98a-4548-8522-c96fbf16d094.image.png?v=1622219915333″,”https://cdn.glitch.com/84a48414-c146-4849-8541-bded6e94ec87%2F111-1114370_rock-paper-scissors-rock-paper-scissors-clipart.png?v=1622219825533″,”https://cdn.glitch.com/84a48414-c146-4849-8541-bded6e94ec87%2F5ef32e76-014a-4ddf-802d-f9b106f3d6aa_cc1936c0-fd31-4813-ad94-7f3bb3469683.image.png?v=1622219811442”];
    var kagit=document.getElementById(“kagit”);
    var makas=document.getElementById(“makas”);
    var tas=document.getElementById(“tas”);
    var pcSecim=document.getElementById(“pc-secim”);
    var oSecim=document.getElementById(“o-secim”);
    var sonucYazdir=document.getElementById(“sonuc”);
    var tur=0;
    var pc=0;
    var oyuncu=0;
    kagit.onclick=secimYap;
    makas.onclick=secimYap;
    tas.onclick=secimYap;
    function secimYap(){
    var pc= RasgeleKagit();
    var secim= this.dataset.id;
    if(pc==0 && secim==0)
    {sonuc=”Sonuç : Berabere”;
    oSecim.src=liste[0];
    setTimeout(function(){
    console.log(‘▀▀▀▀【S̳̿͟͞o̳̿͟͞n̳̿͟͞u̳̿͟͞ç̳̳̿̿͟͟͞͞l̳̿͟͞a̳̿͟͞r̳̿͟͞】▀▀▀▀’);
    console.log(‘Berabere sonuçlandı’);
    console.warn(‘Oyuncu : Kağıt’);
    console.warn(‘Bilgisayar : Kağıt’);
    console.error(‘Site veriyi kaydedemedi!’);}, 4000);
    }
    else if(pc==0 && secim==1)
    {
    sonuc=”Sonuç : Kazandın”;
    oSecim.src=liste[1];
    setTimeout(function(){
    console.log(‘▀▀▀▀【S̳̿͟͞o̳̿͟͞n̳̿͟͞u̳̿͟͞ç̳̳̿̿͟͟͞͞l̳̿͟͞a̳̿͟͞r̳̿͟͞】▀▀▀▀’);
    console.log(‘Galibiyetle sonuçlandı’);
    console.warn(‘Oyuncu : Makas’);
    console.warn(‘Bilgisayar : Kağıt’);
    console.error(‘Site veriyi kaydedemedi!’);}, 4000);
    }
    else if(pc==0 && secim==2)
    {
    oSecim.src=liste[2];
    sonuc=”Kaybettin, kağıt taşı sarar”;
    }
    else if(pc==1 && secim==0)
    {
    sonuc=”Kaybettin, makas kağıdı keser”;
    oSecim.src=liste[0];
    }
    else if(pc==1 && secim==1)
    {
    oSecim.src=liste[1];
    sonuc=”Sonuç : Berabere”;
    setTimeout(function(){
    console.log(‘▀▀▀▀【S̳̿͟͞o̳̿͟͞n̳̿͟͞u̳̿͟͞ç̳̳̿̿͟͟͞͞l̳̿͟͞a̳̿͟͞r̳̿͟͞】▀▀▀▀’);
    console.log(‘Beraberlikle sonuçlandı’);
    console.warn(‘Oyuncu : Makas’);
    console.warn(‘Bilgisayar : Makas’);
    console.error(‘Site veriyi kaydedemedi!’);}, 4000);
    }
    else if(pc==1 && secim==2)
    {
    oSecim.src=liste[2];
    sonuc=”Kazandın, Taş makası kırar”;
    }
    else if(pc==2 && secim==0)
    {
    oSecim.src=liste[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)
    {
    oSecim.src=liste[2];
    sonuc=”Sonuç : Berabere”;
    setTimeout(function(){
    console.log(‘▀▀▀▀【S̳̿͟͞o̳̿͟͞n̳̿͟͞u̳̿͟͞ç̳̳̿̿͟͟͞͞l̳̿͟͞a̳̿͟͞r̳̿͟͞】▀▀▀▀’);
    console.log(‘Beraberlikle sonuçlandı’);
    console.warn(‘Oyuncu : Taş’);
    console.warn(‘Bilgisayar : Taş’);
    console.error(‘Site veriyi kaydedemedi!’);}, 4000);
    }
    sonucYazdir.innerHTML=sonuc;
    }

    function RasgeleKagit(){
    var sayi= Math.round(Math.random()*2);
    pcSecim.src=liste[sayi];

    return sayi;
    }

    Cevapla

Yorum Yap