Futbol Açık Arttırma Mini Oyunu
by DriftBuilder15537 lines17.9 KB
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Futbol Açık Arttırma Mini Oyunu</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', Arial, sans-serif; }
body {
background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
color: #fff;
min-height: 100vh;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
h1 { font-size: 22px; margin-bottom: 10px; text-align: center; }
.container {
width: 100%;
max-width: 900px;
background: rgba(255,255,255,0.08);
border-radius: 14px;
padding: 16px;
backdrop-filter: blur(6px);
border: 1px solid rgba(255,255,255,0.15);
}
.status-bar {
display: flex;
justify-content: space-between;
gap: 10px;
margin-bottom: 14px;
flex-wrap: wrap;
}
.team-box {
flex: 1;
min-width: 150px;
background: rgba(0,0,0,0.3);
padding: 10px;
border-radius: 10px;
text-align: center;
border: 2px solid transparent;
transition: 0.3s;
}
.team-box.active { border-color: #ffd700; box-shadow: 0 0 12px #ffd70088; }
.team-box h3 { font-size: 15px; margin-bottom: 4px; }
.team-box .money { color: #7CFC00; font-weight: bold; font-size: 18px; }
.team-box .count { font-size: 12px; opacity: 0.8; }
.player-card {
background: linear-gradient(145deg, #1e3c72, #2a5298);
border-radius: 12px;
padding: 18px;
text-align: center;
margin: 14px 0;
border: 1px solid #4a90e2;
box-shadow: 0 6px 18px rgba(0,0,0,0.4);
}
.player-card .label { font-size: 12px; letter-spacing: 1px; opacity: 0.7; text-transform: uppercase; }
.player-card .name { font-size: 26px; font-weight: bold; margin: 6px 0; }
.player-card .meta { font-size: 16px; color: #ffd700; margin: 4px 0; }
.player-card .pos {
display: inline-block;
background: #ffd700;
color: #000;
padding: 2px 12px;
border-radius: 20px;
font-weight: bold;
font-size: 14px;
margin-top: 6px;
}
.player-card .rating { font-size: 14px; opacity: 0.85; margin-top: 8px; }
.bid-area {
display: flex;
gap: 10px;
justify-content: center;
flex-wrap: wrap;
margin-top: 10px;
}
button {
cursor: pointer;
border: none;
border-radius: 10px;
padding: 12px 20px;
font-size: 15px;
font-weight: bold;
transition: 0.2s;
background: #4a90e2;
color: #fff;
}
button:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.15); }
button:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-bid { background: #27ae60; }
.btn-pass { background: #c0392b; }
.btn-start { background: #f39c12; color: #000; padding: 14px 30px; font-size: 17px; }
.message {
text-align: center;
margin: 10px 0;
min-height: 24px;
font-weight: bold;
color: #ffd700;
}
.pitch {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
margin-top: 10px;
}
.pitch-team { background: rgba(0,0,0,0.25); border-radius: 10px; padding: 8px; }
.pitch-team h4 { text-align: center; font-size: 13px; margin-bottom: 6px; color: #ffd700; }
.slots { display: flex; flex-direction: column; gap: 5px; }
.slot {
background: rgba(255,255,255,0.08);
border-radius: 6px;
padding: 6px 8px;
font-size: 12px;
display: flex;
justify-content: space-between;
align-items: center;
border-left: 3px solid #4a90e2;
min-height: 30px;
}
.slot.empty { opacity: 0.45; font-style: italic; border-left-color: #555; }
.slot .pos-tag { font-size: 10px; background: #4a90e2; padding: 1px 6px; border-radius: 8px; }
.result {
text-align: center;
padding: 20px;
background: rgba(0,0,0,0.4);
border-radius: 12px;
margin-top: 14px;
}
.result h2 { font-size: 22px; margin-bottom: 10px; }
.result .winner { color: #ffd700; font-size: 20px; margin: 10px 0; }
.hidden { display: none; }
.log { font-size: 12px; opacity: 0.7; text-align: center; margin-top: 8px; }
</style>
</head>
<body>
<h1>⚽ Futbol Açık Arttırma</h1>
<div class="container">
<!-- Başlangıç ekranı -->
<div id="startScreen" style="text-align:center; padding: 20px 0;">
<p style="margin-bottom:16px; opacity:0.85;">
Her takımın 20 para birimi var. 5 futbolcu için açık arttırmayla yarışın!
Oyuncular mevkilerine göre sahaya yerleşir. Sonunda kadrolar karşılaştırılır.
</p>
<button class="btn-start" onclick="startGame()">OYUNU BAŞLAT</button>
</div>
<!-- Oyun ekranı -->
<div id="gameScreen" class="hidden">
<div class="status-bar">
<div class="team-box" id="team1Box">
<h3>Takım 1</h3>
<div class="money" id="team1Money">20 💰</div>
<div class="count" id="team1Count">0/5 oyuncu</div>
</div>
<div class="team-box" id="team2Box">
<h3>Takım 2</h3>
<div class="money" id="team2Money">20 💰</div>
<div class="count" id="team2Count">0/5 oyuncu</div>
</div>
</div>
<div class="player-card" id="playerCard">
<div class="label">Sıradaki Oyuncu</div>
<div class="name" id="pName">-</div>
<div class="meta" id="pMeta">-</div>
<div class="pos" id="pPos">-</div>
<div class="rating" id="pRating">-</div>
</div>
<div class="message" id="message">Sıra: Takım 1</div>
<div class="bid-area" id="bidArea">
<button class="btn-bid" id="bidBtn" onclick="placeBid()">Teklif Ver (+1)</button>
<button class="btn-pass" id="passBtn" onclick="passBid()">Pas Geç</button>
</div>
<div class="pitch">
<div class="pitch-team">
<h4>Takım 1 Sahası</h4>
<div class="slots" id="pitch1"></div>
</div>
<div class="pitch-team">
<h4>Takım 2 Sahası</h4>
<div class="slots" id="pitch2"></div>
</div>
</div>
<div class="log" id="log"></div>
</div>
<!-- Sonuç ekranı -->
<div id="resultScreen" class="hidden">
<div class="result">
<h2>🏆 Maç Sonucu</h2>
<div id="resultDetails"></div>
<div class="winner" id="winnerText"></div>
<button class="btn-start" style="margin-top:14px;" onclick="location.reload()">TEKRAR OYNA</button>
</div>
</div>
</div>
<script>
/* ==================== OYUNCU HAVUZU ==================== */
// Her oyuncu: isim, yıl, takım, mevki, reyting (kariyer gücü)
// Reyting = kariyerinin o yılki + genel performans puanı (0-100)
const PLAYER_POOL = [
{ name: "Lionel Messi", year: 2012, club: "Barcelona", pos: "FW", rating: 99 },
{ name: "Cristiano Ronaldo",year: 2014, club: "Real Madrid",pos: "FW", rating: 98 },
{ name: "Ronaldo Nazario", year: 1997, club: "Inter", pos: "FW", rating: 95 },
{ name: "Zinedine Zidane", year: 2002, club: "Real Madrid",pos: "MF", rating: 94 },
{ name: "Ronaldinho", year: 2005, club: "Barcelona", pos: "MF", rating: 93 },
{ name: "Thierry Henry", year: 2004, club: "Arsenal", pos: "FW", rating: 92 },
{ name: "Kaka", year: 2007, club: "Milan", pos: "MF", rating: 91 },
{ name: "Andres Iniesta", year: 2010, club: "Barcelona", pos: "MF", rating: 91 },
{ name: "Xavi", year: 2011, club: "Barcelona", pos: "MF", rating: 90 },
{ name: "Paolo Maldini", year: 2003, club: "Milan", pos: "DF", rating: 92 },
{ name: "Cafu", year: 2002, club: "Roma", pos: "DF", rating: 90 },
{ name: "Roberto Carlos", year: 2002, club: "Real Madrid",pos: "DF", rating: 91 },
{ name: "Fabio Cannavaro", year: 2006, club: "Juventus", pos: "DF", rating: 90 },
{ name: "Carles Puyol", year: 2009, club: "Barcelona", pos: "DF", rating: 89 },
{ name: "Iker Casillas", year: 2010, club: "Real Madrid",pos: "GK", rating: 92 },
{ name: "Gianluigi Buffon", year: 2006, club: "Juventus", pos: "GK", rating: 93 },
{ name: "Manuel Neuer", year: 2014, club: "Bayern", pos: "GK", rating: 92 },
{ name: "Petr Cech", year: 2008, club: "Chelsea", pos: "GK", rating: 90 },
{ name: "Steven Gerrard", year: 2005, club: "Liverpool", pos: "MF", rating: 90 },
{ name: "Frank Lampard", year: 2006, club: "Chelsea", pos: "MF", rating: 90 },
{ name: "Andrea Pirlo", year: 2007, club: "Milan", pos: "MF", rating: 91 },
{ name: "Zlatan Ibrahimovic",year: 2013,club: "PSG", pos: "FW", rating: 92 },
{ name: "Wayne Rooney", year: 2008, club: "Man United", pos: "FW", rating: 90 },
{ name: "Samuel Eto'o", year: 2009, club: "Barcelona", pos: "FW", rating: 91 },
{ name: "Didier Drogba", year: 2010, club: "Chelsea", pos: "FW", rating: 90 },
{ name: "Sergio Ramos", year: 2015, club: "Real Madrid",pos: "DF", rating: 91 },
{ name: "Gerard Pique", year: 2011, club: "Barcelona", pos: "DF", rating: 89 },
{ name: "Ashley Cole", year: 2008, club: "Chelsea", pos: "DF", rating: 89 },
{ name: "Luka Modric", year: 2018, club: "Real Madrid",pos: "MF", rating: 91 },
{ name: "Kevin De Bruyne", year: 2020, club: "Man City", pos: "MF", rating: 92 }
];
/* ==================== OYUN DURUMU ==================== */
let state = {};
function startGame() {
// Oyuncu havuzunu karıştır, 10 tanesini seç (5+5)
const shuffled = [...PLAYER_POOL].sort(() => Math.random() - 0.5).slice(0, 10);
state = {
teams: {
1: { money: 20, players: [], name: "Takım 1" },
2: { money: 20, players: [], name: "Takım 2" }
},
pool: shuffled,
poolIndex: 0,
currentTeam: 1,
currentBid: 0, // şu anki en yüksek teklif
bidder: null, // şu anki en yüksek teklifi veren takım
firstBidder: 1, // ilk teklifi verme sırası
lastBidder: null, // en son teklif veren
waitingForPass: false, // pas bekleniyor mu
phase: "bidding"
};
document.getElementById("startScreen").classList.add("hidden");
document.getElementById("gameScreen").classList.remove("hidden");
document.getElementById("resultScreen").classList.add("hidden");
renderPitches();
loadNextPlayer();
}
/* ==================== OYUNCU YÜKLEME ==================== */
function loadNextPlayer() {
if (state.poolIndex >= state.pool.length || state.teams[1].players.length === 5 || state.teams[2].players.length === 5) {
endGame();
return;
}
const player = state.pool[state.poolIndex];
// Kadrosu dolu takımlar teklif veremez
const team1Full = state.teams[1].players.length >= 5;
const team2Full = state.teams[2].players.length >= 5;
// Eğer iki takım da doluysa bitir
if (team1Full && team2Full) { endGame(); return; }
state.currentPlayer = player;
state.currentBid = 0;
state.bidder = null;
state.lastBidder = null;
state.phase = "bidding";
// Sıra: dolu olmayan takımdan başla
state.currentTeam = team1Full ? 2 : (team2Full ? 1 : (state.poolIndex % 2 === 0 ? 1 : 2));
// UI güncelle
document.getElementById("pName").textContent = player.name;
document.getElementById("pMeta").textContent = `${player.year} • ${player.club}`;
document.getElementById("pPos").textContent = posLabel(player.pos);
document.getElementById("pRating").textContent = `Kariyer Reytingi: ${player.rating}`;
updateStatus();
updateMessage();
updateButtons();
updateActiveTeam();
}
/* ==================== TEKLİF VERME ==================== */
function placeBid() {
const team = state.currentTeam;
const nextBid = state.currentBid + 1;
// Para kontrolü
if (state.teams[team].money < nextBid) {
setMessage(`${state.teams[team].name} yeterli paraya sahip değil!`);
return;
}
// Kadro kontrolü
if (state.teams[team].players.length >= 5) {
setMessage(`${state.teams[team].name} kadrosu dolu!`);
return;
}
state.currentBid = nextBid;
state.bidder = team;
state.lastBidder = team;
setMessage(`${state.teams[team].name} ${nextBid} 💰 teklif etti.`);
state.currentTeam = team === 1 ? 2 : 1;
updateActiveTeam();
updateButtons();
}
/* ==================== PAS GEÇME ==================== */
function passBid() {
const team = state.currentTeam;
// Hiç teklif yoksa ve pas geçiliyorsa: oyuncu satılmaz, sıradaki oyuncuya geç
if (state.bidder === null) {
setMessage(`${state.teams[team].name} pas geçti. Oyuncu satılmadı.`);
state.poolIndex++;
updateStatus();
setTimeout(loadNextPlayer, 900);
return;
}
// Teklif varsa ve pas geçen takım teklif veren değilse: oyuncu satılır
if (state.bidder !== null && team !== state.bidder) {
sellPlayer();
return;
}
// Teklif veren takım kendi teklifinden vazgeçemez (mantıken) — pas = satış
if (state.bidder === team) {
sellPlayer();
}
}
/* ==================== OYUNCU SATIŞI ==================== */
function sellPlayer() {
const buyer = state.bidder;
const price = state.currentBid;
const player = state.currentPlayer;
if (buyer === null) {
// Kimse teklif vermedi
state.poolIndex++;
updateStatus();
setTimeout(loadNextPlayer, 600);
return;
}
// Parayı düş, oyuncuyu ekle
state.teams[buyer].money -= price;
state.teams[buyer].players.push({ ...player, price });
setMessage(`${state.teams[buyer].name} ${player.name}'i ${price} 💰 karşılığında aldı!`);
state.poolIndex++;
renderPitches();
updateStatus();
updateButtons();
setTimeout(() => {
if (state.teams[1].players.length >= 5 && state.teams[2].players.length >= 5) {
endGame();
} else if (state.poolIndex >= state.pool.length) {
endGame();
} else {
loadNextPlayer();
}
}, 1100);
}
/* ==================== UI GÜNCELLEMELERİ ==================== */
function updateStatus() {
document.getElementById("team1Money").textContent = state.teams[1].money + " 💰";
document.getElementById("team2Money").textContent = state.teams[2].money + " 💰";
document.getElementById("team1Count").textContent = state.teams[1].players.length + "/5 oyuncu";
document.getElementById("team2Count").textContent = state.teams[2].players.length + "/5 oyuncu";
}
function updateMessage() {
if (state.bidder === null) {
setMessage(`Sıra: ${state.teams[state.currentTeam].name} — Teklif bekleniyor`);
}
}
function setMessage(txt) {
document.getElementById("message").textContent = txt;
document.getElementById("log").textContent = txt;
}
function updateActiveTeam() {
document.getElementById("team1Box").classList.toggle("active", state.currentTeam === 1);
document.getElementById("team2Box").classList.toggle("active", state.currentTeam === 2);
}
function updateButtons() {
const team = state.currentTeam;
const teamMoney = state.teams[team].money;
const nextBid = state.currentBid + 1;
const canBid = teamMoney >= nextBid && state.teams[team].players.length < 5;
document.getElementById("bidBtn").disabled = !canBid;
document.getElementById("passBtn").disabled = false;
document.getElementById("bidBtn").textContent = `Teklif Ver (${nextBid} 💰)`;
}
/* ==================== SAHA GÖRÜNÜMÜ ==================== */
function posLabel(pos) {
return { GK: "Kaleci", DF: "Defans", MF: "Orta Saha", FW: "Forvet" }[pos] || pos;
}
function renderPitches() {
renderTeamPitch(1, "pitch1");
renderTeamPitch(2, "pitch2");
}
function renderTeamPitch(teamId, elId) {
const el = document.getElementById(elId);
const players = state.teams[teamId].players;
// Mevkiye göre dizilim: GK, DF, MF, FW
const order = { GK: 0, DF: 1, MF: 2, FW: 3 };
const sorted = [...players].sort((a, b) => order[a.pos] - order[b.pos]);
el.innerHTML = "";
for (let i = 0; i < 5; i++) {
const p = sorted[i];
const div = document.createElement("div");
if (p) {
div.className = "slot";
div.innerHTML = `<span>${p.name}</span><span class="pos-tag">${p.pos}</span>`;
} else {
div.className = "slot empty";
div.textContent = "Boş";
}
el.appendChild(div);
}
}
/* ==================== OYUN SONU & KARŞILAŞTIRMA ==================== */
function endGame() {
state.phase = "done";
document.getElementById("gameScreen").classList.add("hidden");
document.getElementById("resultScreen").classList.remove("hidden");
const t1 = state.teams[1];
const t2 = state.teams[2];
const score1 = calculateScore(t1);
const score2 = calculateScore(t2);
let details = `
<div style="margin:10px 0;">
<b>${t1.name}</b> — Toplam Güç: <span style="color:#7CFC00;">${score1.toFixed(1)}</span><br>
<small>${t1.players.map(p => `${p.name} (${p.rating})`).join(", ") || "Oyuncu yok"}</small>
</div>
<div style="margin:10px 0;">
<b>${t2.name}</b> — Toplam Güç: <span style="color:#7CFC00;">${score2.toFixed(1)}</span><br>
<small>${t2.players.map(p => `${p.name} (${p.rating})`).join(", ") || "Oyuncu yok"}</small>
</div>
`;
// Mevki dengesi bonusu: her takımda GK, DF, MF, FW çeşitliliği
const bonus1 = formationBonus(t1.players);
const bonus2 = formationBonus(t2.players);
details += `
<div style="margin-top:10px; font-size:13px; opacity:0.85;">
Diziliş Bonusu → ${t1.name}: +${bonus1} | ${t2.name}: +${bonus2}
</div>
`;
const total1 = score1 + bonus1;
const total2 = score2 + bonus2;
document.getElementById("resultDetails").innerHTML = details;
let winner;
if (total1 > total2) winner = `${t1.name} kazandı! (${total1.toFixed(1)} - ${total2.toFixed(1)})`;
else if (total2 > total1) winner = `${t2.name} kazandı! (${total2.toFixed(1)} - ${total1.toFixed(1)})`;
else winner = `Berabere! (${total1.toFixed(1)} - ${total2.toFixed(1)})`;
document.getElementById("winnerText").textContent = winner;
}
function calculateScore(team) {
if (team.players.length === 0) return 0;
const sum = team.players.reduce((a, p) => a + p.rating, 0);
return sum / team.players.length; // ortalama reyting
}
function formationBonus(players) {
// Her farklı mevki için +2 bonus (GK, DF, MF, FW)
const positions = new Set(players.map(p => p.pos));
return positions.size * 2;
}
/* Başlangıçta sahayı boş göster */
window.onload = () => {
// başlangıç ekranı görünsün
};
</script>
</body>
</html>Game Source: Futbol Açık Arttırma Mini Oyunu
Creator: DriftBuilder15
Libraries: none
Complexity: complex (537 lines, 17.9 KB)
The full source code is displayed above on this page.
Remix Instructions
To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: futbol-a-k-artt-rma-mini-oyunu-driftbuilder15" to link back to the original. Then publish at arcadelab.ai/publish.