Scribd
Upload
0 views

kutuhtml

The document is an HTML code for a game called 'Kutu Seçme Oyunu' (Box Selection Game) where players select boxes to progress through levels. It includes styles for the layout and functionality for checking selections, updating scores, and displaying a leaderboard. The game allows players to restart and tracks their highest scores using local storage.

Uploaded by

dalledeneme1
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
0 views

kutuhtml

The document is an HTML code for a game called 'Kutu Seçme Oyunu' (Box Selection Game) where players select boxes to progress through levels. It includes styles for the layout and functionality for checking selections, updating scores, and displaying a leaderboard. The game allows players to restart and tracks their highest scores using local storage.

Uploaded by

dalledeneme1
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 4

<!

DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kutu Seçme Oyunu</title>
<style>
/* Genel Stil */
body {
text-align: center;
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
background: linear-gradient(135deg, #6a11cb, #2575fc);
color: white;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

h1 {
font-size: 3rem;
margin-bottom: 10px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

h2 {
font-size: 2rem;
margin-bottom: 20px;
}

h3 {
font-size: 1.5rem;
margin: 20px 0;
}

.container {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 30px;
}

.box {
width: 120px;
height: 120px;
background: linear-gradient(135deg, #ff9a9e, #fad0c4);
border-radius: 15px;
display: flex;
justify-content: center;
align-items: center;
font-size: 2rem;
font-weight: bold;
color: #333;
cursor: pointer;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.box:hover {
transform: scale(1.05);
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);
}

.hidden {
display: none;
}

button {
padding: 10px 20px;
font-size: 1rem;
font-weight: bold;
color: white;
background: linear-gradient(135deg, #ff6f61, #ffcc00);
border: none;
border-radius: 25px;
cursor: pointer;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
transition: transform 0.2s ease, box-shadow 0.2s ease;
margin-top: 20px;
}

button:hover {
transform: scale(1.05);
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);
}

#leaderboard {
margin-top: 30px;
background: rgba(255, 255, 255, 0.1);
padding: 20px;
border-radius: 15px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

ul {
list-style-type: none;
padding: 0;
}

li {
font-size: 1.2rem;
margin: 10px 0;
padding: 10px;
background: rgba(255, 255, 255, 0.2);
border-radius: 10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body>

<h1>Kutu Seçme Oyunu</h1>


<h2>Seviye: <span id="level">1</span></h2>
<div class="container">
<div class="box" id="box1" onclick="checkChoice(1)">🎁</div>
<div class="box" id="box2" onclick="checkChoice(2)">🎁</div>
</div>
<h3 id="message"></h3>
<button class="hidden" id="restart" onclick="restartGame()">Tekrar
Oyna</button>

<div id="leaderboard">
<h2>En Yüksek 5 Skor</h2>
<ul id="scoreList"></ul>
</div>

<script>
let level = 1;
let correctBox = generateCorrectBox();

function generateCorrectBox() {
return Math.floor(Math.random() * 2) + 1;
}

function checkChoice(choice) {
if (choice === correctBox) {
if (level === 7) {
endGame("Tebrikler! Oyunu kazandınız! 🎉");
return;
}
level++;
updateLevelDisplay();
correctBox = generateCorrectBox();
} else {
endGame("Yanlış seçim! Oyun bitti. 😢");
}
}

function endGame(message) {
document.getElementById("message").textContent = message;
updateLeaderboard(level);
document.getElementById("restart").classList.remove("hidden");
}

function restartGame() {
level = 1;
updateLevelDisplay();
document.getElementById("message").textContent = "";
document.getElementById("restart").classList.add("hidden");
correctBox = generateCorrectBox();
}

function updateLevelDisplay() {
document.getElementById("level").textContent = level;
}

function updateLeaderboard(score) {
let scores = JSON.parse(localStorage.getItem("scores")) || [];
scores.push(score);
scores.sort((a, b) => b - a);
scores = scores.slice(0, 5);
localStorage.setItem("scores", JSON.stringify(scores));
displayLeaderboard();
}
function displayLeaderboard() {
let scores = JSON.parse(localStorage.getItem("scores")) || [];
let scoreList = document.getElementById("scoreList");
scoreList.innerHTML = "";
scores.forEach((score, index) => {
let li = document.createElement("li");
li.textContent = `${index + 1}. Skor: ${score}`;
scoreList.appendChild(li);
});
}

// Sayfa açıldığında en iyi skorları göster


displayLeaderboard();
</script>

</body>
</html>

You might also like