PHP PHP Uygulama Geliştirme

PHP ile Kelime Tahmin Oyunu Yapma

Mustafa KESKİN By Mustafa KESKİN #css, #html5, #js, #Kelime oyunu, #PHP, #tahmin oyunu

Kelime tahmin oyunları, hem eğlenceli hem de zihinsel becerileri geliştiren popüler oyun türlerindendir. Bu makalede, PHP kullanarak temel bir kelime tahmin oyununu nasıl yapacağınızı adım adım açıklayacağız. Kullanıcılar doğru kelimeyi bulana kadar tahminde bulunacak, her tahminde oyun durumu güncellenecek ve deneme hakkı dolarsa oyun sona erecek.

Bu rehberde, PHP ile nasıl bir kelime tahmin oyunu oluşturulacağını anlatacak, kullanıcı etkileşimi, oturum yönetimi ve CSS ile basit bir arayüz oluşturma aşamalarına değineceğiz.

1. PHP Oturum Yönetimi ve Oyun Başlatma

İlk olarak, oyun boyunca kullanıcı etkileşimini takip edebilmek için PHP oturumlarını kullanacağız. Bu, her kullanıcının oyununu bağımsız şekilde oynayabilmesini sağlar.

PHP Oturum Başlatma

PHP’de oturum başlatmak için session_start() fonksiyonu kullanılır. Bu fonksiyon, oturum verilerini başlatır ve her kullanıcının oyun verilerini takip etmemizi sağlar.

<?php
session_start();  // Oturum başlatma
?>

Oyun Durumunun Takibi

Oyun başladığında, kullanıcının yaptığı tahminleri, doğru cevabı bulup bulmadığını ve kaç hakkı kaldığını takip etmemiz gerekecek. Bu bilgiler, oturum (session) değişkenleri ile saklanır. Aşağıdaki kod, bir oyun başladığında gerekli olan verileri sıfırlar.

<?php
session_start();

// Eğer oyun sıfırlanmışsa
if (isset($_POST['restart'])) {
    $_SESSION['word'] = 'elma'; // Oyun kelimesi
    $_SESSION['tries'] = 0; // Deneme sayısı
    $_SESSION['max_tries'] = 6; // Maksimum deneme hakkı
    $_SESSION['guesses'] = []; // Yapılan tahminler
}
?>

Kelimeyi Belirleme

Bu oyunda, doğru tahmin edilmesi gereken kelimeyi belirlemek için sabit bir kelime seçtik. Kelimeyi $word değişkenine atıyoruz. Bu kelime her oyunda sabit kalacak.

<?php
// Doğru kelime (Örnek olarak 'elma' kullanılıyor)
$word = 'elma';
?>

2. Kullanıcı Tahminlerini Alma ve Kontrol Etme

Kullanıcıdan kelime tahmini almak için HTML formu kullanacağız. Kullanıcı her tahminde bulunduğunda, PHP bu tahminin doğru olup olmadığını kontrol eder. Eğer doğruysa, kullanıcıyı tebrik ederiz; yanlışsa, deneme hakkı bir azaltılır.

HTML Formu

Tahmin formu, kullanıcıya tahmin yapabilmesi için bir alan sağlar. Form, POST metoduyla PHP’ye gönderilir.

<form method="POST">
    <label for="guess">Kelimeyi Tahmin Et:</label>
    <input type="text" id="guess" name="guess">
    <input type="submit" value="Tahmin Et">
</form>

Tahmin Kontrolü

Kullanıcı tahminini gönderdiğinde, PHP kodu şu şekilde çalışacaktır:

  1. Kullanıcı doğru kelimeyi tahmin etti mi?
  2. Hakkı bitti mi?
  3. Kullanıcıya doğru ya da yanlış cevap verilecek mi?
<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['guess'])) {
    $guess = strtolower(trim($_POST['guess']));  // Kullanıcı tahmini
    $_SESSION['tries']++;  // Deneme sayısını artır

    if ($guess == $_SESSION['word']) {
        echo "Tebrikler! Doğru tahmin ettiniz!";
    } else {
        echo "Yanlış tahmin. Tekrar deneyin.";
    }

    // Eğer maksimum deneme sayısına ulaşıldıysa
    if ($_SESSION['tries'] >= $_SESSION['max_tries']) {
        echo "Oyun bitti! Maksimum deneme sayısına ulaştınız.";
    }
}
?>

