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

Günümüzde web tabanlı oyunlar, kullanıcı etkileşimini artıran eğlenceli ve öğretici içerikler sunuyor. “100 Kişiye Sorduk” tarzı oyunlar, hem bireysel hem de grup halinde oynanabilen, bilgi yarışması konseptini temel alan popüler bir eğlence türüdür. Bu makalede, PHP ve MySQL kullanılarak geliştirilen bir “100 Kişiye Sorduk” oyununun nasıl oluşturulduğunu ve teknik detaylarını inceleyeceğiz.

Proje Genel Yapısı
Oyun, sorular ve cevaplar olmak üzere iki temel veritabanı tablosu üzerinden çalışır:

Sorular Tablosu
Bu tabloda her bir soru için benzersiz bir kimlik (ID), soru metni ve diğer ek bilgiler saklanır.
Cevaplar Tablosu
Her bir cevabın ilgili soru kimliği, cevabın metni ve puanı gibi bilgiler bu tabloda bulunur. Cevaplar, oyun ekranında en yüksek puandan düşük puana doğru sıralanır.

Kod ve Tasarım Detayları
Projede kullanılan teknolojiler ve özellikler:

PHP PDO
Veritabanı bağlantısı ve güvenli sorgular için PHP’nin PDO sınıfı kullanıldı. Bu sayede SQL enjeksiyonlarına karşı koruma sağlandı.

$pdo = new PDO('mysql:host=localhost;dbname=oyunlar', 'root', '');

HTML ve CSS Tasarımı
Oyunun tasarımında modern bir görünüm için Google Fonts‘tan özel yazı tipleri kullanıldı. Mobil uyumluluk ve kullanıcı deneyimi göz önünde bulundurularak duyarlı (responsive) bir tasarım oluşturuldu.
JavaScript Dinamikleri
Kullanıcı tahminlerini kontrol etmek ve yanlış cevapları listelemek gibi işlemler için JavaScript kullanıldı.

Başlıklar ve Görsellik
Oyun ekranında kullanıcıyı çeken koyu renk arka planlar, dikkat çekici başlık renkleri ve düzgün hizalanmış butonlar kullanıldı. Örneğin:

Cevap Kutuları:
Yanıtlar, kullanıcı dostu bir düzenle mavi ve turuncu renk kombinasyonlarıyla görselleştirildi.

.cevap {
    background-color: #3d30df;
    color: white;
    border-radius: 8px;
}

Sabit Butonlar:
Kullanıcıya hızlı erişim sunan sabit bir buton eklenerek ek yardım ya da menü seçeneklerine ulaşma kolaylaştırıldı.

Mobil Uyumluluk
Oyun, mobil cihazlarda da sorunsuz çalışacak şekilde optimize edildi. CSS’de medya sorguları kullanılarak küçük ekranlara özel boyutlandırmalar yapıldı.

@media only screen and (max-width: 600px) {
    .oyun {
        max-width: 90%;
        padding: 10px;
    }
}

Bu proje, PHP ve MySQL gibi temel teknolojilerle kolayca uygulanabilir bir oyun örneği sunuyor. Eğlenceli tasarımı ve kullanıcı dostu arayüzü ile “100 Kişiye Sorduk” oyununu daha da geliştirebilir, kişiselleştirilmiş içerikler ve farklı soru kategorileri ekleyerek kullanıcı deneyimini zenginleştirebilirsiniz. Bu oyun, hem geliştiricilere hem de oyunculara keyifli bir deneyim sunar.

game.php sayfası

<?php
$pdo = new PDO('mysql:host=localhost;dbname=oyunlar', 'root', '');

// Soruyu ve cevapları getir
$soru_id = 1; // Örnek için 1. soruyu alıyoruz
$soru = $pdo->query("SELECT * FROM sorular WHERE id = $soru_id")->fetch();
$cevaplar = $pdo->query("SELECT * FROM cevaplar WHERE soru_id = $soru_id ORDER BY puan DESC")->fetchAll();
?>

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>100 Kişiye Sorduk</title>
<link href="https://fonts.googleapis.com/css2?family=Anton&family=Roboto&family=Sour+Gummy&display=swap" rel="stylesheet">
<style>


