#1 Çevrimdışı
i don't care if i'm misfit.
Kullanıcıların profil bilgileri misafirlere kapatılmıştır.
Sayı Tahmin Oyunu / Html & JavaScript
Kod: Kodu kopyalamak için üzerine çift tıklayın!
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8" />
<title>Sayı Tahmin Oyunu </title>
<style>
body {
font-family: Georgia, serif;
background: #f0f8ff;
display: flex;
justify-content: center;
padding-top: 40px;
}
.game-container {
background: #d1e7dd;
border: 3px solid #0f5132;
border-radius: 15px;
padding: 20px 30px;
width: 400px;
box-shadow: 0 0 15px #0f5132aa;
text-align: center;
}
h1 {
color: #0f5132;
margin-bottom: 10px;
font-size: 28px;
}
input[type=text], input[type=number] {
width: 90%;
font-size: 18px;
padding: 8px;
margin: 10px 0 15px 0;
border-radius: 5px;
border: 1.5px solid #0f5132;
}
button {
font-size: 18px;
padding: 10px 15px;
border-radius: 8px;
border: none;
background-color: #0f5132;
color: white;
cursor: pointer;
margin-top: 10px;
width: 95%;
}
button:disabled {
background-color: #6c757d;
cursor: default;
}
.message {
margin-top: 20px;
font-weight: bold;
font-size: 20px;
min-height: 30px;
color: #0f5132;
}
.status {
margin-top: 5px;
font-size: 16px;
color: #155724;
}
#playerList {
margin-top: 20px;
text-align: left;
background: #e6f4ea;
border: 2px solid #0f5132;
border-radius: 10px;
padding: 10px;
max-height: 150px;
overflow-y: auto;
}
#playerList h2 {
text-align: center;
color: #0f5132;
}
#playerList ul {
list-style: none;
padding-left: 5px;
}
#playerList li {
margin: 5px 0;
font-weight: bold;
color: #0f5132;
}
.timer {
font-size: 18px;
font-weight: bold;
color: #b02a37;
margin-bottom: 15px;
}
</style>
</head>
<body>
<div class="game-container">
<h1>🎯 Sayı Tahmin Oyunu</h1>
<div id="player-input">
<input type="text" id="playerName" placeholder="Adınızı girin" />
<button id="startBtn">Oyunu Başlat</button>
</div>
<div id="game" style="display:none;">
<div class="timer">Kalan Süre: <span id="timer">20</span> saniye</div>
<p>Tahmin hakkınız: <span id="tahminHakki">3</span></p>
<input type="number" id="guessInput" min="1" max="20" placeholder="1-20 arasında sayı belirt." />
<button id="guessBtn">Tahmin Et</button>
<div class="message" id="message"></div>
<button id="restartBtn" style="display:none;">Yeniden Başla</button>
</div>
<div id="playerList" style="display:none;">
<h2>🏆 Başarılı Oyuncular</h2>
<ul id="successList"></ul>
</div>
</div>
<script>
const startBtn = document.getElementById("startBtn");
const playerNameInput = document.getElementById("playerName");
const playerInputDiv = document.getElementById("player-input");
const gameDiv = document.getElementById("game");
const tahminHakkiSpan = document.getElementById("tahminHakki");
const guessInput = document.getElementById("guessInput");
const guessBtn = document.getElementById("guessBtn");
const messageDiv = document.getElementById("message");
const restartBtn = document.getElementById("restartBtn");
const timerSpan = document.getElementById("timer");
const playerListDiv = document.getElementById("playerList");
const successList = document.getElementById("successList");
let tutulanSayi = 0;
let tahminHakki = 3;
let oyuncuAdi = "";
let timer = null;
let kalanSure = 20;
let basariliOyuncular = [];
function baslat() {
oyuncuAdi = playerNameInput.value.trim();
if (oyuncuAdi === "") {
alert("Lütfen isminizi girin.");
return;
}
tutulanSayi = Math.floor(Math.random() * 20) + 1;
tahminHakki = 3;
kalanSure = 20;
tahminHakkiSpan.textContent = tahminHakki;
timerSpan.textContent = kalanSure;
messageDiv.textContent = `Hoşgeldiniz, ${oyuncuAdi}! 1 ile 20 arasında bir sayı tutuyorum, tahmin etmeye çalışın.`;
guessInput.value = "";
guessInput.disabled = false;
guessBtn.disabled = false;
restartBtn.style.display = "none";
playerInputDiv.style.display = "none";
gameDiv.style.display = "block";
playerListDiv.style.display = "block";
guessInput.focus();
if(timer) clearInterval(timer);
timer = setInterval(() => {
kalanSure--;
timerSpan.textContent = kalanSure;
if (kalanSure <= 0) {
clearInterval(timer);
messageDiv.textContent = `⏰ Süre doldu! Doğru sayı ${tutulanSayi} idi.`;
bitirOyun();
}
}, 1000);
}
function tahminEt() {
const tahmin = Number(guessInput.value);
if (!tahmin || tahmin < 1 || tahmin > 20) {
alert("Lütfen 1 ile 20 arasında geçerli bir sayı girin.");
return;
}
if (tahmin === tutulanSayi) {
messageDiv.textContent = `🎉 Tebrikler ${oyuncuAdi}, doğru tahmin! Sayı ${tahmin} Süreniz: ${20 - kalanSure} saniye.`;
basariliOyuncular.push({ isim: oyuncuAdi, sure: 20 - kalanSure });
guncelleBasariliOyuncular();
bitirOyun();
} else {
tahminHakki--;
tahminHakkiSpan.textContent = tahminHakki;
if (tahminHakki === 0) {
messageDiv.textContent = `😞 Hakkınız bitti! Doğru sayı ${tutulanSayi} idi.`;
bitirOyun();
} else {
messageDiv.textContent = tahmin < tutulanSayi ? "⬆️ Daha büyük bir sayı deneyin." : "⬇️ Daha küçük bir sayı deneyin.";
}
}
guessInput.value = "";
guessInput.focus();
}
function bitirOyun() {
guessInput.disabled = true;
guessBtn.disabled = true;
restartBtn.style.display = "inline-block";
clearInterval(timer);
}
function yenidenBaslat() {
playerInputDiv.style.display = "block";
gameDiv.style.display = "none";
messageDiv.textContent = "";
playerNameInput.value = "";
}
function guncelleBasariliOyuncular() {
successList.innerHTML = "";
basariliOyuncular.forEach((oyuncu, index) => {
const li = document.createElement("li");
li.textContent = `${index + 1}. ${oyuncu.isim} - Süre: ${oyuncu.sure} sn`;
successList.appendChild(li);
});
}
startBtn.addEventListener("click", baslat);
guessBtn.addEventListener("click", tahminEt);
restartBtn.addEventListener("click", yenidenBaslat);
guessInput.addEventListener("keyup", function(event) {
if (event.key === "Enter") {
tahminEt();
}
});
</script>
</body>
</html>
Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir. Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir. Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir. 1 ile 20 arasında sayı tahmini yaparsınız ve 3 hak verilir. Doğru tahmin yapanların, kaç saniyede doğru tahmin ettikleri başarılı oyuncular kısmında gösterilir.
__________________
I'm a dreamer but it's getting hard to take it.
22 Mayıs 2025, 13:19
Benzer Konular 
Normal