3. Oyun Durumunu Yenileme ve Sonlandırma

Eğer kullanıcı oyunu yeniden başlatmak isterse, oyun sıfırlanmalıdır. Bu, bir “Yeniden Başlat” butonu ile yapılabilir. Kullanıcı bu butona tıkladığında oyun verileri sıfırlanır ve yeni bir oyun başlatılır.

Yeniden Başlatma Butonu

Yeniden başlatma butonu, form aracılığıyla PHP’ye gönderilir ve oyun durumu sıfırlanır:

<form method="POST">
    <input type="submit" name="restart" value="Yeniden Başlat">
</form>

4. Oyun Arayüzü ve CSS Düzenlemeleri

PHP sadece oyunun mantığını içerirken, kullanıcı dostu bir arayüz için CSS kullanmak önemlidir. Kullanıcıların rahatça oyun oynaması için stil dosyası oluşturulmalıdır.

Basit CSS ile Oyun Arayüzü

Oyun arayüzü şık ve kullanıcı dostu olmalıdır. Bunun için CSS ile temel düzenlemeler yapacağız.

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    padding: 20px;
}

form {
    margin-bottom: 20px;
}

input[type="text"] {
    padding: 10px;
    font-size: 16px;
}

input[type="submit"] {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

input[type="submit"]:hover {
    background-color: #45a049;
}

Oyun Durumu Görselleştirme

Kullanıcı doğru kelimeyi tahmin ettiğinde ya da oyun bittiğinde, uygun mesajlar gösterilecektir. Bu mesajları görsel olarak da kullanıcıya bildirebiliriz. Örneğin, doğru tahminin ardından yeşil bir kutu gösterilebilir.

5. Oyun Mantığını İleriye Taşımak

Bu basit oyunu daha ilginç hale getirmek için bazı ek özellikler ekleyebilirsiniz:

  • Kelime Listesi: Sabit bir kelime listesi yerine, rastgele bir kelime seçilmesini sağlayarak her oyun için farklı kelimeler sunabilirsiniz.
  • Zorluk Seviyesi: Kolay, orta ve zor gibi seviyeler ekleyebilirsiniz. Her seviyede, kelimelerin uzunluğu veya karmaşıklığı değişebilir.
  • Skor Tablosu: Kullanıcıların oyun sonunda kazandıkları puanları kaydedebilir ve diğer oyuncularla karşılaştırmalar yapabilirsiniz.

Tam kodu sizinle paylaşıyorum ve istediğiniz gibi kullanabilir değişiklik yapabilir sınız.

<?php
// Doğru kelimeyi tanımlıyoruz
$correct_word = "TAKAT"; // 5 harfli kelime





// Oturumu başlatıyoruz
if (!isset($_SESSION)) {
    session_start();
    if (!isset($_SESSION['attempts'])) {
        $_SESSION['attempts'] = 0;  // Denemeleri sıfırlıyoruz
        $_SESSION['guesses'] = array_fill(0, 6, ''); // 6 boş tahmin satırı
    }
}

// Oyun sıfırlama işlemi
if (isset($_POST['restart'])) {
    session_unset();
    session_destroy();
    header("Location: oyunlar.php");
    exit;
}



// Eğer bir tahmin gönderildiyse
if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['guess'])) {
    if (is_array($_POST['guess'])) { // 'guess' verisinin dizi olup olmadığını kontrol ediyoruz
        $guess = strtoupper(implode('', $_POST['guess'])); // Harfleri birleştiriyoruz
        $_SESSION['guesses'][$_SESSION['attempts']] = $guess; // Tahmini kaydediyoruz
        $_SESSION['attempts']++; // Deneme sayısını artırıyoruz

        // Eğer doğru kelime bulunursa
        if ($guess == $correct_word) {
            $message = "Tebrikler! Doğru kelimeyi buldunuz!";
            $_SESSION['attempts'] = 6; // Oyun bitiyor
        } elseif ($_SESSION['attempts'] == 6) {
            $message = "Maalesef kaybettiniz! Doğru kelime: " . $correct_word;
        } else {
            $message = "Tahmin başarılı! Devam edin.";
        }
    } else {
        $message = "Hatalı giriş. Lütfen tekrar deneyin.";
    }
}
?>