/* Header düzeni */
.header {
  display: flex;
  justify-content: space-between; /* Logo ve menü arasına boşluk bırakmak için */
  align-items: center;
  padding: 10px 20px;
  background-color: #ffff;
  position: fixed; /* Header'ı sabitler */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Hafif gölge efekti */
  flex-wrap: wrap; /* Mobil uyumlu */
}


/* Logo stil */
.logo img {
  max-width: 150px; /* Logo boyutunu sabitle */
  height: auto;
  display: block;
  margin: 0 20px; /* Logo ile menü arasına boşluk ekle */
}

/* Menü düzeni */
.menu {
  display: flex;
  justify-content: flex-start; /* Menü yazılarını sola hizala */
  flex-grow: 1; /* Menü alanı büyüsün */
}

.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}

.menu li {
  margin-right: 20px;
}

.menu a {
  text-decoration: none;
  color: black;
  font-weight: bold;
}

.menu a:hover {
  color: red;
}

/* Menü simgesi */
.menu-icon {
  display: none; /* Masaüstünde gizli */
  font-size: 30px;
  cursor: pointer;
  position: absolute;
  right: 20px; /* Sayfanın sağında olacak */
}

/* Menü açılma durumu */
.menu.open {
  display: block; /* Menü açıldığında göster */
  position: absolute;
  top: 60px; /* Header altına yerleştir */
  left: 0;
  width: 100%;
  background-color: #f4f4f4;
  text-align: center;
}

.menu.open ul {
  flex-direction: column;
}

.menu.open li {
  margin-right: 0;
  margin-bottom: 10px;
}

/* Mobil uyumlu düzen */
@media screen and (max-width: 768px) {
  .header {
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .menu {
    display: none; /* Başlangıçta menüyü gizle */
    width: 100%;
    text-align: center; /* Menüyü merkezle */
  }

  .menu-icon {
    display: block; /* Menü simgesini göster */
    margin-top: 10px;
    right: 50px; /* Sağda yer alacak */
  }

  .menu ul {
    display: flex;
    flex-direction: column;
    text-align: center;
  }

  .menu li {
    margin-right: 0;
    margin-bottom: 10px;
  }
}













/* Genel Ayarlar */
body {
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
    background-color: #2c2959; /* 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;
}

/* Oyun div stili */
.oyun {
    text-align: center;
    max-width: 600px;
    margin: 20px auto;
    padding: 20px;
    border: 1px solid #87cefa; /* Açık mavi kenarlık */
    border-radius: 8px;
    background-color: #252061; /* Koyu mavi arka plan */
    color: white; /* Beyaz metin */
}

.oyun h2 {
    margin-right: 10px;
    padding: 20px;
    color: #ff7e00; /* Beyaz metin */
}

.oyun h3 {
    margin-right: 10px;
    color: #fff; /* Beyaz metin */
}

/* Cevap sırası, cevap ve puan düzeni */
#cevaplar {
    margin-bottom: 10px; /* Aralarına boşluk bırak */
}

#cevaplar span {
    margin-right: 10px; /* Aralarına boşluk bırak */
}

/* Cevap kutusu stili */
.sira {
    background-color: #3d30df; /* Beyaz arka plan */
    border: 1px solid #3d30df; /* Açık mavi kenarlık */
    border-radius: 8px; /* Yuvarlak kenarlar */
    padding: 5px 10px;
    color: #fff; /* Koyu mavi metin */
    font-weight: bold;
    min-width: 10px;
    text-align: center;
    display: inline-block;
}

/* Cevap kutusu stili */
.cevap {
    background-color: #3d30df; /* Beyaz arka plan */
    border: 1px solid #3d30df; /* Açık mavi kenarlık */
    border-radius: 8px; /* Yuvarlak kenarlar */
    padding: 5px 10px;
    color: #fff; /* Koyu mavi metin */
    font-weight: bold;
    min-width: 400px;
    text-align: center;
    display: inline-block;
}

