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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<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.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
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.
|
1 2 3 4 5 6 7 8 9 10 11 |
//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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
//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.
|
1 2 3 4 5 6 7 8 |
//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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
//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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 |
<!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> |
bu konuyla doğrudan bağlantılı değil ama çarpma işlemi yaptırmak istiyorum ama değerlerden biri sıfırsa yani 50 x 0 ise yada 0 x 50 ise hangi değer yüksekse direk onu yazdırmak istiyorum lütfen yardım. Teşekkürler.
var a;
var b;
c = a * b
if(a>b){c == a}elseif(b>a){c == b}
[…] […]