anksiyetisi olan biriyim bu yüzden oyunu biraz daha zorlaştırdım ve anksiyete iyi gelecek seviyeye getirdim isteyen varsa alabilir
))
<!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 - V3 MODERN SÜRÜM</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
text-align: center;
background-color: #0f172a;
color: white;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
}
#game-wrapper {
position: relative;
width: 100%;
max-width: 600px;
height: 450px;
background: linear-gradient(-45deg, #1e3c72, #2a5298, #11998e, #38ef7d);
background-size: 400% 400%;
animation: gradientBG 10s ease infinite;
border: 4px solid #1e293b;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 20px 50px rgba(0,0,0,0.8), inset 0 0 20px rgba(255,255,255,0.1);
}
@keyframes gradientBG {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.shake {
animation: shake-anim 0.2s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes shake-anim {
10%, 90% { transform: translate3d(-2px, 0, 0); }
20%, 80% { transform: translate3d(4px, 0, 0); }
30%, 50%, 70% { transform: translate3d(-6px, 0, 0); }
40%, 60% { transform: translate3d(6px, 0, 0); }
}
#menu-screen {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(15, 23, 42, 0.95);
backdrop-filter: blur(5px);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 50;
}
#menu-screen h1 {
color: #fbbf24;
text-shadow: 0 4px 10px rgba(251, 191, 36, 0.4);
margin-bottom: 10px;
font-size: 32px;
letter-spacing: 1px;
}
#menu-screen p {
color: #cbd5e1;
margin-bottom: 30px;
font-size: 16px;
}
.btn {
padding: 15px 40px;
font-size: 22px;
font-weight: 800;
cursor: pointer;
border: none;
border-radius: 12px;
background: linear-gradient(135deg, #ef4444, #b91c1c);
color: white;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 5px 20px rgba(239, 68, 68, 0.5);
text-transform: uppercase;
}
.btn:hover {
transform: translateY(-3px) scale(1.05);
box-shadow: 0 8px 25px rgba(239, 68, 68, 0.7);
}
.btn:active {
transform: translateY(2px) scale(0.95);
}
#game-screen {
display: none;
width: 100%;
height: 100%;
position: relative;
cursor: crosshair;
user-select: none;
}
#score-board {
position: absolute;
top: 20px;
left: 20px;
font-size: 22px;
font-weight: 900;
color: #fff;
background: rgba(15, 23, 42, 0.7);
padding: 8px 20px;
border-radius: 12px;
border: 1px solid rgba(255,255,255,0.2);
backdrop-filter: blur(4px);
z-index: 20;
box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}
#click-hint {
position: absolute;
top: 80px;
width: 100%;
color: #fca5a5;
font-weight: bold;
font-size: 18px;
text-shadow: 0 2px 4px rgba(0,0,0,0.5);
z-index: 20;
pointer-events: none;
animation: pulse 1s infinite alternate;
}
@keyframes pulse {
from { transform: scale(1); opacity: 0.6; }
to { transform: scale(1.05); opacity: 1; }
}
#ground {
position: absolute;
bottom: 0;
width: 100%;
height: 50px;
background: #1e293b;
border-top: 4px solid #334155;
box-shadow: 0 -10px 20px rgba(0,0,0,0.3);
}
#hirt {
position: absolute;
bottom: 45px;
left: 200px;
width: 160px;
transform-origin: bottom center;
z-index: 5;
transition: filter 0.1s;
}
.hit-anim {
animation: flinch 0.3s ease-out;
}
@keyframes flinch {
0% { transform: rotate(0deg) scale(1); filter: brightness(1); }
20% { transform: rotate(-15deg) scale(0.95); filter: brightness(1.5) sepia(1) hue-rotate(-50deg) saturate(5); }
40% { transform: rotate(10deg) scale(1.05); }
60% { transform: rotate(-5deg) scale(1); }
100% { transform: rotate(0deg) scale(1); filter: brightness(1); }
}
.dodge-anim {
opacity: 0.5;
filter: grayscale(1) blur(2px);
transition: all 0.2s !important;
}
#hand {
position: absolute;
top: 100px;
right: -300px;
width: 250px;
z-index: 10;
pointer-events: none;
filter: drop-shadow(-5px 10px 10px rgba(0,0,0,0.5));
}
.slapping {
animation: slapAction 0.15s ease-in-out forwards;
}
@keyframes slapAction {
0% { right: -300px; transform: rotate(0deg); }
50% { right: 120px; transform: rotate(-25deg); }
100% { right: -300px; transform: rotate(0deg); }
}
.popup-text {
position: absolute;
font-size: 28px;
font-weight: 900;
text-shadow: 2px 2px 0px #000, -1px -1px 0px #000, 1px -1px 0px #000, -1px 1px 0px #000;
pointer-events: none;
z-index: 40;
animation: floatUp 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
.popup-dodge {
color: #fbbf24;
font-size: 32px;
font-style: italic;
}
.popup-hit {
color: #ef4444;
}
@keyframes floatUp {
0% { transform: translateY(0) scale(0.5); opacity: 1; }
50% { transform: translateY(-30px) scale(1.2); opacity: 1; }
100% { transform: translateY(-60px) scale(1); opacity: 0; }
}
#btn-exit {
position: absolute;
top: 20px;
right: 20px;
font-size: 14px;
padding: 8px 15px;
background-color: #334155;
border-radius: 8px;
border: 1px solid rgba(255,255,255,0.1);
z-index: 30;
}
#btn-exit:hover {
background-color: #475569;
}
</style>
</head>
<body>
<div id="game-wrapper">
<div id="menu-screen">
<h1><img draggable="false" class="emoji" alt="👋" src="//cdn.r10.net/emojis/html/1f44b.png"> HIRT TOKATLA V3</h1>
<p>Hırt artık hareket ediyor ve kaçabiliyor. Yakala ve yapıştır!</p>
<p style="font-size: 13px; color: #94a3b8; font-style: italic;">(Tokat attıkça hızı artar, reflekslerini hazırla)</p>
<button class="btn" onclick="oyunuBaslat()">BAŞLAT</button>
</div>
<div id="game-screen" onmousedown="tokatYapistir(event)">
<div id="score-board">Tokat: 0</div>
<div id="click-hint">HAREKET EDİYOR, YAKALA!</div>
<div id="ground"></div>
<img id="hirt" src="https://i.8upload.com/image/0cbf61b39e00f5b7/h-rt.png" alt="Hırt Karakteri" draggable="false">
<img id="hand" src="https://i.8upload.com/image/18e648ca15545bbe/clipart3360722.png" alt="Tokat Atan El" draggable="false">
<button class="btn" id="btn-exit" onclick="menuyeDon(event)">Menüye Dön</button>
</div>
</div>
<script>
const sesKonusma = new Audio("https://www.myinstants.com/media/sounds/sifir-bir.mp3");
const sesTokatOrijinal = new Audio("https://www.myinstants.com/media/sounds/slap-soundmaster13-49669815_4L20wGP.mp3");
const sesCombo1 = new Audio("https://www.myinstants.com/media/sounds/aslan-dayim-be.mp3");
const sesCombo2 = new Audio("https://www.myinstants.com/media/sounds/kes-lan-mukoqws.mp3");
const sesKacma = new Audio("https://www.myinstants.com/media/sounds/swoosh-sound-effect-for-youtube-videos-hd_1.mp3");
let tokatSayisi = 0;
let ilkTokatAtildi = false;
let hirtPos = 200;
let hirtYonu = 1;
let hirtHizi = 2.5;
let dodgeIhtimali = 0.20;
let oyunDevamEdiyor = false;
let animasyonID;
let kaciyorMu = false;
function oyunuBaslat() {
document.getElementById('menu-screen').style.display = 'none';
document.getElementById('game-screen').style.display = 'block';
document.getElementById('click-hint').style.display = 'block';
tokatSayisi = 0;
ilkTokatAtildi = false;
hirtHizi = 2.5;
hirtPos = 200;
kaciyorMu = false;
document.getElementById('score-board').innerText = "Tokat: 0";
document.getElementById('hirt').style.left = hirtPos + 'px';
sesKonusma.currentTime = 0;
sesKonusma.play();
oyunDevamEdiyor = true;
hareketDöngüsü();
}
function hareketDöngüsü() {
if (!oyunDevamEdiyor) return;
if (!kaciyorMu) {
hirtPos += hirtHizi * hirtYonu;
if (hirtPos > 420) {
hirtYonu = -1;
hirtPos = 420;
} else if (hirtPos < 10) {
hirtYonu = 1;
hirtPos = 10;
}
document.getElementById('hirt').style.left = hirtPos + 'px';
}
animasyonID = requestAnimationFrame(hareketDöngüsü);
}
function tokatYapistir(event) {
if (!oyunDevamEdiyor) return;
if (!ilkTokatAtildi) {
ilkTokatAtildi = true;
document.getElementById('click-hint').style.display = 'none';
sesKonusma.pause();
sesKonusma.currentTime = 0;
}
const hand = document.getElementById('hand');
hand.classList.remove('slapping');
void hand.offsetWidth;
hand.classList.add('slapping');
if (Math.random() < dodgeIhtimali) {
kaciyorMu = true;
let kacmaSesi = sesKacma.cloneNode();
kacmaSesi.volume = 0.5;
kacmaSesi.play();
const hirt = document.getElementById('hirt');
hirt.classList.add('dodge-anim');
hirtPos = hirtPos > 210 ? Math.random() * 100 + 10 : Math.random() * 100 + 300;
hirt.style.left = hirtPos + 'px';
yaziOlustur(event.clientX, event.clientY, ["KAÇTI!", "ISKALADIN!", "HOP!", "YAVAŞ!"], "popup-dodge");
setTimeout(() => {
hirt.classList.remove('dodge-anim');
kaciyorMu = false;
}, 300);
return;
}
tokatSayisi++;
document.getElementById('score-board').innerText = "Tokat: " + tokatSayisi;
if (hirtHizi < 12) {
hirtHizi += 0.15;
}
let tokatSesi = sesTokatOrijinal.cloneNode();
tokatSesi.volume = 0.8;
tokatSesi.play();
if (tokatSayisi > 0 && tokatSayisi % 10 === 0) {
sesCombo1.cloneNode().play();
} else if (tokatSayisi > 0 && tokatSayisi % 15 === 0) {
sesCombo2.cloneNode().play();
}
setTimeout(() => {
const wrapper = document.getElementById('game-wrapper');
wrapper.classList.remove('shake');
void wrapper.offsetWidth;
wrapper.classList.add('shake');
const hirt = document.getElementById('hirt');
hirt.classList.remove('hit-anim');
void hirt.offsetWidth;
hirt.classList.add('hit-anim');
yaziOlustur(event.clientX, event.clientY, ["ÇAT!", "ŞRAK!", "YAPIŞTIR!", "BAM!", "MÜKEMMEL!", "GÜM!"], "popup-hit");
}, 80);
}
function yaziOlustur(x, y, kelimeListesi, cssSinifi) {
const secilenKelime = kelimeListesi[Math.floor(Math.random() * kelimeListesi.length)];
const wrapperRect = document.getElementById('game-wrapper').getBoundingClientRect();
const popup = document.createElement('div');
popup.className = `popup-text ${cssSinifi}`;
popup.innerText = secilenKelime;
let posX = x - wrapperRect.left - 50;
let posY = y - wrapperRect.top - 20;
popup.style.left = posX + 'px';
popup.style.top = posY + 'px';
document.getElementById('game-screen').appendChild(popup);
setTimeout(() => { popup.remove(); }, 600);
}
function menuyeDon(event) {
event.stopPropagation();
oyunDevamEdiyor = false;
cancelAnimationFrame(animasyonID);
sesKonusma.pause();
sesTokatOrijinal.pause();
sesCombo1.pause();
sesCombo2.pause();
document.getElementById('game-screen').style.display = 'none';
document.getElementById('menu-screen').style.display = 'flex';
document.getElementById('hirt').classList.remove('hit-anim', 'dodge-anim');
document.getElementById('hand').classList.remove('slapping');
document.getElementById('game-wrapper').classList.remove('shake');
document.querySelectorAll('.popup-text').forEach(e => e.remove());
}
</script>
</body>
</html>