/* Cevap kutusu stili */
.puan {
    background-color: #ff7e00; /* Beyaz arka plan */
    border: 1px solid #ff7e00; /* Açık mavi kenarlık */
    border-radius: 8px; /* Yuvarlak kenarlar */
    padding: 5px 10px;
    color: #fff; /* Koyu mavi metin */
    font-weight: bold;
    min-width: 10px;
    text-align: center;
    display: inline-block;
}

/* Tahmin giriş alanı */
#tahmin {
    padding: 10px;
    border-radius: 8px; /* Yuvarlak kenarlar */
    border: 1px solid #87cefa;
    outline: none;
    margin-top: 10px;
    min-width: 300px;
}

/* Tahmin butonu */
#kontrol {
    padding: 10px 20px;
    background-color: #1da319; /* Yeşil arka plan */
    color: white;
    border: none;
    border-radius: 8px; /* Yuvarlak kenarlar */
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s;
}

/* Tahmin butonu hover efekti */
#kontrol:hover {
    background-color: #218838; /* Daha koyu yeşil */
}

/* Yanlış tahminler */
#yanlis-listesi {
    list-style: none;
    padding: 0;
    margin: 10px 0;
    display: flex;
    flex-wrap: wrap; /* Yan yana gelsin */
    gap: 10px; /* Aralık bırak */
}

/* Yanlış tahmin span */
#yanlis-listesi li {
    display: inline-block;
    background-color: #1da319; /* Açık mavi arka plan */
    color: #fff; /* Koyu mavi metin */
    padding: 5px 10px;
    border-radius: 8px; /* Yuvarlak kenarlar */
    font-size: 14px;
}

/* Mobil için özel ayarlar */
@media only screen and (max-width: 600px) {
    /* Mobilde body'yi dikey hizalama */
    body {
        flex-direction: column; /* Ekran küçüldüğünde dikey hizalama */
        justify-content: flex-start;
        align-items: center; /* Ortalar */
    }

    /* Oyun divi genişliğini mobilde %90 yap */
    .oyun {
        max-width: 90%; /* Oyun kutusunun genişliğini %90 yap */
        margin: 10px; /* Dış marjları küçült */
        padding: 10px; /* İçerik boşluğunu azalt */
    }

    /* Başlıklar font boyutlarını küçült */
    .oyun h2, .oyun h3 {
        font-size: 16px; /* Başlık boyutlarını küçült */
    }

    /* Tahmin giriş alanı */
    #tahmin {
        min-width: 93%; /* Giriş alanı daha dar olmalı */
        font-size: 14px; /* Yazı boyutunu küçült */
        margin: 5px auto;
    }

    /* Tahmin butonu */
    #kontrol {
        width: 100%; /* Butonun tam genişlikte olmasını sağla */
        font-size: 16px; /* Buton yazı boyutunu büyüt */
    }

    /* Yanlış tahminler, sütun olarak düzenlensin */
    #yanlis-listesi {
        flex-direction: column; /* Yanlış tahminler sütun halinde gösterilsin */
    }

    /* Cevap kutuları mobilde daha dar olsun */
    .sira,
    .cevap,
    .puan {
        min-width: 40%; /* Daha dar genişlikler */
        font-size: 14px; /* Yazı boyutunu küçült */
    }
}






        /* 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;
        }
        .bilgi-penceresi img {
    max-width: 100%; /* Resmin genişliği div'i aşamaz */
    height: auto;    /* Oran koruyarak yüksekliği ayarla */
    display: block;  /* Alt boşlukları önlemek için */
    margin: 0 auto;  /* Görüntüyü ortalamak için */
    border-radius: 5px; /* Resme hafif yuvarlatılmış köşeler ekle */
    overflow: hidden; /* Her ihtimale karşı taşmayı gizle */
}

        /* 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;
        }


@media (max-width: 600px) {
    /* Sabit Buton */
    .sabit-buton {
        bottom: 10px; /* Daha küçük ekranlarda aşağıya daha yakın */
        right: 10px; /* Sağ tarafa daha yakın */
        padding: 8px 16px; /* Daha küçük buton boyutları */
        font-size: 14px;
    }

    /* Bilgi Penceresi */
    .bilgi-penceresi {
        width: 90%; /* Küçük ekranlarda pencere genişliği ekran boyutuna uyumlu */
        padding: 15px; /* Daha dar kenar boşlukları */
    }

    .bilgi-penceresi p {
        font-size: 12px; /* Daha küçük yazı boyutu */
        line-height: 1.4;
    }

    .bilgi-penceresi img {
        max-width: 100%; /* Mobilde de tam genişlikte kalsın */
        height: auto;
    }

    /* Kapat Butonu */
    .kapat-buton {
        padding: 5px 8px; /* Daha küçük buton */
        font-size: 12px;
    }

    /* Arka Plan */
    .arka-plan {
        background: rgba(0, 0, 0, 0.7); /* Mobilde arka planı biraz daha koyulaştır */
    }
}




