1 İle 10 Arasında Sayı Tahmin Oyunu

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>

Tarayıcıda Aç

Son Güncelleme : 14 Nisan 2026 14:44, Salı

YORUMLAR () YORUM YAZ

Yorum yapılmamış!

BENZER İÇERİK