<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Yeni Sayfa</title>
    <link href="https://fonts.googleapis.com/css2?family=Anton&family=Roboto&family=Sour+Gummy&display=swap" rel="stylesheet">
    <style>
        /* Genel Ayarlar */
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
            background-color: #003a6b; /* Daha koyu mavi */
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 100vh;
        }

        /* Başlıklar */
        h1 {
            font-family: 'Anton', sans-serif;
            color: #b8860b; /* Koyu sarı */
            text-align: center;
            margin: 8px 0;
        }

        h2 {
            font-family: 'Roboto', sans-serif;
            color: #fff;
            text-align: center;
            margin: 8px 0;
        }

        h3 {
            font-family: 'Sour Gummy', sans-serif;
            color: #fff;
            margin: 0;
        }
        h4 {
            font-family: 'Sour Gummy', sans-serif;
            color: #5a8fd9;
            margin: 0;
        }

        /* Sol Div */
        .sol-div {
            width: 250px;
            background-color: #002a4d; /* Koyu mavi */
            border-radius: 15px;
            padding: 20px;
            border: 1px solid #5a8fd9; /* Açık mavi kenar çizgisi */
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            position: fixed;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
        }
        

        .liste {
            width: 100%;
            margin-top: 10px;
        }


.satir {
    display: flex;
    align-items: center;
    margin: 10px 0;
    padding: 5px;
    border: 1px solid #5a8fd9; /* Açık mavi kenarlık */
    border-radius: 15px; /* Yuvarlak kenarlar */
    background-color: #002a4d; /* İç renk, arka planla uyumlu */
}

        .satir h3 {
            margin-right: 10px;
        }

        .satir img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            margin-right: 10px;
        }

        .link {
            display: inline-block;
            background-color: white;
            color: #002a4d;
            padding: 10px 15px;
            border-radius: 15px;
            text-align: center;
            text-decoration: none;
            font-family: 'Roboto', sans-serif;
            font-weight: bold;
            font-size: 14px;
            margin-top: 20px;
        }

        .link:hover {
            background-color: #5a8fd9;
            color: white;
        }


        
        
/* Orta Div */
.orta-div {
    width: 500px;
    margin: 0 auto;
    margin-top: 20px; /* Üstten boşluk ekleyin */
    display: flex;
    justify-content: center;
    align-items: flex-start; /* İçeriği üstten başlat */
    text-align: center;
    position: absolute; /* Sayfa içinde konumlandırma */
    top: 50%; /* Sayfa yüksekliğinin %50'sinde */
    left: 50%; /* Sayfa genişliğinin %50'sinde */
    transform: translate(-50%, -50%); /* Div'i tam ortalayacak şekilde kaydırma */
}
        
        
        
        
        
        
        
        
        
        

.sag-div {
    width: 250px;
    background-color: #003366; /* Koyu mavi */
    border-radius: 15px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center; /* Sol hizalama */
    position: fixed;
    top: 50%;
    right: 0; /* Sağ tarafa yasla */
    transform: translateY(-50%);
    box-sizing: border-box;
    border: 1px solid #5a8fd9; /* Açık mavi kenarlık */
}

/* Başlıklar */
.sag-div h2, .sag-div h1 {
    text-align: center;
    margin: 5px 0;
    color: #fff;
}

.sag-div .satir {
    display: flex;
    align-items: center;
    margin: 5px 0;
    padding: 5px;
    border: 1px solid #5a8fd9; /* Açık mavi kenarlık */
    border-radius: 15px; /* Yuvarlak köşeler */
    background-color: #002a4d; /* İç renk */
}

.sag-div .oyna-link {
    background-color: #5a8fd9; /* Açık mavi */
    color: #fff;
    text-decoration: none;
    padding: 8px 15px;
    margin-left: 10px;
    border-radius: 5px;
    transition: background-color 0.3s ease; /* Hover efekti */
}

.sag-div .oyna-link:hover {
    background-color: #003366; /* Koyu mavi hover efekti */
}

/* Başlıklar */
.sag-div h3 {
    margin: 0;
    font-size: 16px;
    color: #fff;
}


 .gecmis-oyunlar-link {
            display: inline-block;
            background-color: white;
            color: #002a4d;
            padding: 10px 15px;
            border-radius: 15px;
            text-align: center;
            text-decoration: none;
            font-family: 'Roboto', sans-serif;
            font-weight: bold;
            font-size: 14px;
            margin-top: 20px;
}