.sabit-sol-div {
  position: fixed;
  top: 70px;
  left: 3px;
  width: 250px;
  background-color: #252061;
  color: white;
  padding: 20px;
  box-sizing: border-box;
  border: 1px solid #87cefa;
  border-radius: 20px;
}

.baslik {
  text-align: left;
}

.baslik .ust-yazi {
  font-size: 16px;
  font-weight: normal;
  color: white;
}

.baslik .alt-yazi {
  font-size: 20px;
  font-weight: bold;
  color: #FFD700;
  margin-top: 5px;
}

.icerik-listesi {
  margin-top: 20px;
}

.icerik {
  display: flex;
  align-items: center;
  padding: 10px;
  margin-bottom: 10px;
  background-color: white;
  color: black;
  border: 1px solid #87cefa;
  border-radius: 20px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.icerik:hover {
  background-color: #5f98c2;
  color: white;
}

.icerik .resim {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 10px;
}

.icerik .resim img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.icerik .metin {
  font-size: 16px;
  font-weight: bold;
}

.buton-container {
  margin-top: 20px;
  text-align: center;
}

.liderlik-buton {
  background-color: white;
  color: black;
  border: 1px solid #3e3e8e;
  border-radius: 20px;
  padding: 10px 20px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.liderlik-buton:hover {
  background-color: #3e3e8e;
  color: black;
}

/* 1225px'den düşük ekranlar için gizle */
@media (max-width: 1225px) {
  .sabit-sol-div {
    display: none;
  }
}



.sag-sabit-div {
  position: fixed;
  top: 70px;
  right: 10px;
  background-color: #252061;
  border: 1px solid #87cefa;
  border-radius: 10px;
  padding: 20px;
  color: white;
  width: 200px;
}

.sag-sabit-ust-yazi {
  font-size: 16px;
  margin-bottom: 10px;
  text-align: center;
}

.sag-sabit-icerik {
  margin-bottom: 10px;
}

.sag-sabit-icerik-div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #3e3e8e;
  padding: 10px;
  margin-bottom: 5px;
  border-radius: 5px;
  color: white;
}

.icerik-yazi {
  font-size: 14px;
}

.icerik-link-button {
  background-color: #87cefa;
  color: white;
  padding: 5px 10px;
  border: none;
  border-radius: 5px;
  text-decoration: none;
  font-size: 14px;
  transition: background-color 0.3s ease;
}

.icerik-link-button:hover {
  background-color: #5f98c2;
}

.gecmis-oyunlari-gor {
  display: block;
  width: 100%;
  background-color: #87cefa;
  color: white;
  padding: 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  text-align: center;
}

.gecmis-oyunlari-gor:hover {
  background-color: #5f98c2;
}

/* 1225px'den düşük ekranlar için gizle */
@media (max-width: 1225px) {
  .sag-sabit-div {
    display: none;
  }
}












</style>


</head>

<header class="header">
  <div class="logo">
    <a href="https://haberkeyfi.com.tr"><img src="https://haberkeyfi.com.tr/images/genel/haberkeyficomtr-high-resolution-logo-transparent_1.png" alt="Logo"></a>
  </div>
  <nav class="menu">
    <ul>
      <li><a href="#">Ana Sayfa</a></li>
      <li><a href="#">Haberler</a></li>
      <li><a href="#">Spor</a></li>
      <li><a href="#">Eğitim</a></li>
    </ul>
  </nav>
  <div class="menu-icon" onclick="toggleMenu()">☰</div>
</header>





<body>



<div class="sabit-sol-div">
  <div class="baslik">
    <p class="ust-yazi">İşte Bilpop'da</p>
    <p class="alt-yazi">Günün ilk 3’ü!</p>
  </div>
  <div class="icerik-listesi">
    <a href="#" class="icerik">
      <div class="resim">
        <img src="https://via.placeholder.com/50" alt="Profil Resmi">
      </div>
      <div class="metin">Ad Soyad</div>
    </a>
    <a href="#" class="icerik">
      <div class="resim">
        <img src="https://via.placeholder.com/50" alt="Profil Resmi">
      </div>
      <div class="metin">Ad Soyad</div>
    </a>
    <a href="#" class="icerik">
      <div class="resim">
        <img src="https://via.placeholder.com/50" alt="Profil Resmi">
      </div>
      <div class="metin">Ad Soyad</div>
    </a>
  </div>
  <div class="buton-container">
    <button class="liderlik-buton">Liderlik Tablosunu Gör</button>
  </div>
</div>



<div class="sag-sabit-div">
  <div class="sag-sabit-ust-yazi">Geçmiş Oyunları Oyna!</div>
  <div class="sag-sabit-icerik">
    <div class="sag-sabit-icerik-div">
      <span class="icerik-yazi">İçerik 1</span>
      <a href="#" class="icerik-link-button">Link Butonu</a>
    </div>
    <div class="sag-sabit-icerik-div">
      <span class="icerik-yazi">İçerik 2</span>
      <a href="#" class="icerik-link-button">Link Butonu</a>
    </div>
    <div class="sag-sabit-icerik-div">
      <span class="icerik-yazi">İçerik 3</span>
      <a href="#" class="icerik-link-button">Link Butonu</a>
    </div>
    <div class="sag-sabit-icerik-div">
      <span class="icerik-yazi">İçerik 4</span>
      <a href="#" class="icerik-link-button">Link Butonu</a>
    </div>
  </div>
  <button class="gecmis-oyunlari-gor">Geçmiş Oyunları Gör</button>
</div>










    <div class="oyun">
        <h3>100 Kişiye Sorduk</h3>
        <h2><?= htmlspecialchars($soru['soru']) ?></h2>
        
            <?php foreach ($cevaplar as $index => $cevap): ?>
              <div id="cevaplar">
                    <span class="sira"><?= ($index + 1) ?></span>
                    <span class="cevap" id="cevap-<?= $index + 1 ?>">?</span>
                    <span class="puan"><?= $cevap['puan'] ?> Puan</span>
             </div>   
            <?php endforeach; ?>
        
        <div>
            <div id="hak-sayisi">Kalan Hak: 10</div>
            <ul id="yanlis-listesi"></ul>
        </div>
        <input type="text" id="tahmin" placeholder="Cevabınızı yazın">
        <button id="kontrol">Tahmin Et</button>
        <div id="mesaj" style="display: none; color: red; font-weight: bold; margin-top: 20px;"></div>
    </div>

    <script>
let tahminHakki = 10;

document.getElementById('kontrol').addEventListener('click', function () {
    const tahminInput = document.getElementById('tahmin');
    const tahmin = tahminInput.value.trim(); // Kullanıcı tahmini

    if (!tahmin) { // Eğer tahmin boşsa
        // Uyarı mesajı göster
        const mesajDiv = document.getElementById('mesaj');
        mesajDiv.textContent = 'Lütfen bir tahmin girin!';
        mesajDiv.style.display = 'block';
        return; // İşlemi durdur
    }

    if (tahminHakki > 0) {
        fetch('kontrol.php', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ tahmin })
        })
        .then(response => response.json())
        .then(data => {
            if (data.dogru) {
                // Cevabı göster
                const cevapElem = document.querySelector(`#cevap-${data.index + 1}`);
                cevapElem.textContent = data.cevap;
            } else {
                // Yanlış tahmini listeye ekle
                const yanlisListesi = document.getElementById('yanlis-listesi');
                const li = document.createElement('li');
                li.textContent = tahmin;
                yanlisListesi.appendChild(li);
            }

            tahminHakki--;
            document.getElementById('hak-sayisi').textContent = `Kalan Hak: ${tahminHakki}`;

            if (tahminHakki === 0) {
                tahminInput.disabled = true;
                document.getElementById('kontrol').disabled = true;
                document.getElementById('mesaj').textContent = 'Tahmin hakkınız bitti!';
                document.getElementById('mesaj').style.display = 'block';
            }
        })
        .catch(error => console.error('Hata:', error));
    }

    tahminInput.value = ''; // Tahmin kutusunu temizle
});

    </script>
    

    











    
    
    
    
    
