<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rokito İle Anneler Günü Özel</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #fce4ec;
text-align: center;
margin: 0;
overflow: hidden;
}
h1 {
color: #d81b60;
margin-top: 20px;
text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}
#gameArea {
width: 800px;
height: 600px;
border: 8px solid #f48fb1;
border-radius: 15px;
margin: 20px auto;
position: relative;
background-image: url('https://st3.depositphotos.com/1000647/14605/i/1600/depositphotos_146051515-stock-photo-beautiful-living-room.jpg');
background-size: cover;
background-position: center;
overflow: hidden;
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}
/* --- YENİ: Tam Ekran Arayüz (Menü ve Bitiş) --- */
.screen-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(252, 228, 236, 0.95); /* Yarı saydam pembe arka plan */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 20; /* Her şeyin üstünde görünsün */
}
.screen-overlay h2 {
font-size: 42px;
color: #d81b60;
margin-bottom: 10px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}
.screen-overlay p {
font-size: 22px;
color: #ad1457;
font-weight: bold;
margin-bottom: 30px;
padding: 0 20px;
}
.screen-overlay button {
font-size: 24px;
padding: 15px 40px;
border-radius: 50px;
box-shadow: 0 5px 15px rgba(255, 64, 129, 0.4);
}
/* ----------------------------------------------- */
#terlik {
position: absolute;
left: 50px;
bottom: 50px;
width: 60px;
cursor: grab;
transform-origin: center center;
z-index: 3;
}
#terlik.grabbing {
cursor: grabbing;
}
#anne {
position: absolute;
right: 50px;
top: 150px;
width: 150px;
z-index: 2;
transition: transform 0.1s ease;
}
@keyframes shake {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}
.hit-reaction {
animation: shake 0.5s;
animation-iteration-count: 1;
}
.heart-particle {
position: absolute;
font-size: 24px;
color: #ff4081;
pointer-events: none;
z-index: 4;
animation: heartFly 1s ease-out forwards;
opacity: 0;
}
@keyframes heartFly {
0% { transform: translateY(0) scale(1); opacity: 1; }
100% { transform: translateY(-100px) scale(1.5); opacity: 0; }
}
#powerBarContainer {
position: absolute;
bottom: 20px;
left: 20px;
width: 200px;
height: 15px;
background-color: rgba(238, 238, 238, 0.8);
border: 2px solid #f48fb1;
border-radius: 10px;
display: none;
z-index: 5;
}
#powerBar {
height: 100%;
background-color: #ff4081;
width: 0%;
border-radius: 8px;
}
#infoPanel {
position: absolute;
top: 10px;
left: 10px;
background-color: rgba(255, 255, 255, 0.85);
padding: 10px 15px;
border-radius: 10px;
border: 2px solid #f48fb1;
font-weight: bold;
color: #ad1457;
z-index: 5;
box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
}
#message {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(255, 255, 255, 0.95);
padding: 20px 30px;
border-radius: 15px;
border: 4px solid #f48fb1;
font-size: 24px;
color: #d81b60;
display: none;
z-index: 10;
box-shadow: 0 0 20px rgba(0,0,0,0.3);
pointer-events: none; /* Mouse tıklamasını engellemesin */
}
button {
background-color: #ff4081;
color: white;
border: none;
cursor: pointer;
transition: background-color 0.3s, transform 0.1s;
font-weight: bold;
}
button:hover {
background-color: #d81b60;
transform: scale(1.05);
}
button:active {
transform: scale(0.95);
}
</style>
</head>
<body>
<h1>Terlik Atma Oyunu! <span style="color: #ff4081;">❤</span></h1>
<div id="gameArea">
<!-- YENİ: Başlangıç Menüsü -->
<div id="startMenu" class="screen-overlay">
<h2>ROKİTO İLE ANNELER GÜNÜ</h2>
<p>Anneni sevindirmek için terliği ona fırlat! <br><br> <b>Nasıl Oynanır:</b> Terliğe tıkla, geriye ve aşağıya doğru çekip hedefi belirle, sonra bırak.</p>
<button onclick="startGame()">Başlat</button>
</div>
<!-- YENİ: Bitiş Ekranı (Başlangıçta Gizli) -->
<div id="endScreen" class="screen-overlay" style="display: none;">
<h2 id="endTitle">Oyun Bitti!</h2>
<p id="endMessage"></p>
<button onclick="startGame()">Tekrar Oyna</button>
</div>
<div id="infoPanel">
Puan: <span id="score">0</span> | Terlik Hakları: <span id="tries">5</span>
</div>
<div id="message"></div>
<img id="terlik" src="https://i.8upload.com/image/ee0989e22bbed36f/pngwing-com.png" alt="Terlik" draggable="false">
<img id="anne" src="https://cdn.r10.net/editor/88549/2518131417.png" alt="Anne" draggable="false">
<div id="powerBarContainer">
<div id="powerBar"></div>
</div>
</div>
<script>
const gameArea = document.getElementById('gameArea');
const terlik = document.getElementById('terlik');
const anne = document.getElementById('anne');
const scoreSpan = document.getElementById('score');
const triesSpan = document.getElementById('tries');
const powerBarContainer = document.getElementById('powerBarContainer');
const powerBar = document.getElementById('powerBar');
const messageDiv = document.getElementById('message');
// Yeni ekranlar
const startMenu = document.getElementById('startMenu');
const endScreen = document.getElementById('endScreen');
const endTitle = document.getElementById('endTitle');
const endMessage = document.getElementById('endMessage');
let score = 0;
let tries = 5;
let isGrabbing = false;
let isFlying = false;
let gameActive = false; // Oyunun oynanabilir durumda olup olmadığını kontrol eder
let startX, startY;
let pullX = 0, pullY = 0;
let power = 0;
let animationId;
const gravity = 0.6;
// Fare ve Dokunmatik Olayları
terlik.addEventListener('mousedown', startGrab);
window.addEventListener('mousemove', dragTerlik);
window.addEventListener('mouseup', endGrab);
terlik.addEventListener('touchstart', (e) => startGrab(e.touches[0]));
window.addEventListener('touchmove', (e) => dragTerlik(e.touches[0]));
window.addEventListener('touchend', endGrab);
// --- YENİ: Oyunu Başlatma Fonksiyonu ---
function startGame() {
// Ekranları gizle
startMenu.style.display = 'none';
endScreen.style.display = 'none';
messageDiv.style.display = 'none';
// Değerleri sıfırla
score = 0;
tries = 5;
scoreSpan.innerText = score;
triesSpan.innerText = tries;
// Oyunu aktif et
gameActive = true;
resetTerlikPos();
}
function startGrab(e) {
// Menüdeyken veya oyun bitmişken terliği tutmayı engelle
if (!gameActive || tries <= 0 || isFlying) return;
isGrabbing = true;
terlik.classList.add('grabbing');
startX = e.clientX;
startY = e.clientY;
powerBarContainer.style.display = 'block';
power = 0;
powerBar.style.width = '0%';
}
function dragTerlik(e) {
if (!isGrabbing) return;
const mouseX = e.clientX;
const mouseY = e.clientY;
pullX = startX - mouseX;
pullY = mouseY - startY;
if (pullX > 0) {
let angle = Math.atan2(pullY, pullX) * (180 / Math.PI);
terlik.style.transform = `rotate(${-angle}deg)`;
let distance = Math.sqrt(pullX * pullX + pullY * pullY);
power = Math.min(distance / 2.5, 100);
powerBar.style.width = power + '%';
} else {
terlik.style.transform = `rotate(0deg)`;
power = 0;
powerBar.style.width = '0%';
}
}
function endGrab(e) {
if (!isGrabbing) return;
isGrabbing = false;
terlik.classList.remove('grabbing');
powerBarContainer.style.display = 'none';
if (power > 10 && pullX > 0) {
tries--;
triesSpan.innerText = tries;
throwTerlik();
} else {
resetTerlikPos();
}
}
function throwTerlik() {
isFlying = true;
let vx = pullX * 0.12;
let vy = pullY * 0.12;
let currentX = 50;
let currentY = 50;
let rotation = parseFloat(terlik.style.transform.replace('rotate(', '').replace('deg)', '')) || 0;
function animate() {
vy -= gravity;
currentX += vx;
currentY += vy;
rotation += vx * 1.5;
terlik.style.left = currentX + 'px';
terlik.style.bottom = currentY + 'px';
terlik.style.transform = `rotate(${rotation}deg)`;
if (checkCollision()) {
score += 10;
scoreSpan.innerText = score;
triggerHitReaction();
showToastMessage("TAM İSABET! <br> +10 Puan");
cancelAnimationFrame(animationId);
terlik.style.display = 'none';
setTimeout(resetTerlikPos, 1000);
return;
}
if (currentY < -50 || currentX > 850) {
cancelAnimationFrame(animationId);
if (tries > 0) {
showToastMessage("Iskaladın!");
setTimeout(resetTerlikPos, 800);
} else {
setTimeout(endGame, 500);
}
return;
}
animationId = requestAnimationFrame(animate);
}
animate();
}
function triggerHitReaction() {
anne.classList.add('hit-reaction');
setTimeout(() => { anne.classList.remove('hit-reaction'); }, 500);
for (let i = 0; i < 6; i++) { createHeart(); }
}
function createHeart() {
const heart = document.createElement('div');
heart.className = 'heart-particle';
heart.innerText = '❤️';
const anneRect = anne.getBoundingClientRect();
const gameAreaRect = gameArea.getBoundingClientRect();
const startPosX = (anneRect.left - gameAreaRect.left) + (Math.random() * anneRect.width);
const startPosY = (anneRect.top - gameAreaRect.top) + (Math.random() * anneRect.height / 2);
heart.style.left = startPosX + 'px';
heart.style.top = startPosY + 'px';
heart.style.animationDelay = (Math.random() * 0.3) + 's';
gameArea.appendChild(heart);
setTimeout(() => { heart.remove(); }, 1300);
}
function checkCollision() {
const terlikRect = terlik.getBoundingClientRect();
const anneRect = anne.getBoundingClientRect();
return (
terlikRect.left < anneRect.right &&
terlikRect.right > anneRect.left &&
terlikRect.top < anneRect.bottom &&
terlikRect.bottom > anneRect.top
);
}
function resetTerlikPos() {
isFlying = false;
terlik.style.display = 'block';
terlik.style.left = '50px';
terlik.style.bottom = '50px';
terlik.style.transform = 'rotate(0deg)';
// Eğer oyun oynanırken haklar bittiyse ve uçuş tamamlandıysa bitiş ekranını çağır
if (gameActive && tries <= 0) {
endGame();
}
}
// --- YENİ: Hızlı Bildirim Mesajları (Ekranda Buton Çıkmaz) ---
function showToastMessage(text) {
messageDiv.innerHTML = text;
messageDiv.style.display = 'block';
setTimeout(() => {
messageDiv.style.display = 'none';
}, 1000);
}
// --- YENİ: Oyun Bitiş Ekranını Gösterme Fonksiyonu ---
function endGame() {
gameActive = false; // Oyunu durdur
if (score >= 40) {
endTitle.innerText = "EFSANE ATICI!";
endTitle.style.color = "#d81b60";
endMessage.innerHTML = `Toplam ${score} puan topladın! <br> Annen seninle gurur duyuyor! <br><br> <span style="font-size: 50px; color: #ff4081;">❤</span>`;
} else if (score > 0) {
endTitle.innerText = "GÜZEL DENEME!";
endTitle.style.color = "#f57c00";
endMessage.innerHTML = `Toplam ${score} puan topladın. <br> Seneye daha iyisini yaparsın.`;
} else {
endTitle.innerText = "OLAMAZ!";
endTitle.style.color = "#d32f2f";
endMessage.innerHTML = `Hiç puan toplayamadın. <br> Annen seni kovalayabilir! <br> Hızlıca tekrar dene!`;
}
endScreen.style.display = 'flex'; // Bitiş ekranını göster
}
</script>
</body>
</html>
Selamlar yapay zeka ile anneler günü özel oyun yaptık geliştirmek size kalmış iyi forumlar