.gecmis-oyunlar-link:hover {
            background-color: #5a8fd9;
            color: white;
}




        .game-container { width: 450px; margin: 0 auto; }
        .word-box, .guess-row { display: flex; justify-content: space-between; margin-bottom: 10px; }
        .word-box input, .guess-row div { 
            width: 40px; height: 40px; text-align: center; 
            font-size: 20px; font-weight: bold; border: 1px solid #ddd; 
            display: flex; align-items: center; justify-content: center; 
            box-sizing: border-box;
        }
        .correct { background-color: green; color: white; }
        .wrong { background-color: red; color: white; }
        .yellow { background-color: yellow; color: black; }
        .keyboard { display: grid; grid-template-columns: repeat(10, 40px); gap: 5px; margin-top: 10px; }
        .keyboard button { width: 40px; height: 40px; font-size: 18px; cursor: pointer; }
        .keyboard button.delete-button {
            width: 40px;
            height: 40px;
            font-size: 18px;
            cursor: pointer;
            border-radius: 50%; /* Yuvarlak buton */
            background-color: #f44336; /* Kırmızı renk */
            color: white; /* Beyaz yazı */
            border: none; /* Kenarlık yok */
            display: flex;
            justify-content: center;
            align-items: center;
            transition: background-color 0.3s ease; /* Hover efekti */
        }
        .keyboard button.delete-button:hover {
            background-color: #d32f2f; /* Hoverda daha koyu kırmızı */
        }
        .restart-button { text-align: center; margin-top: 30px; }
        .restart-button button { padding: 20px 20px; font-size: 16px; cursor: pointer; }
        .message { margin-top: 10px; text-align: center; font-weight: bold; font-size: 18px; }
        


/* Button Stili */
.button-sitili {
    background-color: #28a745; /* Yeşil arka plan */
    color: white; /* Yazı rengi beyaz */
    border: none; /* Kenarlık yok */
    padding: 10px 20px; /* İç boşluk */
    font-size: 16px; /* Yazı boyutu */
    border-radius: 5px; /* Yuvarlak köşeler */
    cursor: pointer; /* Fareyi üzerine getirdiğinde tıklama işareti */
    transition: background-color 0.3s ease; /* Hover efektine geçiş */
}

/* Hover Durumu */
.button-sitili:hover {
    background-color: #80e27e; /* Açık yeşil hover rengi */
}





        /* Sabit Buton */
        .sabit-buton {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background-color: #d9534f; /* Kırmızı arka plan */
            color: white; /* Beyaz yazı rengi */
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        }

        .sabit-buton:hover {
            background-color: #c9302c; /* Daha koyu kırmızı hover efekti */
        }

        /* Bilgi Penceresi */
        .bilgi-penceresi {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 400px;
            background-color: white;
            color: black;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
            display: none; /* Başlangıçta gizli */
            z-index: 1000; /* Üstte görünmesi için */
        }

        .bilgi-penceresi p {
            font-size: 14px;
            line-height: 1.5;
        }

        /* Arka Plan Kapatıcı */
        .arka-plan {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            display: none; /* Başlangıçta gizli */
            z-index: 999;
        }

        /* Kapat Butonu */
        .kapat-buton {
            background-color: #d9534f; /* Kırmızı arka plan */
            color: white;
            border: none;
            padding: 5px 10px;
            border-radius: 5px;
            cursor: pointer;
            float: right;
        }

        .kapat-buton:hover {
            background-color: #c9302c;
        }


.info-popup h2 { margin-bottom: 15px; }
        .info-popup button { margin-top: 10px; padding: 5px 15px; font-size: 14px; }
        .overlay { 
            position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
            background: rgba(0, 0, 0, 0.5); display: none; z-index: 5;
        }
        /* Yeni stil: Oyun Hakkında bölümündeki renkli kutular */
        .color-box {
            display: inline-block;
            width: 50px;
            height: 50px;
            margin: 10px;
            text-align: center;
            line-height: 50px;
            font-weight: bold;
            color: white;
            font-size: 20px;
        }
        .color-box.correct { background-color: green; }
        .color-box.wrong { background-color: red; }
        .color-box.yellow { background-color: yellow; color: black; }






    </style>
