<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kim Milyoner Olmak İster? (2 Kişilik Sesli)</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #0c0c2c;
color: white;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
flex-direction: column;
}
.game-container {
display: flex;
width: 95%;
max-width: 1200px;
border: 2px solid #ccc;
border-radius: 10px;
background-color: #000033;
}
.main-panel {
flex-grow: 1;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.player-panels {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}
.player-panel {
width: 48%;
border: 1px solid #aaa;
border-radius: 10px;
padding: 10px;
text-align: center;
}
.player-panel.active {
border-color: #ffcc00;
box-shadow: 0 0 10px #ffcc00;
}
.lifelines {
margin-top: 10px;
}
.lifeline-btn {
background-color: #4CAF50;
color: white;
padding: 10px;
margin: 5px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.lifeline-btn:disabled {
background-color: #555;
cursor: not-allowed;
}
.question-container {
background-color: #1a1a4a;
padding: 20px;
border-radius: 10px;
text-align: center;
font-size: 1.5em;
margin-bottom: 20px;
min-height: 100px;
}
.options-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
}
.option {
background-color: #333366;
padding: 15px;
border-radius: 10px;
cursor: pointer;
border: 2px solid transparent;
font-size: 1.2em;
}
.option:hover {
background-color: #4d4d8a;
}
.option.selected {
background-color: #ff9933;
border-color: #fff;
}
.option.correct {
background-color: #009933;
animation: flash 1s;
}
.option.incorrect {
background-color: #cc0000;
}
.sidebar {
width: 250px;
background-color: #1a1a4a;
padding: 20px;
display: flex;
flex-direction: column-reverse;
border-left: 2px solid #ccc;
}
.money-ladder {
list-style: none;
padding: 0;
margin: 0;
text-align: center;
}
.money-ladder li {
padding: 8px;
border-radius: 5px;
margin-bottom: 5px;
font-weight: bold;
}
.money-ladder .current-question {
background-color: #ff9933;
color: #000;
}
.money-ladder .safe-haven {
background-color: #006400;
}
.controls {
margin-top: 20px;
text-align: center;
}
#start-btn, #voice-btn {
padding: 15px 30px;
font-size: 1.2em;
cursor: pointer;
background-color: #ffcc00;
color: #000;
border: none;
border-radius: 5px;
}
#voice-btn {
background-color: #0099ff;
color: white;
margin-left: 10px;
}
#voice-btn:disabled {
background-color: #555;
}
.audience-chart {
display: flex;
justify-content: space-around;
align-items: flex-end;
height: 150px;
margin-top: 20px;
border: 1px solid #fff;
padding: 10px;
}
.bar {
width: 20%;
background-color: #ffcc00;
text-align: center;
}
</style>
</head>
<body>
<div class="game-container">
<div class="main-panel">
<div class="player-panels">
<div id="player1-panel" class="player-panel">
<h3>1. Oyuncu</h3>
<div id="player1-score">Kazanç: 0 TL</div>
<div class="lifelines">
<button id="p1-lifeline-5050" class="lifeline-btn" onclick="useLifeline('5050', 1)">50/50</button>
<button id="p1-lifeline-double" class="lifeline-btn" onclick="useLifeline('double', 1)">Çift Cevap</button>
<button id="p1-lifeline-audience" class="lifeline-btn" onclick="useLifeline('audience', 1)">Seyirci</button>
</div>
</div>
<div id="player2-panel" class="player-panel">
<h3>2. Oyuncu</h3>
<div id="player2-score">Kazanç: 0 TL</div>
<div class="lifelines">
<button id="p2-lifeline-5050" class="lifeline-btn" onclick="useLifeline('5050', 2)">50/50</button>
<button id="p2-lifeline-double" class="lifeline-btn" onclick="useLifeline('double', 2)">Çift Cevap</button>
<button id="p2-lifeline-audience" class="lifeline-btn" onclick="useLifeline('audience', 2)">Seyirci</button>
</div>
</div>
</div>
<div id="question-container" class="question-container">
Kim Milyoner Olmak İster'e Hoş Geldiniz!
</div>
<div class="options-container">
<div class="option" id="optionA" data-option="A"></div>
<div class="option" id="optionB" data-option="B"></div>
<div class="option" id="optionC" data-option="C"></div>
<div class="option" id="optionD" data-option="D"></div>
</div>
<div id="audience-poll" class="audience-chart" style="display: none;"></div>
<div class="controls">
<button id="start-btn" onclick="startGame()">Oyunu Başlat</button>
<button id="voice-btn" disabled>Cevap Ver</button>
</div>
</div>
<div class="sidebar">
<ul class="money-ladder" id="money-ladder">
</ul>
</div>
</div>
<script>
const questions = [
{ question: "Türkiye'nin başkenti neresidir?", options: ["İstanbul", "Ankara", "İzmir", "Bursa"], answer: "B" },
{ question: "Hangi gezegen 'Kızıl Gezegen' olarak bilinir?", options: ["Venüs", "Mars", "Jüpiter", "Satürn"], answer: "B" },
{ question: "Mustafa Kemal Atatürk'ün anıt mezarı nerededir?", options: ["Çanakkale", "Samsun", "Ankara", "İstanbul"], answer: "C" },
{ question: "Hangi hayvan 'ormanlar kralı' olarak bilinir?", options: ["Kaplan", "Fil", "Aslan", "Ayı"], answer: "C" },
{ question: "Dünyanın en yüksek dağı hangisidir?", options: ["K2", "Kangchenjunga", "Lhotse", "Everest"], answer: "D" },
{ question: "Hangi ünlü ressam 'Mona Lisa' tablosunu yapmıştır?", options: ["Vincent van Gogh", "Pablo Picasso", "Leonardo da Vinci", "Rembrandt"], answer: "C" },
{ question: "Futbolda bir takımda kaç oyuncu bulunur?", options: ["9", "10", "11", "12"], answer: "C" },
{ question: "Hangi elementin kimyasal sembolü 'O' dur?", options: ["Oksijen", "Altın", "Gümüş", "Demir"], answer: "A" },
{ question: "İstiklal Marşı'nın şairi kimdir?", options: ["Namık Kemal", "Ziya Gökalp", "Mehmet Akif Ersoy", "Yahya Kemal Beyatlı"], answer: "C" },
{ question: "Hangi ülke 'Güneşin Doğduğu Ülke' olarak bilinir?", options: ["Çin", "Japonya", "Hindistan", "Tayland"], answer: "B" },
{ question: "Hangisi bir programlama dili değildir?", options: ["Java", "Python", "HTML", "C++"], answer: "C" },
{ question: "Fatih Sultan Mehmet, İstanbul'u hangi yılda fethetmiştir?", options: ["1299", "1453", "1517", "1071"], answer: "B" },
{ question: "Hangisi periyodik tabloda bir soygaz değildir?", options: ["Helyum", "Neon", "Argon", "Hidrojen"], answer: "D" }
];
const moneyLadder = [
"5.000.000 TL", "1.000.000 TL", "400.000 TL", "200.000 TL", "100.000 TL",
"50.000 TL", "30.000 TL", "15.000 TL", "7.500 TL", "5.000 TL", "2.000 TL", "1.000 TL", "500 TL"
].reverse();
const safeHavens = [1, 6]; // 2. ve 7. sorular (0-indexed)
let currentPlayer = 1;
let playerScores = { 1: 0, 2: 0 };
let playerLifelines = {
1: { '5050': true, 'double': true, 'audience': true },
2: { '5050': true, 'double': true, 'audience': true }
};
let currentQuestionIndex = 0;
let gameInProgress = false;
let doubleAnswerUsed = false;
let gameState = 'answering'; // 'answering' veya 'confirming' olabilir
let pendingChoice = null;
const questionContainer = document.getElementById('question-container');
const options = Array.from(document.getElementsByClassName('option'));
const moneyLadderEl = document.getElementById('money-ladder');
const startBtn = document.getElementById('start-btn');
const voiceBtn = document.getElementById('voice-btn');
const speechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
let recognition;
if(speechRecognition) {
recognition = new speechRecognition();
recognition.lang = 'tr-TR';
recognition.continuous = false;
recognition.interimResults = false;
recognition.onresult = (event) => {
const transcript = event.results[0][0].transcript.trim().toLowerCase();
if (gameState === 'confirming') {
if (transcript.includes('evet')) {
checkAnswer(pendingChoice);
} else if (transcript.includes('hayır')) {
cancelSelection();
} else {
speak("Lütfen 'evet' veya 'hayır' deyin.");
}
} else if (gameState === 'answering') {
const choice = transcript.toUpperCase().charAt(0);
if (['A', 'B', 'C', 'D'].includes(choice)) {
selectAnswer(choice);
} else {
speak("Lütfen geçerli bir şık söyleyin: A, B, C, veya D.");
}
}
};
recognition.onerror = (event) => {
speak("Sesinizi anlayamadım. Lütfen tekrar deneyin.");
};
}
voiceBtn.addEventListener('click', () => {
if(recognition){
recognition.start();
if (gameState === 'answering') {
speak("Lütfen cevabınızı söyleyin.");
} else if (gameState === 'confirming') {
speak("Evet mi, hayır mı?");
}
}
});
function speak(text) {
speechSynthesis.cancel(); // Önceki konuşmaları iptal et
const utterance = new SpeechSynthesisUtterance(text);
utterance.lang = 'tr-TR';
speechSynthesis.speak(utterance);
}
function updateMoneyLadder() {
moneyLadderEl.innerHTML = '';
moneyLadder.forEach((amount, index) => {
const li = document.createElement('li');
li.textContent = `${index + 1}. Soru: ${amount}`;
if (safeHavens.includes(index)) {
li.classList.add('safe-haven');
}
if (index === currentQuestionIndex) {
li.classList.add('current-question');
}
moneyLadderEl.appendChild(li);
});
}
function startGame() {
gameInProgress = true;
startBtn.style.display = 'none';
voiceBtn.disabled = false;
resetPlayer(1);
resetPlayer(2);
switchPlayer(1);
}
function switchPlayer(player) {
currentPlayer = player;
currentQuestionIndex = 0;
document.getElementById('player1-panel').classList.toggle('active', currentPlayer === 1);
document.getElementById('player2-panel').classList.toggle('active', currentPlayer === 2);
speak(`Sıra ${currentPlayer}. oyuncuda. Bol şans!`);
setTimeout(loadQuestion, 2000);
}
function resetPlayer(player) {
playerScores[player] = 0;
playerLifelines[player] = { '5050': true, 'double': true, 'audience': true };
document.getElementById(`p${player}-lifeline-5050`).disabled = false;
document.getElementById(`p${player}-lifeline-double`).disabled = false;
document.getElementById(`p${player}-lifeline-audience`).disabled = false;
document.getElementById(`player${player}-score`).textContent = `Kazanç: 0 TL`;
}
function loadQuestion() {
gameState = 'answering';
pendingChoice = null;
resetOptions();
if (currentQuestionIndex >= questions.length) {
endGame(true);
return;
}
const q = questions[currentQuestionIndex];
questionContainer.textContent = q.question;
options.forEach((opt, index) => {
opt.textContent = `${opt.dataset.option}: ${q.options[index]}`;
});
updateMoneyLadder();
speak(`Soru geliyor: ${q.question}... Şıklar: A) ${q.options[0]}, B) ${q.options[1]}, C) ${q.options[2]}, D) ${q.options[3]}`);
}
function selectAnswer(choice) {
if (!gameInProgress || gameState !== 'answering') return;
const selectedOptionEl = document.getElementById(`option${choice}`);
if (selectedOptionEl.style.visibility === 'hidden') return;
options.forEach(opt => opt.classList.remove('selected'));
selectedOptionEl.classList.add('selected');
pendingChoice = choice;
gameState = 'confirming';
speak("Son kararınız mı?");
}
function cancelSelection() {
if (pendingChoice) {
document.getElementById(`option${pendingChoice}`).classList.remove('selected');
}
pendingChoice = null;
gameState = 'answering';
speak("Cevap iptal edildi. Lütfen yeni bir cevap seçin.");
}
function checkAnswer(choice) {
gameState = 'checking'; // Cevap kontrol edilirken başka işlem yapılmasını engelle
const q = questions[currentQuestionIndex];
const selectedOptionEl = document.getElementById(`option${choice}`);
if (choice === q.answer) {
selectedOptionEl.classList.remove('selected');
selectedOptionEl.classList.add('correct');
speak("Doğru cevap!");
currentQuestionIndex++;
setTimeout(loadQuestion, 2000);
} else {
selectedOptionEl.classList.remove('selected');
selectedOptionEl.classList.add('incorrect');
const correctOptionEl = document.getElementById(`option${q.answer}`);
correctOptionEl.classList.add('correct');
speak(`Yanlış cevap. Doğru cevap ${q.answer} şıkkıydı.`);
let safeHavenIndex = -1;
for(let i = safeHavens.length - 1; i >= 0; i--) {
if (currentQuestionIndex > safeHavens[i]) {
safeHavenIndex = safeHavens[i];
break;
}
}
playerScores[currentPlayer] = safeHavenIndex !== -1 ? parseInt(moneyLadder[safeHavenIndex].replace(/\D/g, '')) : 0;
document.getElementById(`player${currentPlayer}-score`).textContent = `Kazanç: ${playerScores[currentPlayer]} TL`;
speak(`${currentPlayer}. oyuncu, ${playerScores[currentPlayer]} lira ile oyunu tamamladı.`);
setTimeout(() => {
const nextPlayer = currentPlayer === 1 ? 2 : 1;
if(document.getElementById(`player${nextPlayer}-panel`).classList.contains('played')) {
endGame(false);
} else {
document.getElementById(`player${currentPlayer}-panel`).classList.add('played');
switchPlayer(nextPlayer);
}
}, 3000);
}
}
function useLifeline(type, player) {
if (player !== currentPlayer || !playerLifelines[player][type] || !gameInProgress) return;
document.getElementById(`p${player}-lifeline-${type}`).disabled = true;
playerLifelines[player][type] = false;
speak(`${type} jokeri kullanılıyor.`);
const q = questions[currentQuestionIndex];
if (type === '5050') {
const wrongOptions = ['A', 'B', 'C', 'D'].filter(o => o !== q.answer);
const toRemove1 = wrongOptions.splice(Math.floor(Math.random() * wrongOptions.length), 1)[0];
const toRemove2 = wrongOptions.splice(Math.floor(Math.random() * wrongOptions.length), 1)[0];
document.getElementById(`option${toRemove1}`).style.visibility = 'hidden';
document.getElementById(`option${toRemove2}`).style.visibility = 'hidden';
} else if (type === 'double') {
speak("Çift cevap hakkınız var. İlk tahmininizi yapın.");
} else if (type === 'audience') {
const poll = document.getElementById('audience-poll');
poll.innerHTML = '';
poll.style.display = 'flex';
const percentages = [0,0,0,0];
const correctIndex = ['A', 'B', 'C', 'D'].indexOf(q.answer);
percentages[correctIndex] = Math.floor(Math.random() * 40) + 41; // 41-80%
let remaining = 100 - percentages[correctIndex];
for(let i=0; i<4; i++){
if(i !== correctIndex){
const share = Math.floor(Math.random() * remaining);
percentages[i] = share;
remaining -= share;
}
}
percentages[percentages.findIndex(p => p === 0 && percentages.indexOf(p) !== correctIndex)] += remaining;
['A','B','C','D'].forEach((opt, index) => {
const bar = document.createElement('div');
bar.className = 'bar';
bar.style.height = `${percentages[index]}%`;
bar.textContent = `${opt}: ${percentages[index]}%`;
poll.appendChild(bar);
});
}
}
function resetOptions() {
options.forEach(opt => {
opt.style.visibility = 'visible';
opt.classList.remove('correct', 'incorrect', 'selected');
});
document.getElementById('audience-poll').style.display = 'none';
}
function endGame(isWinner) {
gameInProgress = false;
voiceBtn.disabled = true;
let message = "";
if (isWinner) {
message = `Tebrikler ${currentPlayer}. Oyuncu! Büyük ödül olan ${moneyLadder[moneyLadder.length-1]} sizin!`;
} else {
const winner = playerScores[1] > playerScores[2] ? 1 : (playerScores[2] > playerScores[1] ? 2 : null);
if(winner === null) {
message = "Oyun bitti! Skorlar berabere!";
} else {
message = `Oyun bitti! Kazanan ${winner}. oyuncu!`;
}
}
questionContainer.textContent = message;
speak(message);
}
// Initial setup
updateMoneyLadder();
</script>
</body>
</html>
Selamlar milyoner oyununu bu sefer ses ile cevap veriyoruz örnek b diyoruz son kararınız mı diye soruyor evet dersek kitliyor hayır dersek geri çekiyor öncelik soru ve şıkları okumasını bekliyoruz cevap ver butonuna basıyoruz sesli olarak b diyoruz b işaretleniyor son kararınız mı diyor evet dersek doğru ise yeşil yanıyor hiçbir şekilde manuel işaretleme yapamıyorsunuz olaylar ses ile ilerliyor jokerler hariç
proje geliştirelibilir kodları yukarı bıraktım
