<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bul Karayı Al Parayı - Animasyonlu</title>
<style>
/* --- TASARIM (CSS) KODLARI --- */
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #2c3e50;
color: #ecf0f1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
overflow: hidden;
}
h1 {
margin-bottom: 10px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
#message {
font-size: 22px;
font-weight: bold;
height: 30px;
margin-bottom: 30px;
transition: color 0.3s;
}
/* Kartların içinde duracağı ana alan */
.game-board {
position: relative;
width: 400px; /* 3 kart + boşluklar için genişlik */
height: 180px;
margin-bottom: 40px;
}
.card {
width: 120px;
height: 180px;
position: absolute;
top: 0;
left: 0;
perspective: 1000px;
cursor: pointer;
/* Yer değiştirme animasyonunun süresi */
transition: transform 0.4s ease-in-out;
}
.card-inner {
width: 100%;
height: 100%;
transition: transform 0.6s;
transform-style: preserve-3d;
position: relative;
box-shadow: 0 4px 8px rgba(0,0,0,0.3);
border-radius: 10px;
}
.card.flipped .card-inner {
transform: rotateY(180deg);
}
.card-front, .card-back {
width: 100%;
height: 100%;
position: absolute;
backface-visibility: hidden;
display: flex;
justify-content: center;
align-items: center;
font-size: 60px;
border-radius: 10px;
border: 3px solid #bdc3c7;
box-sizing: border-box;
}
.card-front {
background-color: #c0392b;
background-image: repeating-linear-gradient(
45deg, transparent, transparent 10px, #a5281b 10px, #a5281b 20px
);
}
.card-back {
background-color: #ecf0f1;
transform: rotateY(180deg);
}
.card-back.black { color: #2c3e50; }
.card-back.red { color: #e74c3c; }
button {
padding: 12px 25px;
font-size: 18px;
font-weight: bold;
color: #2c3e50;
background-color: #f1c40f;
border: none;
border-radius: 8px;
cursor: pointer;
box-shadow: 0 4px 6px rgba(0,0,0,0.3);
transition: background-color 0.2s, transform 0.1s, opacity 0.3s;
}
button:hover { background-color: #f39c12; }
button:active { transform: scale(0.95); }
button:disabled {
background-color: #95a5a6;
cursor: not-allowed;
opacity: 0.5;
}
</style>
</head>
<body>
<h1>Bul Karayı, Al Parayı!</h1>
<div id="message">Oynamak için Başla butonuna bas!</div>
<div class="game-board" id="board">
<div class="card" id="card-0" onclick="selectCard(0)">
<div class="card-inner">
<div class="card-front"></div>
<div class="card-back" id="card-val-0"></div>
</div>
</div>
<div class="card" id="card-1" onclick="selectCard(1)">
<div class="card-inner">
<div class="card-front"></div>
<div class="card-back" id="card-val-1"></div>
</div>
</div>
<div class="card" id="card-2" onclick="selectCard(2)">
<div class="card-inner">
<div class="card-front"></div>
<div class="card-back" id="card-val-2"></div>
</div>
</div>
</div>
<button id="startBtn" onclick="startGame()">Oyunu Başlat</button>
<script>
let winningCardIndex = -1;
let canPlay = false;
// Kartların ekrandaki X koordinatları (sol, orta, sağ)
const POSITIONS_X = [0, 140, 280];
// Hangi kartın (0,1,2) hangi pozisyonda (0,1,2) olduğunu tutan dizi
let cardPositions = [0, 1, 2];
// Kartların pozisyonlarını ekrana yansıtan fonksiyon
function updateVisualPositions() {
for (let i = 0; i < 3; i++) {
const card = document.getElementById(`card-${i}`);
// Kartı bulunduğu pozisyona göre sağa kaydır (X ekseninde)
card.style.transform = `translateX(${POSITIONS_X[cardPositions[i]]}px)`;
}
}
// Sayfa yüklendiğinde kartları yan yana diz
window.onload = updateVisualPositions;
function startGame() {
const btn = document.getElementById('startBtn');
const messageEl = document.getElementById('message');
btn.disabled = true;
canPlay = false;
// Başlangıç pozisyonlarını sıfırla
cardPositions = [0, 1, 2];
updateVisualPositions();
winningCardIndex = Math.floor(Math.random() * 3);
// Tüm kartları kapat ve simgeleri belirle
for (let i = 0; i < 3; i++) {
const card = document.getElementById(`card-${i}`);
const cardBack = document.getElementById(`card-val-${i}`);
card.classList.remove('flipped');
cardBack.classList.remove('black', 'red');
if (i === winningCardIndex) {
cardBack.textContent = "♠"; // Maça
cardBack.classList.add('black');
} else {
cardBack.textContent = "♥"; // Kupa
cardBack.classList.add('red');
}
}
// Animasyon Senaryosu
messageEl.textContent = "Dikkatli bak! Karayı aklında tut...";
messageEl.style.color = "#f1c40f";
// 1. Adım: Yarım saniye sonra kartları açıp kullanıcıya göster
setTimeout(() => {
for(let i=0; i<3; i++) document.getElementById(`card-${i}`).classList.add('flipped');
}, 500);
// 2. Adım: 2 saniye gösterdikten sonra kartları kapat
setTimeout(() => {
for(let i=0; i<3; i++) document.getElementById(`card-${i}`).classList.remove('flipped');
messageEl.textContent = "Kartlar karışıyor, gözünü ayırma!";
}, 2500);
// 3. Adım: Kartlar kapandıktan sonra karıştırma işlemini başlat
setTimeout(() => {
shuffleCards(10); // 10 defa yer değiştir
}, 3200);
}
function shuffleCards(shuffleCount) {
let currentShuffle = 0;
// Her 400 milisaniyede bir çalışacak döngü
const shuffleInterval = setInterval(() => {
// Hangi iki pozisyonun yer değiştireceğini rastgele seç
let pos1 = Math.floor(Math.random() * 3);
let pos2 = Math.floor(Math.random() * 3);
while (pos1 === pos2) {
pos2 = Math.floor(Math.random() * 3); // Aynı gelirse tekrar seç
}
// Seçilen pozisyonlardaki kartları bul
let cardIndex1 = cardPositions.indexOf(pos1);
let cardIndex2 = cardPositions.indexOf(pos2);
// Kartların pozisyonlarını dizide takas et
cardPositions[cardIndex1] = pos2;
cardPositions[cardIndex2] = pos1;
// Takası ekrana yansıt (CSS transition sayesinde kayarak yer değiştirecekler)
updateVisualPositions();
currentShuffle++;
// Hedef karıştırma sayısına ulaşıldığında döngüyü durdur
if (currentShuffle >= shuffleCount) {
clearInterval(shuffleInterval);
finishShuffling();
}
}, 450); // CSS animasyon süresiyle (0.4s) uyumlu olması için 450ms bekliyoruz
}
function finishShuffling() {
canPlay = true;
document.getElementById('message').textContent = "Hangi kart kara? Seçimini yap!";
document.getElementById('message').style.color = "#ecf0f1";
}
function selectCard(selectedIndex) {
if (!canPlay) return; // Sıra oyuncuda değilse (karışıyorsa vs.) tıklamayı engelle
canPlay = false;
const messageEl = document.getElementById('message');
const btn = document.getElementById('startBtn');
// Tıklanan kartı çevir
document.getElementById(`card-${selectedIndex}`).classList.add('flipped');
// Doğru kart mı diye kontrol et
if (selectedIndex === winningCardIndex) {
messageEl.textContent = "Tebrikler! Gözünden hiçbir şey kaçmıyor. 💰";
messageEl.style.color = "#2ecc71";
} else {
messageEl.textContent = "Eyvah, kaçırdın! Kara başka yerdeydi. 💸";
messageEl.style.color = "#e74c3c";
}
// Sonucu gördükten 1.5 saniye sonra diğer kartları da aç ve butonu aktif et
setTimeout(() => {
for(let i=0; i<3; i++) {
document.getElementById(`card-${i}`).classList.add('flipped');
}
btn.textContent = "Tekrar Oyna";
btn.disabled = false;
}, 1500);
}
</script>
</body>
</html>
Selamlar yapay zeka ile yapılan Bul Karayı Al Parayı oyunu geliştirmek size kalmış iyi forumlar
https://www.youtube.com/watch?v=C126xBJeQXA&t