<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gol Yemez Kaleci</title>
<style>
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #111;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
overflow: hidden;
touch-action: none;
}
#game-container {
position: relative;
width: 800px;
height: 600px;
background-color: #2e7d32;
border: 10px solid #1b5e20;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0,0,0,0.8);
cursor: crosshair;
}
/* Çim Deseni */
#game-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: repeating-linear-gradient(
0deg,
transparent,
transparent 50px,
rgba(255, 255, 255, 0.05) 50px,
rgba(255, 255, 255, 0.05) 100px
);
pointer-events: none;
}
.penalty-area {
position: absolute;
width: 400px;
height: 150px;
bottom: 0;
left: 50%;
transform: translateX(-50%);
border: 3px solid rgba(255, 255, 255, 0.7);
border-bottom: none;
box-sizing: border-box;
pointer-events: none;
}
#goal {
position: absolute;
top: 40px;
left: 50%;
transform: translateX(-50%);
width: 360px;
height: 160px;
z-index: 1;
pointer-events: none;
}
#goal img {
width: 100%;
height: 100%;
object-fit: contain;
}
#goalkeeper {
position: absolute;
top: 130px;
left: 50%;
transform: translate(-50%, -50%) rotate(0deg);
width: 130px;
height: 130px;
z-index: 2;
pointer-events: none;
}
#goalkeeper img {
width: 100%;
height: 100%;
object-fit: contain;
}
#ball {
position: absolute;
top: 500px;
left: 400px;
transform: translate(-50%, -50%);
width: 50px;
height: 50px;
z-index: 4;
border-radius: 50%;
pointer-events: none;
}
#ball img {
width: 100%;
height: 100%;
object-fit: contain;
}
#scoreboard {
position: absolute;
top: 15px;
left: 15px;
color: #fff;
font-size: 20px;
font-weight: bold;
z-index: 5;
background-color: rgba(0, 0, 0, 0.7);
padding: 10px 15px;
border-radius: 8px;
border: 2px solid rgba(255,255,255,0.3);
pointer-events: none;
}
#message {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
font-size: 56px;
font-weight: bold;
display: none;
text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.8);
z-index: 6;
text-align: center;
pointer-events: none;
width: 100%;
}
/* --- MENÜ VE BİTİŞ EKRANLARI --- */
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.85);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 10;
color: white;
text-align: center;
}
.title {
font-size: 56px;
color: #ffbb33;
text-shadow: 2px 2px 10px rgba(255, 187, 51, 0.5);
margin-bottom: 40px;
text-transform: uppercase;
}
.btn {
background: linear-gradient(to bottom, #00C851, #007E33);
border: 2px solid #fff;
color: white;
padding: 15px 40px;
font-size: 24px;
font-weight: bold;
border-radius: 30px;
cursor: pointer;
transition: transform 0.2s, box-shadow 0.2s;
text-transform: uppercase;
}
.btn:hover {
transform: scale(1.05);
box-shadow: 0 0 15px rgba(0, 200, 81, 0.8);
}
/* Kalecinin Konuşma Balonu */
.speech-bubble {
position: relative;
background: #fff;
color: #111;
border-radius: 15px;
padding: 20px;
font-size: 22px;
font-weight: bold;
max-width: 500px;
margin-bottom: 40px;
box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}
.speech-bubble::after {
content: '';
position: absolute;
bottom: -20px;
left: 50%;
transform: translateX(-50%);
border-width: 20px 20px 0;
border-style: solid;
border-color: #fff transparent transparent transparent;
display: block;
width: 0;
}
.gk-avatar {
width: 100px;
height: 100px;
margin-bottom: 20px;
filter: drop-shadow(0 0 10px rgba(255,255,255,0.3));
}
.stats {
font-size: 24px;
margin-bottom: 30px;
color: #ddd;
}
#hint {
position: absolute;
bottom: 20px;
width: 100%;
text-align: center;
color: rgba(255, 255, 255, 0.8);
font-size: 18px;
font-weight: bold;
pointer-events: none;
z-index: 5;
display: none;
}
</style>
</head>
<body>
<div id="game-container">
<!-- ANA MENÜ EKRANI -->
<div id="menu-screen" class="overlay">
<h1 class="title">Gol Yemez Kaleci</h1>
<button class="btn" onclick="startGame()">Başlat</button>
</div>
<!-- OYUN BİTİŞ EKRANI -->
<div id="gameover-screen" class="overlay" style="display: none;">
<div class="speech-bubble" id="gk-speech">Buraya kalecinin lafı gelecek...</div>
<img src="https://i.8upload.com/image/29da03d16f9552e5/pngwing-com-3.png" class="gk-avatar" alt="Kaleci Avatar">
<div class="stats" id="final-stats">Attığın Gol: 0 / 6</div>
<button class="btn" onclick="startGame()">Yeniden Oyna</button>
</div>
<div class="penalty-area"></div>
<div id="scoreboard" style="display: none;">Gol: 0 | Şut: 0/6</div>
<div id="hint">Topun gitmesini istediğin yere tıkla!</div>
<div id="message">
<span id="msg-text">GOL!</span>
</div>
<div id="goal">
<img src="https://i.8upload.com/image/4d3231a84803d37b/pngwing-com-4.png" alt="Kale">
</div>
<div id="goalkeeper">
<img src="https://i.8upload.com/image/29da03d16f9552e5/pngwing-com-3.png" alt="Kaleci">
</div>
<div id="ball">
<img src="https://i.8upload.com/image/070ddb815346a41c/pngwing-com-2.png" alt="Futbol Topu">
</div>
</div>
<script>
const container = document.getElementById('game-container');
const ball = document.getElementById('ball');
const goalkeeper = document.getElementById('goalkeeper');
const message = document.getElementById('message');
const msgText = document.getElementById('msg-text');
const scoreboard = document.getElementById('scoreboard');
const hint = document.getElementById('hint');
const menuScreen = document.getElementById('menu-screen');
const gameoverScreen = document.getElementById('gameover-screen');
const gkSpeech = document.getElementById('gk-speech');
const finalStats = document.getElementById('final-stats');
let score = 0;
let shotsTaken = 0;
let gameState = 'menu'; // menu, idle, shooting, gameover
const MAX_SHOTS = 6;
const BALL_START_X = 400;
const BALL_START_Y = 500;
const ANIMATION_DURATION = 500;
container.addEventListener('mousedown', shootBall);
container.addEventListener('touchstart', shootBall, {passive: false});
function startGame() {
// Değişkenleri Sıfırla
score = 0;
shotsTaken = 0;
gameState = 'idle';
// Ekranları Yönet
menuScreen.style.display = 'none';
gameoverScreen.style.display = 'none';
scoreboard.style.display = 'block';
hint.style.display = 'block';
updateScoreboard();
resetPositions();
}
function shootBall(e) {
if (gameState !== 'idle') return;
e.preventDefault();
gameState = 'shooting';
hint.style.display = 'none';
shotsTaken++;
updateScoreboard();
const rect = container.getBoundingClientRect();
const clientX = e.clientX || e.touches[0].clientX;
const clientY = e.clientY || e.touches[0].clientY;
const targetX = clientX - rect.left;
const targetY = clientY - rect.top;
// 1. TOPUN HAREKETİ
ball.style.transition = `top ${ANIMATION_DURATION}ms cubic-bezier(0.2, 0.8, 0.4, 1), left ${ANIMATION_DURATION}ms linear, transform ${ANIMATION_DURATION}ms linear`;
ball.style.top = `${targetY}px`;
ball.style.left = `${targetX}px`;
ball.style.transform = `translate(-50%, -50%) scale(0.4) rotate(720deg)`;
// 2. KALECİNİN YAPAY ZEKASI VE UÇUŞ ANİMASYONU
let errorX = (Math.random() * 90) - 45;
let errorY = (Math.random() * 50) - 25;
let gkX = targetX + errorX;
let gkY = targetY + errorY;
if (gkX < 240) gkX = 240;
if (gkX > 560) gkX = 560;
if (gkY < 60) gkY = 60;
if (gkY > 180) gkY = 180;
let distanceFromCenter = gkX - 400;
let gkRotation = (distanceFromCenter / 160) * 85;
if (gkRotation > 85) gkRotation = 85;
if (gkRotation < -85) gkRotation = -85;
goalkeeper.style.transition = `top ${ANIMATION_DURATION}ms ease-out, left ${ANIMATION_DURATION}ms ease-out, transform ${ANIMATION_DURATION}ms ease-out`;
goalkeeper.style.top = `${gkY}px`;
goalkeeper.style.left = `${gkX}px`;
goalkeeper.style.transform = `translate(-50%, -50%) rotate(${gkRotation}deg) scale(1.1)`;
// 3. SONUCU HESAPLA
setTimeout(() => {
evaluateResult(targetX, targetY, gkX, gkY);
}, ANIMATION_DURATION);
}
function evaluateResult(ballX, ballY, gkX, gkY) {
const goalLeft = 230;
const goalRight = 570;
const goalTop = 50;
const goalBottom = 190;
let distanceX = Math.abs(ballX - gkX);
let distanceY = Math.abs(ballY - gkY);
let distance = Math.sqrt(distanceX * distanceX + distanceY * distanceY);
if (distance < 85) {
showRoundMessage("KURTARILDI!", "#ff4444");
}
else if (ballX > goalLeft && ballX < goalRight && ballY > goalTop && ballY < goalBottom) {
score++;
updateScoreboard();
showRoundMessage("GOL!", "#00C851");
}
else {
showRoundMessage("DIŞARI!", "#ffbb33");
}
}
function showRoundMessage(text, color) {
msgText.innerText = text;
msgText.style.color = color;
message.style.display = 'block';
setTimeout(prepareNextShot, 1500);
}
function prepareNextShot() {
message.style.display = 'none';
if (shotsTaken >= MAX_SHOTS) {
showGameOver();
} else {
resetPositions();
setTimeout(() => {
gameState = 'idle';
hint.style.display = 'block';
}, 100);
}
}
function resetPositions() {
ball.style.transition = 'none';
ball.style.top = `${BALL_START_Y}px`;
ball.style.left = `${BALL_START_X}px`;
ball.style.transform = 'translate(-50%, -50%) scale(1) rotate(0deg)';
goalkeeper.style.transition = 'none';
goalkeeper.style.left = '50%';
goalkeeper.style.top = '130px';
goalkeeper.style.transform = 'translate(-50%, -50%) rotate(0deg) scale(1)';
}
function updateScoreboard() {
scoreboard.innerText = `Gol: ${score} | Şut: ${shotsTaken}/${MAX_SHOTS}`;
}
function showGameOver() {
gameState = 'gameover';
scoreboard.style.display = 'none';
hint.style.display = 'none';
finalStats.innerText = `Attığın Gol: ${score} / ${MAX_SHOTS}`;
// Kalecinin Skoruna Göre Laf Atması
if (score === 0) {
gkSpeech.innerText = "Hahahaha! Daha topa vurmayı bilmiyorsun. Karşında bir duvar vardı duvar! Amatör...";
} else if (score === 1 || score === 2) {
gkSpeech.innerText = "Sadece şanslıydın. Attığın o komik şutlarla beni yenebileceğini mi sandın?";
} else if (score === 3 || score === 4) {
gkSpeech.innerText = "Fena değilsin... Ama 'Gol Yemez Kaleci' unvanımı elimden almak için daha çok fırın ekmek yemen lazım!";
} else if (score === 5) {
gkSpeech.innerText = "Kıl payı yırttım! Gerçekten çok iyisin ama 6'da 6 yapmana izin veremezdim!";
} else if (score === 6) {
gkSpeech.innerText = "İmkansız... Sen bir efsanesin! 6'da 6 yaptın. Önünde saygıyla eğiliyorum şampiyon...";
}
gameoverScreen.style.display = 'flex';
}
</script>
</body>
</html>
Selamlar yapay zeka ile yaptık bu kaleci gol yemiyor deneyin bakalım geliştirmek size kalmış iyi forumlar
video: https://streamable.com/wkdryh
