<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HIRT TOKATLA KEYİFLEN</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
text-align: center;
background-color: #1a252f;
color: white;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
/* Ana Çerçeve */
#game-wrapper {
position: relative;
width: 100%;
max-width: 600px;
height: 450px;
background: linear-gradient(to bottom, #87CEEB 0%, #E0F6FF 100%);
border: 4px solid #34495e;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 15px 30px rgba(0,0,0,0.7);
}
/* --- MENÜ EKRANI --- */
#menu-screen {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(44, 62, 80, 0.95);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 50;
}
#menu-screen h1 {
color: #f1c40f;
text-shadow: 2px 2px 4px #000;
margin-bottom: 10px;
font-size: 32px;
}
#menu-screen p {
color: #bdc3c7;
margin-bottom: 30px;
font-size: 18px;
}
.btn {
padding: 15px 40px;
font-size: 24px;
font-weight: bold;
cursor: pointer;
border: none;
border-radius: 10px;
background-color: #e74c3c;
color: white;
transition: all 0.2s ease;
box-shadow: 0 5px 15px rgba(231, 76, 60, 0.4);
text-transform: uppercase;
}
.btn:hover {
background-color: #c0392b;
transform: scale(1.1);
}
/* --- OYUN EKRANI --- */
#game-screen {
display: none; /* Başlangıçta gizli */
width: 100%;
height: 100%;
position: relative;
cursor: crosshair; /* Hedef alma imleci */
}
/* Ekrana tıkla uyarısı */
#click-hint {
position: absolute;
top: 20px;
width: 100%;
color: #c0392b;
font-weight: bold;
font-size: 20px;
text-shadow: 1px 1px 2px white;
z-index: 20;
pointer-events: none;
animation: pulse 1s infinite alternate;
}
@keyframes pulse {
from { transform: scale(1); opacity: 0.8; }
to { transform: scale(1.05); opacity: 1; }
}
/* Zemin çizgisi */
#ground {
position: absolute;
bottom: 0;
width: 100%;
height: 50px;
background-color: #7f8c8d;
border-top: 5px solid #95a5a6;
}
/* Hırt Karakteri */
#hirt {
position: absolute;
bottom: 45px;
left: 150px;
width: 180px;
transition: transform 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53);
transform-origin: bottom right;
z-index: 5;
}
#hirt.fallen {
transform: rotate(90deg) translate(20px, -20px);
opacity: 0.8;
}
/* Tokat Atan El */
#hand {
position: absolute;
top: 100px;
right: -300px; /* Başlangıçta gizli */
width: 250px;
z-index: 10;
pointer-events: none; /* Ele tıklanmasını engeller */
}
/* Tokat Animasyonu */
.slapping {
animation: slapAction 0.35s ease-in-out;
}
@keyframes slapAction {
0% { right: -300px; transform: rotate(0deg); }
40% { right: 120px; transform: rotate(-15deg); }
100% { right: -300px; transform: rotate(0deg); }
}
/* Tekrar Oyna Butonu */
#btn-restart {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: none;
font-size: 18px;
padding: 10px 20px;
background-color: #2ecc71;
z-index: 30;
}
#btn-restart:hover {
background-color: #27ae60;
}
</style>
</head>
<body>
<div id="game-wrapper">
<!-- MENÜ -->
<div id="menu-screen">
<h1>👋 HIRT TOKATLA KEYİFLEN</h1>
<p>Hırt karakteri atarlanırken gelişine yapıştır!</p>
<button class="btn" onclick="oyunuBaslat()">BAŞLAT</button>
</div>
<!-- OYUN ALANI -->
<div id="game-screen" onclick="tokatYapistir()">
<div id="click-hint">GELİŞİNE YAPIŞTIRMAK İÇİN TIKLA!</div>
<div id="ground"></div>
<img id="hirt" src="https://i.8upload.com/image/0cbf61b39e00f5b7/h-rt.png" alt="Hırt Karakteri">
<img id="hand" src="https://i.8upload.com/image/18e648ca15545bbe/clipart3360722.png" alt="Tokat Atan El">
<button class="btn" id="btn-restart" onclick="menuyeDon(event)">Menüye Dön</button>
</div>
</div>
<script>
// Ses Dosyaları
const sesKonusma = new Audio("https://www.myinstants.com/media/sounds/sifir-bir.mp3");
const sesTokat = new Audio("https://www.myinstants.com/media/sounds/slap-soundmaster13-49669815_4L20wGP.mp3");
const sesYereDusus = new Audio("https://www.myinstants.com/media/sounds/aslan-dayim-be.mp3");
const sesEnSon = new Audio("https://www.myinstants.com/media/sounds/kes-lan-mukoqws.mp3");
let tokatAtildiMi = false;
function oyunuBaslat() {
// Ekranları değiştir
document.getElementById('menu-screen').style.display = 'none';
document.getElementById('game-screen').style.display = 'block';
document.getElementById('click-hint').style.display = 'block';
// Konuşma sesini başlat
sesKonusma.play();
tokatAtildiMi = false;
}
function tokatYapistir() {
// Eğer tokat zaten atıldıysa bir daha atılmasını engelle
if (tokatAtildiMi) return;
tokatAtildiMi = true;
// Yazıyı gizle
document.getElementById('click-hint').style.display = 'none';
// Konuşma sesini anında kes
sesKonusma.pause();
sesKonusma.currentTime = 0;
const hand = document.getElementById('hand');
const hirt = document.getElementById('hirt');
// El animasyonunu başlat
hand.classList.add('slapping');
// Tokatın yüze çarptığı an (yaklaşık 120ms sonra)
setTimeout(() => {
sesTokat.play();
hirt.classList.add('fallen'); // Düşür
}, 120);
// Animasyon sınıfını temizle
setTimeout(() => {
hand.classList.remove('slapping');
}, 400);
// Ses Zinciri (Biri bitince diğeri başlasın)
sesTokat.onended = () => {
sesYereDusus.play();
};
sesYereDusus.onended = () => {
setTimeout(() => { sesEnSon.play(); }, 200);
};
// En son ses bitince menüye dön butonunu göster
sesEnSon.onended = () => {
document.getElementById('btn-restart').style.display = 'block';
};
}
function menuyeDon(event) {
// Butona tıklamanın oyun alanına tıklandı (tokat) olarak algılanmasını engelle
event.stopPropagation();
// Tüm sesleri sustur
[sesKonusma, sesTokat, sesYereDusus, sesEnSon].forEach(ses => {
ses.pause();
ses.currentTime = 0;
});
// Karakteri ve ekranı sıfırla
document.getElementById('hirt').classList.remove('fallen');
document.getElementById('btn-restart').style.display = 'none';
document.getElementById('game-screen').style.display = 'none';
document.getElementById('menu-screen').style.display = 'flex';
}
</script>
</body>
</html>
Selamlar yapay zeka ile yaptık hırt tokatlayın
buda böyle bir oyun oldu kodları verdim geliştirmek size kalmış iyi forumlar
video: https://streamable.com/lwwwf9