Ben bu versiyonu daha çok sevdim ama 

<!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;
}
#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);
}
#menu-screen {
    position: absolute;
    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;
}
.btn:hover {
    background-color: #c0392b;
    transform: scale(1.1);
}
#game-screen {
    display: none;
    width: 100%;
    height: 100%;
    position: relative;
    cursor: crosshair;
}
#click-hint {
    position: absolute;
    top: 20px;
    width: 100%;
    color: #c0392b;
    font-weight: bold;
    font-size: 20px;
}
#ground {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50px;
    background-color: #7f8c8d;
}
#hirt {
    position: absolute;
    bottom: 45px;
    left: 150px;
    width: 180px;
    transition: transform 0.3s;
    transform-origin: bottom right;
}
#hirt.fallen {
    transform: rotate(90deg) translate(20px, -20px);
}
#hand {
    position: absolute;
    top: 100px;
    right: -300px;
    width: 250px;
}
.slapping {
    animation: slapAction 0.35s ease-in-out;
}
@keyframes slapAction {
    0% { right: -300px; }
    40% { right: 120px; }
    100% { right: -300px; }
}
#btn-restart {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: none;
    font-size: 18px;
    padding: 10px 20px;
    background-color: #2ecc71;
}
</style>
</head>
<body>

<div id="game-wrapper">
<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>

<div id="game-screen" onclick="tokatYapistir()">
<div id="click-hint">TIKLA!</div>
<div id="ground"></div>
<img id="hirt" src="https://i.8upload.com/image/0cbf61b39e00f5b7/h-rt.png">
<img id="hand" src="https://i.8upload.com/image/18e648ca15545bbe/clipart3360722.png">
<button class="btn" id="btn-restart" onclick="menuyeDon(event)">Menüye Dön</button>
</div>
</div>

<script>
function oyunuBaslat() {
    document.getElementById('menu-screen').style.display = 'none';
    document.getElementById('game-screen').style.display = 'block';
}

function tokatYapistir() {
    const hand = document.getElementById('hand');
    const hirt = document.getElementById('hirt');

    const sesTokat = new Audio("https://www.myinstants.com/media/sounds/slap-soundmaster13-49669815_4L20wGP.mp3");
    sesTokat.play();

    hand.classList.remove('slapping');
    void hand.offsetWidth;
    hand.classList.add('slapping');

    hirt.classList.remove('fallen');
    void hirt.offsetWidth;
    hirt.classList.add('fallen');

    setTimeout(() => {
        hirt.classList.remove('fallen');
    }, 600);
}

function menuyeDon(event) {
    event.stopPropagation();

    document.getElementById('hirt').classList.remove('fallen');
    document.getElementById('game-screen').style.display = 'none';
    document.getElementById('menu-screen').style.display = 'flex';
}
</script>

</body>
</html>