<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>Bakalım 100 kişiye sorulan sorulardaki en popüler cevabı bulabilecek misin?</p>
        <p>En popüler 5 cevabı 10 hakta bulmalısınız.</p>
        <img src="/img/oyunhakkinda.png">
        <p>Doğru tahmin ettiğiniz her cevap bulunduğu sıradaki puanı size kazandıracaktır.</p>
        <p>En popüler 5 cevabı bulduğunuzda kalan haklarınız için ekstra puanlarınız sizi bekliyor olacak.</p>
    </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>		
    
    
<script>	
// Menü açma/kapama
function toggleMenu() {
  var menu = document.querySelector('.menu');
  menu.classList.toggle('open'); // Menü açma/kapama
}

// Menü dışında bir yere tıklanınca menüyü kapatma
document.addEventListener('click', function(event) {
  var menu = document.querySelector('.menu');
  var menuIcon = document.querySelector('.menu-icon');
  
  // Eğer menü veya menü simgesine tıklanmadıysa menüyü kapat
  if (!menu.contains(event.target) && !menuIcon.contains(event.target)) {
    menu.classList.remove('open'); // Menü kapanacak
  }
});
</script>	
    
    

</body>
</html>

kontrol.php Sayfası

<?php
$pdo = new PDO('mysql:host=localhost;dbname=oyunlar', 'root', '');

