SAYI TAHMİN OYUNU PROJESİ
Projenin Amacı
Bu projede, 1 ile 10 arasında karmakarışık bir sayıyı tahmin etmeye dayalı basit bir oyun geliştirildi. Projenin amacı, HTML, CSS ve JavaScript kullanarak kullanıcı ile etkileşimli bir uygulama oluşturmayı öğrenmektir.
Kullanılan Teknolojiler
HTML
HTML, sayfanın temel oluşturmak için kullanılır.
Kullanıcıdan veri almak için<input> işlem yapmak için <button> ve sonuçları göstermek için <div> etiketler kullanılmıştır.
<body>
< div class = " konteyner " >
< h2 > 1 ile 10 arasında sayı tahmin et </ h2 >
<input type="number" id="textBox1" placeholder="Tahmin gir">
<br>
<button id="btn1" class="btn">Tahmin Et</button>
<button id="restartBtn" class="btn">Yeniden Başla</button>
<div id="can">Can: 5</div>
<div id="sonuc"></div>
</div>
CSS
CSS ile sayfanın tasarımı yapılmıştır.
- Arka plan rengi verilerek sade bir görünüm sağlanmıştır.
- Border-Radius ile köşeler yumuşatılmıştır.
- padding ve margin kullanılarak düzenli bir yerleşim oluşturulmuştur.
Amaç, kullanıcıyı yormayan basit ve anlaşılır bir tasarım elde etmektir.
<style>
body{
font-family: Arial, sans-serif;
background: green;
color: white;
text-align: center;
margin-top: 100px;
}
.container{
background: rgba(0,0,0,0.3);
padding: 30px;
border-radius: 20px;
display: inline-block;
}
input{
padding: 10px;
font-size: 16px;
border-radius: 10px;
border: none;
margin: 10px;
}
.btn{
background: #00c6ff;
border: none;
border-radius: 10px;
padding: 12px 25px;
color: white;
font-size: 16px;
cursor: pointer;
}
#restartBtn{
margin-top: 10px;
background: #ff4b2b;
}
#sonuc{
margin-top: 20px;
}
#can{
margin-top: 10px;
}
</style>
</head>
<body>
⚙️ JavaScript
JavaScript, oyunun çalışmasını sağlayan ana bölümdür.
Rastgele Sayı Üretimi
Math.floor(Math.random() * 10) + 1;
Bu ifade ile 1 ile 10 arasında rastgele bir sayı oluşturulmuştur.
<script>
let can = 5;
let oyunBitti = false;
document.getElementById("btn1").addEventListener("click", function(){
if(oyunBitti) return;
let tahmin = Number(document.getElementById("textBox1").value);
let random = Math.floor(Math.random() * 10) + 1;
if(tahmin === random){
document.getElementById("sonuc").innerText = "???? Doğru! Sayı: " + random;
oyunBitti = true;
return;
} else {
can--;
document.getElementById("sonuc").innerText = "❌ Yanlış! Doğru sayı: " + random;
document.getElementById("can").innerText = "Can: " + can;
}
if(can === 0){
document.getElementById("sonuc").innerText = "???? Oyun bitti!";
oyunBitti = true;
}
});
document.getElementById("restartBtn").addEventListener("click", function(){
can = 5;
oyunBitti = false;
document.getElementById("can").innerText = "Can: 5";
document.getElementById("sonuc").innerText = "";
document.getElementById("textBox1").value = "";
});
</script>
❤️ Can Sistemi
Oyunda kullanıcıya 5 tahmin hakkı verilmiştir:
let can = 5;
Her yanlış tahminde can sayısı azaltılmaktadır:
can--;
Oyun Kontrolü
Oyun bittikten sonra tekrar işlem yapılmasını engellemek için:
if(oyunBitti) return;
kontrolü eklenmiştir.
Yeniden Başlatma Butonu
Oyunun tekrar oynanabilmesi için bir yeniden başlatma butonu eklenmiştir. Bu buton sayesinde:
- Can sayısı sıfırlanır
- Sonuç ekranı temizlenir
- Oyun yeniden başlar
Oyunun Çalışma Mantığı
- Kullanıcı 1–10 arasında bir sayı girer.
- Sistem rastgele bir sayı üretir.
- Kullanıcının tahmini ile sistemin sayısı karşılaştırılır.
- Doğruysa kullanıcı kazanır, yanlışsa can azalır.
- Can sayısı 0 olduğunda oyun sona erer.
Projenin Katkıları
Bu proje sayesinde:
- JavaScript’te koşul ifadeleri (if-else) öğrenildi
- EventListener kullanımı kavrandı
- Kullanıcı etkileşimi içeren bir uygulama geliştirildikontrolü eklenmiştir.
-
TÜM KODLAR
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Sayı Tahmin Oyunu</title>
<style>
body{
font-family: Arial, sans-serif;
background: green;
color: white;
text-align: center;
margin-top: 100px;
}
.container{
background: rgba(0,0,0,0.3);
padding: 30px;
border-radius: 20px;
display: inline-block;
}
input{
padding: 10px;
font-size: 16px;
border-radius: 10px;
border: none;
margin: 10px;
}
.btn{
background: #00c6ff;
border: none;
border-radius: 10px;
padding: 12px 25px;
color: white;
font-size: 16px;
cursor: pointer;
}
#restartBtn{
margin-top: 10px;
background: #ff4b2b;
}
#sonuc{
margin-top: 20px;
}
#can{
margin-top: 10px;
}
</style>
</head>
<body>
<div class="container">
<h2>1 ile 10 arasında sayı tahmin et</h2>
<input type="number" id="textBox1" placeholder="Tahmin gir">
<br>
<button id="btn1" class="btn">Tahmin Et</button>
<button id="restartBtn" class="btn">Yeniden Başla</button>
< div id = " can " > Kutu : 5 </div>
< div id = " sonuc " > </div> </div>
<script>
can = 5 olsun;
oyunBitti = false;
document.getElementById("btn1").addEventListener("click", function(){
eğer (oyunBitti) ise geri dön;
let tahmin = Number(document.getElementById("textBox1").value);
rastgele sayı üreteciyi Math.floor(Math.random() * 10) + 1 olarak tanımlayalım;
if(tahmin === random){
document.getElementById("sonuc").innerText = "???? Doğru! Sayı: " + random;
oyunBitti = true;
geri dönmek;
} başka {
olabilmek--;
document.getElementById("sonuc").innerText = "❌Yanlış! Doğru sayı: " + random;
document.getElementById("can").innerText = "Can: " + can;
}
eğer (yapabilir === 0) {
document.getElementById("sonuc").innerText = "???? Oyun bitti!";
oyunBitti = true;
}
});
document.getElementById("restartBtn").addEventListener("click", function(){
kutu = 5;
oyunBitti = false;
document.getElementById("can").innerText = "Can: 5";
document.getElementById("sonuc").innerText = "";
document.getElementById("textBox1").value = "";
});
</script>
</body> </html>
-
