<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Adam Asmaca</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Adam Asmaca</h1>
<p class="category-info">Kategori: <span id="category-display"></span></p>
<p class="score-info">Puan: <span id="score-display">0</span></p> <div class="game-area">
<div class="hangman-display">
<div class="hangman-part base"></div>
<div class="hangman-part pole"></div>
<div class="hangman-part top"></div>
<div class="hangman-part rope"></div>
<div class="hangman-part head"></div>
<div class="hangman-part body"></div>
<div class="hangman-part arm-left"></div>
<div class="hangman-part arm-right"></div>
<div class="hangman-part leg-left"></div>
<div class="hangman-part leg-right"></div>
</div>
<div class="word-section">
<div id="word-display" class="word-display"></div>
<p>Kalan Can Hakkı: <span id="remaining-guesses">10</span></p>
<div id="message" class="message"></div>
</div>
</div>
<div class="keyboard" id="keyboard">
</div>
<button id="reset-button">Yeni Oyun</button>
</div>
<script src="script.js"></script>
</body>
</html>body {
font-family: 'Arial', sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f4f4f4;
margin: 0;
color: #333;
flex-direction: column;
}
.container {
background-color: #fff;
padding: 30px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: center;
width: 90%;
max-width: 700px; /* Genişliği artırdık */
display: flex;
flex-direction: column;
align-items: center;
}
h1 {
color: #007bff;
margin-bottom: 10px;
}
.category-info {
font-size: 1.1em;
margin-bottom: 20px;
color: #666;
font-weight: bold;
}
.game-area {
display: flex;
justify-content: space-around;
align-items: flex-start;
width: 100%;
margin-bottom: 30px;
flex-wrap: wrap; /* Küçük ekranlarda alta geçiş için */
}
.hangman-display {
position: relative;
width: 150px;
height: 200px;
border-bottom: 4px solid #333;
margin-right: 30px;
margin-bottom: 20px; /* Mobil uyumluluk için */
}
/* Adam Asmaca Parçaları */
.hangman-part {
position: absolute;
background-color: #333;
display: none; /* Varsayılan olarak gizli */
}
.base {
width: 150px;
height: 4px;
bottom: 0;
left: 0;
}
.pole {
width: 4px;
height: 180px;
bottom: 0;
left: 20px;
}
.top {
width: 100px;
height: 4px;
top: 10px;
left: 20px;
}
.rope {
width: 4px;
height: 30px;
top: 10px;
left: 120px;
}
.head {
width: 30px;
height: 30px;
border-radius: 50%;
border: 4px solid #333;
background-color: transparent; /* Kafa içi boş olsun */
top: 40px;
left: 106px;
z-index: 1; /* Diğer parçaların üzerinde olsun */
}
.body {
width: 4px;
height: 50px;
top: 78px;
left: 120px;
}
.arm-left {
width: 40px;
height: 4px;
top: 90px;
left: 85px;
transform: rotate(45deg);
transform-origin: right center;
}
.arm-right {
width: 40px;
height: 4px;
top: 90px;
left: 120px;
transform: rotate(-45deg);
transform-origin: left center;
}
.leg-left {
width: 40px;
height: 4px;
top: 125px;
left: 90px;
transform: rotate(-45deg);
transform-origin: right center;
}
.leg-right {
width: 40px;
height: 4px;
top: 125px;
left: 115px;
transform: rotate(45deg);
transform-origin: left center;
}
/* Hatalara göre parçaların gösterilmesi */
.show-part-1 .base,
.show-part-2 .pole,
.show-part-3 .top,
.show-part-4 .rope,
.show-part-5 .head,
.show-part-6 .body,
.show-part-7 .arm-left,
.show-part-8 .arm-right,
.show-part-9 .leg-left,
.show-part-10 .leg-right {
display: block;
}
.word-section {
flex-grow: 1;
text-align: center;
}
.word-display {
font-size: 2.5em;
font-weight: bold;
letter-spacing: 5px;
margin-bottom: 20px;
color: #555;
}
.keyboard {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
margin-top: 20px;
margin-bottom: 20px;
}
.key-button {
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
padding: 12px 18px;
font-size: 1.1em;
cursor: pointer;
transition: background-color 0.2s ease, opacity 0.2s ease;
width: 45px;
height: 45px;
display: flex;
justify-content: center;
align-items: center;
text-transform: uppercase;
}
.key-button:hover:not(:disabled) {
background-color: #0056b3;
}
.key-button:disabled {
background-color: #cccccc;
cursor: not-allowed;
opacity: 0.6;
}
#reset-button {
background-color: #28a745;
color: white;
border: none;
border-radius: 5px;
padding: 10px 20px;
font-size: 1.1em;
cursor: pointer;
margin-top: 20px;
transition: background-color 0.2s ease;
}
#reset-button:hover {
background-color: #218838;
}
.message {
margin-top: 15px;
font-size: 1.1em;
font-weight: bold;
min-height: 25px;
}
.message.win {
color: #28a745;
}
.message.lose {
color: #dc3545;
}
/* Mobil uyumluluk */
@media (max-width: 600px) {
.game-area {
flex-direction: column;
align-items: center;
}
.hangman-display {
margin-right: 0;
}
.word-display {
font-size: 2em;
letter-spacing: 3px;
}
.key-button {
width: 40px;
height: 40px;
font-size: 1em;
padding: 10px;
}
/* Mevcut CSS kodlarınızın altına ekleyin veya ilgili yerlere entegre edin */
.score-info {
font-size: 1.2em;
margin-bottom: 15px;
color: #4CAF50; /* Yeşil renk */
font-weight: bold;
}
/* Diğer CSS kodları aynı kalacak */
}
}const wordCategories = {
"Hayvanlar": ["KEDI", "KOPYALAMA", "FARE", "ASLAN", "FIL", "KAPLAN", "ZEBRA", "AT", "KOYUN", "TAVSAN"],
"Meyveler": ["ELMA", "ARMUT", "MUZ", "CILEK", "UZUM", "PORTAKAL", "KIRAZ", "MANDALINA", "SEFTALI", "KARPUZ"],
"Ülkeler": ["TURKIYE", "ALMANYA", "FRANSA", "INGILTERE", "JAPONYA", "ITALYA", "ISPANYA", "CIN", "RUSYA", "KANADA"],
"Meslekler": ["OGRETMEN", "DOKTOR", "MUHENDIS", "YAZILIMCI", "POLIS", "ASKER", "HEMSIRE", "MIMAR", "SANATCI", "AVUKAT"],
"Teknoloji": ["BILGISAYAR", "TELEFON", "INTERNET", "KLAVYE", "MONITOR", "YAZILIM", "DONANIM", "PROGRAMLAMA", "VERITABANI", "ALGORITMA"]
};
let selectedCategory = '';
let selectedWord = '';
let guessedLetters = [];
let wrongGuesses = 0;
let gameEnded = false;
let score = 0; // Yeni: Puan değişkeni
const wordDisplay = document.getElementById('word-display');
const remainingGuessesSpan = document.getElementById('remaining-guesses');
const categoryDisplay = document.getElementById('category-display');
const scoreDisplay = document.getElementById('score-display'); // Yeni: Puan gösterim elemanı
const messageDiv = document.getElementById('message');
const keyboardDiv = document.getElementById('keyboard');
const resetButton = document.getElementById('reset-button');
const hangmanDisplay = document.querySelector('.hangman-display');
const hangmanPartsOrder = [
'base', // 1. hata
'pole', // 2. hata
'top', // 3. hata
'rope', // 4. hata
'head', // 5. hata
'body', // 6. hata
'arm-left', // 7. hata
'arm-right', // 8. hata
'leg-left', // 9. hata
'leg-right' // 10. hata
];
const MAX_WRONG_GUESSES = 10; // Toplamda 10 yanlış tahmin hakkı
// Klavyeyi oluşturur
function createKeyboard() {
keyboardDiv.innerHTML = '';
for (let i = 65; i <= 90; i++) {
const char = String.fromCharCode(i);
const button = document.createElement('button');
button.classList.add('key-button');
button.textContent = char;
button.addEventListener('click', () => handleGuess(char));
keyboardDiv.appendChild(button);
}
}
// Oyunu başlatır veya sıfırlar
function initializeGame() {
const categories = Object.keys(wordCategories);
selectedCategory = categories[Math.floor(Math.random() * categories.length)];
selectedWord = wordCategories[selectedCategory][Math.floor(Math.random() * wordCategories[selectedCategory].length)].toUpperCase();
guessedLetters = [];
wrongGuesses = 0;
gameEnded = false;
score = 0; // Oyun başladığında puanı sıfırla
wordDisplay.textContent = displayWord();
remainingGuessesSpan.textContent = MAX_WRONG_GUESSES - wrongGuesses;
categoryDisplay.textContent = selectedCategory;
scoreDisplay.textContent = score; // Puanı güncelle
messageDiv.textContent = '';
messageDiv.classList.remove('win', 'lose');
// Tüm adam asmaca parçalarını gizle
hangmanPartsOrder.forEach((partClass, index) => {
hangmanDisplay.classList.remove(`show-part-${index + 1}`);
});
// Tüm tuşları tekrar etkinleştir
const buttons = keyboardDiv.querySelectorAll('.key-button');
buttons.forEach(button => {
button.disabled = false;
});
createKeyboard();
}
// Kelimenin mevcut görünümünü döndürür (tahmin edilen harfleri gösterir)
function displayWord() {
return selectedWord.split('').map(letter => {
return guessedLetters.includes(letter) ? letter : '_';
}).join(' ');
}
// Adamın bir sonraki parçasını gösterir
function drawHangmanPart() {
if (wrongGuesses > 0 && wrongGuesses <= MAX_WRONG_GUESSES) {
hangmanDisplay.classList.add(`show-part-${wrongGuesses}`);
}
}
// Harf tahminini işler
function handleGuess(char) {
if (gameEnded || guessedLetters.includes(char)) {
return;
}
const button = Array.from(keyboardDiv.children).find(btn => btn.textContent === char);
if (button) {
button.disabled = true;
}
guessedLetters.push(char);
if (selectedWord.includes(char)) {
// Doğru tahmin: Puan ekle
score += 10;
scoreDisplay.textContent = score; // Puanı güncelle
wordDisplay.textContent = displayWord();
if (!wordDisplay.textContent.includes('_')) {
// Kelime doğru tahmin edildi: Ekstra puan
const bonus = (MAX_WRONG_GUESSES - wrongGuesses) * 20; // Kalan can hakkına göre bonus
score += 100 + bonus;
scoreDisplay.textContent = score; // Puanı tekrar güncelle
messageDiv.textContent = `Tebrikler! Kelimeyi doğru tahmin ettiniz! Puanınız: ${score}`;
messageDiv.classList.add('win');
gameEnded = true;
disableAllButtons();
}
} else {
// Yanlış tahmin: Puan düşür
score -= 5;
if (score < 0) score = 0; // Puanın eksiye düşmesini engelle
scoreDisplay.textContent = score; // Puanı güncelle
wrongGuesses++;
remainingGuessesSpan.textContent = MAX_WRONG_GUESSES - wrongGuesses;
drawHangmanPart(); // Yanlış tahmin olduğunda adamın parçasını çiz
if (wrongGuesses >= MAX_WRONG_GUESSES) {
messageDiv.textContent = `Oyun bitti! Doğru kelime: ${selectedWord}. Puanınız: ${score}`;
messageDiv.classList.add('lose');
gameEnded = true;
disableAllButtons();
}
}
}
// Tüm harf butonlarını devre dışı bırakır
function disableAllButtons() {
const buttons = keyboardDiv.querySelectorAll('.key-button');
buttons.forEach(button => {
button.disabled = true;
});
}
// Yeni Oyun butonuna tıklama olayını dinle
resetButton.addEventListener('click', initializeGame);
// Oyun yüklendiğinde başlat
initializeGame();Kod ÇIKTI SONUCU:



Selamlar gemini ile oyun yaptık kodlar ve çıktı yukarıda iyi forumlar