Members programYaz Posted April 25, 2022 Members #1 Share Posted April 25, 2022 (edited) Oyunun çalışma mantığı şu şekilde, oyun başladığında kullanıcıya bir tane dört işlem içeren matematik sorucu soruluyor. Eğer kullanıcı soruyu doğru cevaplarsa yeşil puan +1, soru yanlış cevaplanırsa kırmızı puan +1 şeklinde değiştirilip kullanıcıya yeni bir soru soruluyor. Oyun bu şekilde oynanmaya devam ediyor. Oyunu çalıştırmak için bağlantıya tıklayın: Matematik Oyunu Oyna Oyunun kodlarnı yazmaya başlayalım. HTML 1.Aşama: İlk olarak HTML etiketlerini oluşturarak başlıyoruz. <div id="oyun-panel"> <h1>Dört İşlem Matematik Oyunu</h1> <span id="sayi1">0</span> <span id="opt">+</span> <span id="sayi2">0</span> <span>=</span> <input type="text" id="sonuc"> <input type="button" id="cevapla" value="Cevapla"> <div style="clear:both"></div> <div id="dogru">0</div> <div id="yanlis">0</div> <div style="clear:both"></div> </div> JavaScript 2.Aşama: HTML nesnelerinin javascript ile oluşturuyoruz. var sayi1,sayi2,dogru=0,yanlis=0,sonuc,cevapla,opt; //HTML nesnelerinin oluşturulması sayi1=document.getElementById("sayi1"); sayi2=document.getElementById("sayi2"); opt=document.getElementById("opt"); sonuc=document.getElementById("sonuc"); cevapla=document.getElementById("cevapla"); dogru=document.getElementById("dogru"); yanlis=document.getElementById("yanlis"); 3.Aşama: Kullanıcıya hesaplaması için rastgele sayı üretmek için rastgele sayı fonksiyonu oluşturuyoruz. Hazırlanan rastgele sayı fonksiyonunu yazilimbilisim.net içinde bulabilirsiniz. //rastgele sayı üretme fonksiyonu //https://www.yazilimbilisim.net/javascript/javascript-rastgele-sayi-uretme/ Math.rastgele=function(alt, ust){ let sayi=Math.random(); sayi=sayi*(ust-alt); sayi=Math.floor(sayi)+alt; return sayi; } 4.Aşama: Kullanıcıya yeni soru sormak için yeniSoru adında bir fonksiyon oluşturup fonksiyonu aşağıdaki gibi dolduruyoruz. Oluşturulan fonksiyonda rastgele sayı metodunu kullanarak rastgele sayı seçme işlemini gerçekleştiriyoruz. Bu fonksiyonda dikkat edilecek nokta bölme işleminde işlemde zorluk olmaması için kalansız bölme yapmasını sağlamaktadır. Bu işlem için döngü içinde kalansız işlem kontrol ediliyor ve ikinci sayı bu şarta uyacak şekilde seçiliyor. //oyun başladığında yada soru tahmin edildiğinde yeni soru sormak için kullanılır. function yeniSoru(){ let islem=["+","-","*","/"]; opt.textContent=islem[Math.rastgele(0,4)]; //operatör seçimi sayi1.textContent=Math.rastgele(0,50); sayi2.textContent=Math.rastgele(0,50); if(opt.textContent=="/"){ //kalansız bölüm için eklenmiştir. while(true){ sayi2.textContent=Math.rastgele(0,50); if(sayi1.textContent%sayi2.textContent==0) {break;} } } } 5.Aşama:Sayfa yüklendiğinde yeniSoru fonksiyonunu çalıştırıp kullanıcıya bir tane soru sorması sağlanıyor. //sayfa yüklendiğinde ilk kurulumun yapılması window.onload=function(){ yeniSoru(); } 6.Aşama: Bu aşamada opt seçeneğine bağlı olarak işlem sonucu kullanıcı tarafından verilen sayı ile kontrol edip cevap doğru ise yeşil +1, yanlış ise kırmızı +1 olacak şekilde arttırma işlemi gerçekleştiriliyor. Sonrasında da yeni bir soru ile kullanıcının devam etmesi sağlanıyor. //cevapla butonuna basıldığında değerlendirme işlemi cevapla.onclick=function(){ let cevap,s1,s2; s1=Number(sayi1.textContent); s2=Number(sayi2.textContent); switch(opt.textContent){ case '+':cevap=s1+s2;break; case "-":cevap=s1-s2;break; case "*":cevap=s1*s2;break; case "/":cevap=s1/s2;break; default:break; } if(sonuc.value==cevap){ dogru.textContent=Number(dogru.textContent)+1; } else{ yanlis.textContent=Number(yanlis.textContent)+1; } yeniSoru(); } JavaScript Matematik Oyunu Uygulamasının Tüm Kodları ve CSS düzenlemesi: <!doctype html> <html> <head> <meta charset="utf-8"> <title>Matematik Oyunu-YazilimBilisim.Net</title> <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400" rel="stylesheet"> <style> body{ color:#fff; background: #B3E5FC; font-family: 'Source Sans Pro', sans-serif; } #oyun-panel{ width: 330px; background: #03A9F4; padding:16px; text-align: center; margin:auto; } h1{ margin:0 0 16px 0; border:solid 1px #fff; padding:5px; font-weight: 300; } span{ font-size: 125%; padding:10px; } #sonuc{ width: 50px; } #cevapla{ margin-top:10px; padding:5px; border:none; width: 100px; background: #0288D1; color:#fff; } #cevapla:hover{ background: #8BC34A; } #dogru,#yanlis{ font-size: 150%; margin-top:10px; padding:10px; display: inline-block; } #dogru{ background: #4CAF50; } #yanlis{ background: #D32F2F; } </style> <body> <div id="oyun-panel"> <h1>Dört İşlem Matematik Oyunu</h1> <span id="sayi1">0</span> <span id="opt">+</span> <span id="sayi2">0</span> <span>=</span> <input type="text" id="sonuc"> <input type="button" id="cevapla" value="Cevapla"> <div style="clear:both"></div> <div id="dogru">0</div> <div id="yanlis">0</div> <div style="clear:both"></div> </div> <script> var sayi1,sayi2,dogru=0,yanlis=0,sonuc,cevapla,opt; //HTML nesnelerinin oluşturulması sayi1=document.getElementById("sayi1"); sayi2=document.getElementById("sayi2"); opt=document.getElementById("opt"); sonuc=document.getElementById("sonuc"); cevapla=document.getElementById("cevapla"); dogru=document.getElementById("dogru"); yanlis=document.getElementById("yanlis"); //rastgele sayı üretme fonksiyonu //https://www.yazilimbilisim.net/javascript/javascript-rastgele-sayi-uretme/ Math.rastgele=function(alt, ust){ let sayi=Math.random(); sayi=sayi*(ust-alt); sayi=Math.floor(sayi)+alt; return sayi; } //oyun başladığında yada soru tahmin edildiğinde yeni soru sormak için kullanılır. function yeniSoru(){ let islem=["+","-","*","/"]; opt.textContent=islem[Math.rastgele(0,4)]; //operatör seçimi sayi1.textContent=Math.rastgele(0,50); sayi2.textContent=Math.rastgele(0,50); if(opt.textContent=="/"){ //kalansız bölüm için eklenmiştir. while(true){ sayi2.textContent=Math.rastgele(0,50); if(sayi1.textContent%sayi2.textContent==0) {break;} } } } //sayfa yüklendiğinde ilk kurulumun yapılması window.onload=function(){ yeniSoru(); } //cevapla butonuna basıldığında değerlendirme işlemi cevapla.onclick=function(){ let cevap,s1,s2; s1=Number(sayi1.textContent); s2=Number(sayi2.textContent); switch(opt.textContent){ case '+':cevap=s1+s2;break; case "-":cevap=s1-s2;break; case "*":cevap=s1*s2;break; case "/":cevap=s1/s2;break; default:break; } if(sonuc.value==cevap){ dogru.textContent=Number(dogru.textContent)+1; } else{ yanlis.textContent=Number(yanlis.textContent)+1; } yeniSoru(); } </script> </body> </head> </html> Edited April 25, 2022 by programYaz Quote Ada LoveLace Link to comment https://weblep.com/topic/183-basit-4-i%CC%87%C5%9Flem-oyunu-javascript-t%C3%BCm-kodlar%C4%B1/ Share on other sites More sharing options...