</head>
<body>
    <div class="container" id="guesses">
        <div class="sol-div">
            <h2>Kelime Oyunu'nda</h2>
            <h1>Günün ilk 3’ü!</h1>
            <div class="liste">
                <div class="satir">
                    <h3>1.</h3>
                    <img src="https://via.placeholder.com/40" alt="Mustafa Keskin">
                    <h3>Mustafa Keskin</h3>
                </div>
                <div class="satir">
                    <h3>2.</h3>
                    <img src="https://via.placeholder.com/40" alt="Ayşe Yılmaz">
                    <h3>Ayşe Yılmaz</h3>
                </div>
                <div class="satir">
                    <h3>3.</h3>
                    <img src="https://via.placeholder.com/40" alt="Mehmet Ali">
                    <h3>Mehmet Ali</h3>
                </div>
            </div>
            <a href="#" class="link">Liderlik Tablosunu Gör</a>
        </div>


        
        
<div class="orta-div">


<div class="game-container">
        <h1>Kelime Bulma Oyunu</h1>
        <p><h3>Güç kuvvet, derman, mecal, anlamlarında bir söz</h3><p>
        <p><h4>Kelimeyi 6 denemede bulmaya çalışın.</h4><p>

        <!-- Önceki tahminler -->
        <div class="guesses">
            <?php
            if (isset($_SESSION['guesses'])) {
                foreach ($_SESSION['guesses'] as $index => $guess) {
                    echo "<div class='guess-row'>";
                    for ($i = 0; $i < 5; $i++) {
                        $char = isset($guess[$i]) ? $guess[$i] : '';
                        if ($char == $correct_word[$i]) {
                            $class = "correct";
                        } elseif (strpos($correct_word, $char) !== false) {
                            $class = "yellow";
                        } else {
                            $class = "wrong";
                        }
                        echo "<div class='$class'>$char</div>";
                    }
                    echo "</div>";
                }
            }
            ?>
        </div>

        <!-- Yeni tahmin -->
        <?php if ($_SESSION['attempts'] < 6): ?>
            <form id="ajaxForm" method="POST">
                <div class="word-box">
                    <?php for ($i = 0; $i < 5; $i++): ?>
                        <input type="text" maxlength="1" name="guess[]" required>
                    <?php endfor; ?>
                </div>
                <button class="button-sitili" type="submit">Tahmin Et</button>
            </form>
        <?php endif; ?>

        <!-- Klavye -->
        <div class="keyboard">
            <?php
            $letters = range('A', 'Z');
            foreach ($letters as $letter) {
                echo "<button type='button' onclick='addLetter(\"$letter\")'>$letter</button>";
            }
            ?>
            <button type="button" class="delete-button" onclick="deleteLetter()">Sil</button>

        </div>

        <!-- Mesaj -->
        <?php if (isset($message)): ?>
            <div class="message"><h3><?= $message ?></h3></div>
        <?php endif; ?>

        <!-- Yeniden başlat -->
        <?php if ($_SESSION['attempts'] == 6): ?>
            <div class="restart-button">
                <form method="POST">
                    <button type="submit" class="button-sitili" name="restart">Yeniden Başlat</button>
                </form>
            </div>
        <?php endif; ?>


     
    </div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#ajaxForm').on('submit', function(e) {
                e.preventDefault(); // Sayfa yenilemeyi engelle
                
                const formData = $(this).serialize(); // Form verilerini al
                
                $.ajax({
                    url: 'oyunlar.php', // Formun gönderileceği URL
                    method: 'POST',
                    data: formData,
                success: function (response) {
                    $('#guesses').html(response); // Dönen içeriği guesses alanına yükle
                },
                error: function () {
                    alert('Bir hata oluştu!');
                }
                });
            });
        });
    </script>	
    
    
    
    

    <script>
        function addLetter(letter) {
            var inputs = document.querySelectorAll("input[type='text']");
            for (var i = 0; i < inputs.length; i++) {
                if (inputs[i].value === "") {
                    inputs[i].value = letter;
                    break;
                }
            }
        }

        function deleteLetter() {
            var inputs = document.querySelectorAll("input[type='text']");
            for (var i = inputs.length - 1; i >= 0; i--) {
                if (inputs[i].value !== "") {
                    inputs[i].value = "";
                    break;
                }
            }
        }


    </script>


