Tekil Mesaj gösterimi - Adam Asmaca Yapay Zeka Yaptı

Konu Adam Asmaca Yapay Zeka Yaptı

24-06-2025, 14:05:43

<!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