header('Content-Type: application/json');

$data = json_decode(file_get_contents('php://input'), true);
$tahmin = strtolower(trim($data['tahmin']));
$soru_id = 1; // Sabit soru ID'si

// Doğru cevabı kontrol et
$cevaplar = $pdo->query("SELECT cevap FROM cevaplar WHERE soru_id = $soru_id")->fetchAll(PDO::FETCH_COLUMN);

$dogruCevapIndex = array_search($tahmin, array_map('strtolower', $cevaplar));
if ($dogruCevapIndex !== false) {
    // Doğru tahmin
    echo json_encode([
        'dogru' => true,
        'index' => $dogruCevapIndex,
        'cevap' => $cevaplar[$dogruCevapIndex]
    ]);
} else {
    // Yanlış tahmin
    echo json_encode(['dogru' => false]);
}
?>

MSQL sorgu

CREATE TABLE sorular (
    id INT AUTO_INCREMENT PRIMARY KEY,
    soru TEXT NOT NULL
);

CREATE TABLE cevaplar (
    id INT AUTO_INCREMENT PRIMARY KEY,
    soru_id INT NOT NULL,
    cevap TEXT NOT NULL,
    puan INT NOT NULL,
    FOREIGN KEY (soru_id) REFERENCES sorular(id)
);

Uygulama Bu şekilde gözükecek

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

By Mustafa KESKİN

Bir yanıt yazın Yanıtı iptal et

PHP ile Kelime Tahmin Oyunu Yapma

PHP Nedir ve Neler Yapılabilir?

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

Arduino Seri Port Ekranı Kullanımı

Bunlarıda Okumalısın

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

PHP ile Kelime Tahmin Oyunu Yapma

PHP Nedir ve Neler Yapılabilir?

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

Hakkımda

Takip Et

Son Yazılar

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

PHP ile Kelime Tahmin Oyunu Yapma

PHP Nedir ve Neler Yapılabilir?

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

Zamanı güzel kullanmak, hayatın en önemli sırlarından biridir.

By Mustafa KESKİN

İlgili Yazılar

Bir yanıt yazın Yanıtı iptal et

Bunlarıda Okumalısın