</div>

    






    
<div class="sag-div">
    <h2>Geçmiş Oyunları Oyna!</h2>
    <div class="satir">
        <h3>Kelime Oyunu #0001</h3>
        <a href="#" class="oyna-link">Oyna</a>
    </div>
    <div class="satir">
        <h3>Kelime Oyunu #0002</h3>
        <a href="#" class="oyna-link">Oyna</a>
    </div>
    <div class="satir">
        <h3>Kelime Oyunu #0003</h3>
        <a href="#" class="oyna-link">Oyna</a>
    </div>
    <div class="satir">
        <h3>Kelime Oyunu #0004</h3>
        <a href="#" class="oyna-link">Oyna</a>
    </div>
    <a href="#" class="gecmis-oyunlar-link">Geçmiş Oyunları Gör</a>
</div>

    
        
        
    </div>
    
    
    
    
    
    
    
    
    
    
    
<button class="sabit-buton" id="oyunHakkindaButon">Oyun Hakkında</button>	
    
    <!-- Arka Plan Kapatıcı -->
    <div class="arka-plan" id="arkaPlan"></div>

    <!-- Bilgi Penceresi -->
    <div class="bilgi-penceresi" id="bilgiPenceresi">
        <button class="kapat-buton" id="kapatButon">Kapat</button>
        <h1>Oyunun Nasıl Oynanacağı</h1>
        <p>
            Kelime Oyunu, verilen harflerden anlamlı kelimeler oluşturmayı hedefler.
            Oyuncular, mümkün olduğunca fazla puan toplayarak sıralamada üst sıralara çıkmayı amaçlar.
        </p>
        <div class="info-popup" id="info-popup">
            <p>Bu oyunda doğru kelimeyi 6 denemede bulmalısınız. Her tahminden sonra:</p>
            <div class="color-box correct">A</div>
            <p><strong>Yeşil:</strong> Harf doğru ve yerinde.</p>
            <div class="color-box yellow">B</div>
            <p><strong>Sarı:</strong> Harf doğru ama yerinde değil.</p>
            <div class="color-box wrong">C</div>
            <p><strong>Kırmızı:</strong> Harf yanlış.</p>
        </div>
    </div>

    <script>
        // Elementler
        const oyunHakkindaButon = document.getElementById('oyunHakkindaButon');
        const bilgiPenceresi = document.getElementById('bilgiPenceresi');
        const arkaPlan = document.getElementById('arkaPlan');
        const kapatButon = document.getElementById('kapatButon');

        // Butona Tıklama
        oyunHakkindaButon.addEventListener('click', () => {
            bilgiPenceresi.style.display = 'block';
            arkaPlan.style.display = 'block';
        });

        // Kapat Butonu ve Arka Plan
        kapatButon.addEventListener('click', () => {
            bilgiPenceresi.style.display = 'none';
            arkaPlan.style.display = 'none';
        });

        arkaPlan.addEventListener('click', () => {
            bilgiPenceresi.style.display = 'none';
            arkaPlan.style.display = 'none';
        });
    </script>	
    
    
    
    
    
    
    
    
    
    
    
</body>
</html>

Uygulama Bu şekilde gözükecek 

Mustafa KESKİN

By Mustafa KESKİN

Ölümün olduğu bu dünyada, hiçbir şey çok da ciddi değildir aslında

İlgili Yazılar

PHP PHP Uygulama Geliştirme

100 Kişiye Sorduk Oyunu: Web Tabanlı Eğlence Projesi

Mustafa KESKİNMustafa KESKİN

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Bu site, istenmeyenleri azaltmak için Akismet kullanıyor. Yorum verilerinizin nasıl işlendiği hakkında daha fazla bilgi edinin.

Bunlarıda Okumalısın

PHP PHP Uygulama Geliştirme

100 Kişiye Sorduk Oyunu: Web Tabanlı Eğlence Projesi

PHP PHP Uygulama Geliştirme

PHP ile Kelime Tahmin Oyunu Yapma

Başlangıç dersleri

PHP Nedir ve Neler Yapılabilir?

Başlangıç dersleri

PHP’ye Başlıyoruz: Temel Bilgiler ve Başlangıç Rehberi