Adam Asmaca Oyunu Ücretsiz

29-04-2026, 15:09:46

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Adam Asmaca - Dinamik</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f0f2f5;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            color: #333;
        }
        .game-container {
            background: white;
            padding: 30px;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            text-align: center;
            max-width: 600px;
            width: 100%;
            box-sizing: border-box;
        }
        h1 {
            margin-top: 0;
            color: #2c3e50;
        }
        .category-container {
            margin-bottom: 20px;
        }
        select {
            padding: 10px;
            font-size: 16px;
            border-radius: 6px;
            border: 1px solid #ccc;
            width: 80%;
            max-width: 300px;
            cursor: pointer;
            outline: none;
        }
        canvas {
            background-color: #fafafa;
            border-radius: 8px;
            border: 1px solid #eee;
            margin: 0 auto;
            display: block;
        }
        .word-display {
            font-size: 36px;
            letter-spacing: 12px;
            margin: 20px 0;
            font-weight: bold;
            min-height: 50px;
            word-break: break-all;
        }
        .keyboard {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 8px;
            margin-top: 20px;
        }
        .key {
            padding: 12px 16px;
            font-size: 18px;
            font-weight: bold;
            border: none;
            border-radius: 6px;
            background-color: #e0e0e0;
            cursor: pointer;
            transition: all 0.2s;
            user-select: none;
        }
        .key:hover:not(:disabled) {
            background-color: #c0c0c0;
        }
        .key:disabled {
            cursor: not-allowed;
            opacity: 0.9;
        }
        .key.correct {
            background-color: #4caf50;
            color: white;
        }
        .key.wrong {
            background-color: #f44336;
            color: white;
        }
        #message {
            font-size: 22px;
            font-weight: bold;
            margin-top: 20px;
            min-height: 30px;
        }
        .next-btn {
            margin-top: 20px;
            padding: 12px 30px;
            font-size: 18px;
            font-weight: bold;
            background-color: #2196f3;
            color: white;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            display: none;
            transition: background-color 0.2s;
            margin-left: auto;
            margin-right: auto;
        }
        .next-btn:hover {
            background-color: #1976d2;
        }
    </style>
</head>
<body>

    <div class="game-container">
        <h1>Adam Asmaca</h1>
        
        <div class="category-container">
            <select id="categorySelect" onchange="startNewGame()">
                </select>
        </div>

        <canvas id="hangmanCanvas" width="200" height="250"></canvas>
        
        <div class="word-display" id="wordDisplay"></div>
        
        <div class="keyboard" id="keyboard"></div>
        
        <div id="message"></div>
        <button class="next-btn" id="nextBtn" onclick="startNewGame()">Sonraki Kelime</button>
    </div>

    <script>
        const categories = {
            "Karışık Kelimeler": ["BİLGİSAYAR", "TELEFON", "KLAVYE", "YAZILIM", "TARAYICI", "GELİŞTİRİCİ", "SUNUCU", "VERİTABANI"],
            "Şehir ve İlçe İsimleri": ["İSTANBUL", "ANKARA", "İZMİR", "KADIKÖY", "ÇANKAYA", "ANTALYA", "BODRUM", "TRABZON"],
            "Tıp Terimleri": ["AMELİYAT", "STETOSKOP", "REÇETE", "ANESTEZİ", "ENJEKSİYON", "ANTİBİYOTİK", "TANSİYON", "SENDROM"],
            "Tarih Terimleri": ["İMPARATORLUK", "SADRAZAM", "ANTLAŞMA", "RÖNESANS", "İNKILAP", "CUMHURİYET", "PADİŞAH", "MÜTAREKE"],
            "Ülke İsimleri": ["TÜRKİYE", "JAPONYA", "BREZİLYA", "İTALYA", "KANADA", "İSPANYA", "NORVEÇ", "AVUSTRALYA"],
            "İnsan İsimleri": ["ÖZGÜR", "MURAT", "AHMET", "MEHMET", "AYŞE", "FATMA", "MUSTAFA", "ZEYNEP", "KEMAL"],
            "Hayvan İsimleri": ["ASLAN", "KAPLAN", "FİL", "ZÜRAFA", "KARTAL", "YUNUS", "PENGUEN", "KANGURU"]
        };

        const turkishAlphabet = "ABCÇDEFGĞHIİJKLMNOÖPRSŞTUÜVYZ".split("");
        
        let chosenWord = "";
        let guessedLetters = [];
        let mistakes = 0;
        const maxMistakes = 6;

        function init() {
            const select = document.getElementById("categorySelect");
            for (let category in categories) {
                let option = document.createElement("option");
                option.value = category;
                option.textContent = category;
                select.appendChild(option);
            }
            startNewGame();
        }

        function startNewGame() {
            const category = document.getElementById("categorySelect").value;
            const wordList = categories[category];
            chosenWord = wordList[Math.floor(Math.random() * wordList.length)];
            
            guessedLetters = [];
            mistakes = 0;
            
            document.getElementById("message").textContent = "";
            document.getElementById("message").style.color = "#333";
            document.getElementById("nextBtn").style.display = "none";
            
            drawHangman(0);
            createKeyboard();
            updateWordDisplay();
        }

        function createKeyboard() {
            const keyboardDiv = document.getElementById("keyboard");
            keyboardDiv.innerHTML = "";
            
            turkishAlphabet.forEach(letter => {
                const btn = document.createElement("button");
                btn.textContent = letter;
                btn.className = "key";
                btn.onclick = () => handleGuess(letter, btn);
                keyboardDiv.appendChild(btn);
            });
        }

        function handleGuess(letter, btn) {
            btn.disabled = true;
            guessedLetters.push(letter);

            if (chosenWord.includes(letter)) {
                btn.classList.add("correct");
                updateWordDisplay();
                checkWin();
            } else {
                btn.classList.add("wrong");
                mistakes++;
                drawHangman(mistakes);
                checkLoss();
            }
        }

        function updateWordDisplay() {
            const display = document.getElementById("wordDisplay");
            let displayText = "";
            
            for (let letter of chosenWord) {
                if (guessedLetters.includes(letter)) {
                    displayText += letter;
                } else {
                    displayText += "_";
                }
            }
            display.textContent = displayText;
        }

        function checkWin() {
            let hasWon = true;
            for (let letter of chosenWord) {
                if (!guessedLetters.includes(letter)) {
                    hasWon = false;
                    break;
                }
            }
            
            if (hasWon) {
                endGame(true);
            }
        }

        function checkLoss() {
            if (mistakes >= maxMistakes) {
                endGame(false);
            }
        }

        function endGame(isWin) {
            const messageDiv = document.getElementById("message");
            if (isWin) {
                messageDiv.textContent = "Tebrikler, Kazandınız! 🎉";
                messageDiv.style.color = "#4caf50";
            } else {
                messageDiv.textContent = `Oyun Bitti! Kelime: ${chosenWord}`;
                messageDiv.style.color = "#f44336";
                document.getElementById("wordDisplay").textContent = chosenWord;
            }

            // Klavyeyi devre dışı bırak
            const keys = document.querySelectorAll(".key");
            keys.forEach(key => key.disabled = true);

            // Sonraki kelime butonunu göster
            document.getElementById("nextBtn").style.display = "block";
        }

        function drawHangman(step) {
            const canvas = document.getElementById("hangmanCanvas");
            const ctx = canvas.getContext("2d");
            ctx.lineWidth = 4;
            ctx.strokeStyle = "#333";

            // Tuvali temizle (başlangıçta hiçbir şey çizilmez)
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            // Adım adım inşa et (boş çerçeve bile başlangıçta görünmez)
            if (step >= 1) { // Hata 1: Taban ve Direk
                ctx.beginPath(); ctx.moveTo(20, 230); ctx.lineTo(180, 230); ctx.stroke(); // Taban
                ctx.beginPath(); ctx.moveTo(50, 230); ctx.lineTo(50, 20); ctx.stroke();   // Direk
            }
            if (step >= 2) { // Hata 2: Üst Direk ve İp
                ctx.beginPath(); ctx.moveTo(50, 20); ctx.lineTo(120, 20); ctx.stroke();   // Üst direk
                ctx.beginPath(); ctx.moveTo(120, 20); ctx.lineTo(120, 50); ctx.stroke();  // İp
            }
            if (step >= 3) { // Hata 3: Kafa
                ctx.beginPath(); ctx.arc(120, 70, 20, 0, Math.PI * 2); ctx.stroke();
            }
            if (step >= 4) { // Hata 4: Gövde
                ctx.beginPath(); ctx.moveTo(120, 90); ctx.lineTo(120, 150); ctx.stroke();
            }
            if (step >= 5) { // Hata 5: Kollar
                ctx.beginPath(); ctx.moveTo(120, 100); ctx.lineTo(90, 130); ctx.stroke(); // Sol Kol
                ctx.beginPath(); ctx.moveTo(120, 100); ctx.lineTo(150, 130); ctx.stroke(); // Sağ Kol
            }
            if (step >= 6) { // Hata 6: Bacaklar
                ctx.beginPath(); ctx.moveTo(120, 150); ctx.lineTo(90, 190); ctx.stroke(); // Sol Bacak
                ctx.beginPath(); ctx.moveTo(120, 150); ctx.lineTo(150, 190); ctx.stroke(); // Sağ Bacak
            }
        }

        // Oyunu başlat
        window.onload = init;
    </script>
</body>
</html>

Selamlar geliştirmek size kalmış kodları verdim yapay zeka ile yapıldı adam asmaca oyunu iyi forumlar

29-04-2026, 15:12:52

#2

FiKRAL

TASARIM AJANSI

Çay fırlatma oyunu gibi bir oyun yapabilir misiniz?
Ama otobüsün tepesindeki kişiyi, çay atılan ve dönüştükleri şeyi, ne atıldığını vb istediğim PNG görsel ile değiştirebileceğim formatta
29-04-2026, 15:14:37

#3

obisa

FiKRAL adlı üyeden alıntı: mesajı görüntüle

Çay fırlatma oyunu gibi bir oyun yapabilir misiniz?
Ama otobüsün tepesindeki kişiyi, çay atılan ve dönüştükleri şeyi, ne atıldığını vb istediğim PNG görsel ile değiştirebileceğim formatta

tam detay örnek görsel vs var mı
29-04-2026, 15:17:17

#4

FiKRAL

TASARIM AJANSI

obisa adlı üyeden alıntı: mesajı görüntüle

tam detay örnek görsel vs var mı

Hocam siyasi bir kişilikle ilgili yapılmış bir oyundu.
Ben asla siyasetle ilgilenmiyorum, niyetim o değil ama yine de örnek veremem içeri atarlar
29-04-2026, 15:20:32

#5

lightningx001

FiKRAL adlı üyeden alıntı: mesajı görüntüle

Çay fırlatma oyunu gibi bir oyun yapabilir misiniz?
Ama otobüsün tepesindeki kişiyi, çay atılan ve dönüştükleri şeyi, ne atıldığını vb istediğim PNG görsel ile değiştirebileceğim formatta

değiştireceğiniz görsel koyun mu olacak tam olarak
29-04-2026, 15:20:37

#6

Saitama

Kişisel Rütbe

@Gelistirici;

29-04-2026, 15:21:00

obisa

FiKRAL adlı üyeden alıntı: mesajı görüntüle

Hocam siyasi bir kişilikle ilgili yapılmış bir oyundu.
Ben asla siyasetle ilgilenmiyorum, niyetim o değil ama yine de örnek veremem içeri atarlar

buyur

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Keyif Çayı Fırlatma Oyunu</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #87CEEB; /* Gökyüzü rengi */
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            text-align: center;
            overflow: hidden;
        }
        #game-container {
            position: relative;
            display: inline-block;
            margin-top: 20px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
        }
        canvas {
            background-color: #f0f0f0;
            display: block;
        }
        #ui {
            position: absolute;
            top: 15px;
            left: 20px;
            font-size: 28px;
            font-weight: bold;
            color: #fff;
            text-shadow: 2px 2px 4px #000;
            pointer-events: none;
        }
        .instructions {
            margin-top: 10px;
            color: #333;
            font-weight: bold;
        }
    </style>
</head>
<body>

    <div id="game-container">
        <div id="ui">Skor: <span id="score">0</span></div>
        <canvas id="gameCanvas" width="800" height="600"></canvas>
    </div>
    
    <div class="instructions">
        🎮 Kontroller: Otobüsü hareket ettirmek için <b>Fareyi</b> sağa sola kaydır. Çay fırlatmak için <b>Sol Tıkla</b>.
    </div>

    <script>
        const canvas = document.getElementById("gameCanvas");
        const ctx = canvas.getContext("2d");
        const scoreElement = document.getElementById("score");

        let score = 0;
        let teas = [];
        let citizens = [];
        let particles = [];

        // Otobüs Nesnesi
        const bus = {
            x: canvas.width / 2,
            y: 50,
            width: 160,
            height: 80,
            color: "#eeeeee"
        };

        // Fare Takibi
        canvas.addEventListener("mousemove", (e) => {
            const rect = canvas.getBoundingClientRect();
            let mouseX = e.clientX - rect.left;
            // Otobüsü ekranın içinde tut
            bus.x = Math.max(bus.width/2, Math.min(canvas.width - bus.width/2, mouseX));
        });

        // Tıklama ile Çay Fırlatma
        canvas.addEventListener("mousedown", () => {
            teas.push({
                x: bus.x,
                y: bus.y + bus.height / 2,
                width: 15,
                height: 20,
                speed: 7
            });
        });

        // Vatandaş Üretimi
        function spawnCitizen() {
            if (Math.random() < 0.03) { // Zorluk derecesini buradan ayarlayabilirsin
                const movingRight = Math.random() > 0.5;
                citizens.push({
                    x: movingRight ? -40 : canvas.width + 40,
                    y: canvas.height - 70,
                    width: 30,
                    height: 50,
                    speed: (Math.random() * 2 + 1) * (movingRight ? 1 : -1),
                    color: `hsl(${Math.random() * 360}, 70%, 50%)`, // Rastgele tişört rengi
                    hasTea: false
                });
            }
        }

        // Çarpışma Testi (AABB)
        function checkCollision(rect1, rect2) {
            return (
                rect1.x < rect2.x + rect2.width &&
                rect1.x + rect1.width > rect2.x &&
                rect1.y < rect2.y + rect2.height &&
                rect1.y + rect1.height > rect2.y
            );
        }

        // Oyun Döngüsü
        function update() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            // Arka Plan Çizimi (Yol ve Gökyüzü)
            ctx.fillStyle = "#a9a9a9"; // Asfalt
            ctx.fillRect(0, canvas.height - 100, canvas.width, 100);
            ctx.fillStyle = "#87CEEB"; // Gökyüzü arka planı
            ctx.fillRect(0, 0, canvas.width, canvas.height - 100);

            spawnCitizen();

            // Otobüsü Çiz
            ctx.fillStyle = "#1e90ff"; // Mavi otobüs
            ctx.fillRect(bus.x - bus.width / 2, bus.y - bus.height / 2, bus.width, bus.height);
            // Otobüs camı
            ctx.fillStyle = "#87cefa";
            ctx.fillRect(bus.x - bus.width / 2 + 10, bus.y - bus.height / 2 + 10, bus.width - 20, 30);
            // Otobüs tekerlekleri
            ctx.fillStyle = "#333";
            ctx.beginPath();
            ctx.arc(bus.x - 40, bus.y + bus.height / 2, 15, 0, Math.PI * 2);
            ctx.arc(bus.x + 40, bus.y + bus.height / 2, 15, 0, Math.PI * 2);
            ctx.fill();
            // Camdan bakan adam
            ctx.fillStyle = "#ffcc99";
            ctx.beginPath();
            ctx.arc(bus.x, bus.y - 5, 12, 0, Math.PI * 2);
            ctx.fill();

            // Vatandaşları Güncelle ve Çiz
            for (let i = citizens.length - 1; i >= 0; i--) {
                let c = citizens[i];
                c.x += c.speed;

                // Ekrandan çıkanları sil
                if (c.x < -100 || c.x > canvas.width + 100) {
                    citizens.splice(i, 1);
                    continue;
                }

                // Vatandaşı Çiz
                ctx.fillStyle = c.color;
                ctx.fillRect(c.x, c.y, c.width, c.height); // Gövde
                ctx.fillStyle = "#ffcc99"; // Kafa
                ctx.beginPath();
                ctx.arc(c.x + c.width / 2, c.y - 10, 12, 0, Math.PI * 2);
                ctx.fill();

                if (c.hasTea) {
                    // Çay alan vatandaşa küçük bir ikon çiz
                    ctx.fillStyle = "#8b4513";
                    ctx.fillRect(c.x + 5, c.y + 10, 10, 15);
                }
            }

            // Çayları Güncelle ve Çiz
            for (let i = teas.length - 1; i >= 0; i--) {
                let tea = teas[i];
                tea.y += tea.speed;

                // Yere düşen çayı sil
                if (tea.y > canvas.height) {
                    teas.splice(i, 1);
                    continue;
                }

                // Çayı Çiz (Çay Paketi)
                ctx.fillStyle = "#cd853f"; // Çay rengi
                ctx.fillRect(tea.x, tea.y, tea.width, tea.height);
                ctx.fillStyle = "#fff"; // Çay etiketi
                ctx.fillRect(tea.x + 3, tea.y - 5, 8, 8);
                ctx.strokeStyle = "#fff"; // İp
                ctx.beginPath();
                ctx.moveTo(tea.x + tea.width/2, tea.y);
                ctx.lineTo(tea.x + tea.width/2, tea.y - 5);
                ctx.stroke();

                // Çarpışma Kontrolü (Çay vs Vatandaş)
                for (let j = citizens.length - 1; j >= 0; j--) {
                    let c = citizens[j];
                    if (!c.hasTea && checkCollision(tea, c)) {
                        c.hasTea = true; // Vatandaş çayı kaptı
                        score += 10;
                        scoreElement.innerText = score;
                        teas.splice(i, 1); // Çayı ekrandan sil
                        
                        // Mutluluk efekti (yazı)
                        particles.push({
                            x: c.x,
                            y: c.y - 30,
                            life: 40,
                            text: "Keyif Çayı! ☕"
                        });
                        break;
                    }
                }
            }

            // Efektleri (Yazıları) Güncelle ve Çiz
            for (let i = particles.length - 1; i >= 0; i--) {
                let p = particles[i];
                p.y -= 1; // Yazı yukarı çıksın
                p.life--;
                
                ctx.fillStyle = `rgba(50, 205, 50, ${p.life / 40})`; // Yeşile dönük kaybolan yazı
                ctx.font = "bold 16px sans-serif";
                ctx.fillText(p.text, p.x - 10, p.y);

                if (p.life <= 0) {
                    particles.splice(i, 1);
                }
            }

            requestAnimationFrame(update);
        }

        // Oyunu Başlat
        update();
    </script>
</body>
</html>

29-04-2026, 15:22:09

#8

Saitama

Kişisel Rütbe

FiKRAL adlı üyeden alıntı: mesajı görüntüle

Hocam siyasi bir kişilikle ilgili yapılmış bir oyundu.
Ben asla siyasetle ilgilenmiyorum, niyetim o değil ama yine de örnek veremem içeri atarlar

Onun apksı lazım ya bulamadım 😂

29-04-2026, 15:22:34

FiKRAL

TASARIM AJANSI

obisa adlı üyeden alıntı: mesajı görüntüle

buyur

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Keyif Çayı Fırlatma Oyunu</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #87CEEB; /* Gökyüzü rengi */
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            text-align: center;
            overflow: hidden;
        }
        #game-container {
            position: relative;
            display: inline-block;
            margin-top: 20px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
        }
        canvas {
            background-color: #f0f0f0;
            display: block;
        }
        #ui {
            position: absolute;
            top: 15px;
            left: 20px;
            font-size: 28px;
            font-weight: bold;
            color: #fff;
            text-shadow: 2px 2px 4px #000;
            pointer-events: none;
        }
        .instructions {
            margin-top: 10px;
            color: #333;
            font-weight: bold;
        }
    </style>
</head>
<body>

    <div id="game-container">
        <div id="ui">Skor: <span id="score">0</span></div>
        <canvas id="gameCanvas" width="800" height="600"></canvas>
    </div>
    
    <div class="instructions">
        🎮 Kontroller: Otobüsü hareket ettirmek için <b>Fareyi</b> sağa sola kaydır. Çay fırlatmak için <b>Sol Tıkla</b>.
    </div>

    <script>
        const canvas = document.getElementById("gameCanvas");
        const ctx = canvas.getContext("2d");
        const scoreElement = document.getElementById("score");

        let score = 0;
        let teas = [];
        let citizens = [];
        let particles = [];

        // Otobüs Nesnesi
        const bus = {
            x: canvas.width / 2,
            y: 50,
            width: 160,
            height: 80,
            color: "#eeeeee"
        };

        // Fare Takibi
        canvas.addEventListener("mousemove", (e) => {
            const rect = canvas.getBoundingClientRect();
            let mouseX = e.clientX - rect.left;
            // Otobüsü ekranın içinde tut
            bus.x = Math.max(bus.width/2, Math.min(canvas.width - bus.width/2, mouseX));
        });

        // Tıklama ile Çay Fırlatma
        canvas.addEventListener("mousedown", () => {
            teas.push({
                x: bus.x,
                y: bus.y + bus.height / 2,
                width: 15,
                height: 20,
                speed: 7
            });
        });

        // Vatandaş Üretimi
        function spawnCitizen() {
            if (Math.random() < 0.03) { // Zorluk derecesini buradan ayarlayabilirsin
                const movingRight = Math.random() > 0.5;
                citizens.push({
                    x: movingRight ? -40 : canvas.width + 40,
                    y: canvas.height - 70,
                    width: 30,
                    height: 50,
                    speed: (Math.random() * 2 + 1) * (movingRight ? 1 : -1),
                    color: `hsl(${Math.random() * 360}, 70%, 50%)`, // Rastgele tişört rengi
                    hasTea: false
                });
            }
        }

        // Çarpışma Testi (AABB)
        function checkCollision(rect1, rect2) {
            return (
                rect1.x < rect2.x + rect2.width &&
                rect1.x + rect1.width > rect2.x &&
                rect1.y < rect2.y + rect2.height &&
                rect1.y + rect1.height > rect2.y
            );
        }

        // Oyun Döngüsü
        function update() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            // Arka Plan Çizimi (Yol ve Gökyüzü)
            ctx.fillStyle = "#a9a9a9"; // Asfalt
            ctx.fillRect(0, canvas.height - 100, canvas.width, 100);
            ctx.fillStyle = "#87CEEB"; // Gökyüzü arka planı
            ctx.fillRect(0, 0, canvas.width, canvas.height - 100);

            spawnCitizen();

            // Otobüsü Çiz
            ctx.fillStyle = "#1e90ff"; // Mavi otobüs
            ctx.fillRect(bus.x - bus.width / 2, bus.y - bus.height / 2, bus.width, bus.height);
            // Otobüs camı
            ctx.fillStyle = "#87cefa";
            ctx.fillRect(bus.x - bus.width / 2 + 10, bus.y - bus.height / 2 + 10, bus.width - 20, 30);
            // Otobüs tekerlekleri
            ctx.fillStyle = "#333";
            ctx.beginPath();
            ctx.arc(bus.x - 40, bus.y + bus.height / 2, 15, 0, Math.PI * 2);
            ctx.arc(bus.x + 40, bus.y + bus.height / 2, 15, 0, Math.PI * 2);
            ctx.fill();
            // Camdan bakan adam
            ctx.fillStyle = "#ffcc99";
            ctx.beginPath();
            ctx.arc(bus.x, bus.y - 5, 12, 0, Math.PI * 2);
            ctx.fill();

            // Vatandaşları Güncelle ve Çiz
            for (let i = citizens.length - 1; i >= 0; i--) {
                let c = citizens[i];
                c.x += c.speed;

                // Ekrandan çıkanları sil
                if (c.x < -100 || c.x > canvas.width + 100) {
                    citizens.splice(i, 1);
                    continue;
                }

                // Vatandaşı Çiz
                ctx.fillStyle = c.color;
                ctx.fillRect(c.x, c.y, c.width, c.height); // Gövde
                ctx.fillStyle = "#ffcc99"; // Kafa
                ctx.beginPath();
                ctx.arc(c.x + c.width / 2, c.y - 10, 12, 0, Math.PI * 2);
                ctx.fill();

                if (c.hasTea) {
                    // Çay alan vatandaşa küçük bir ikon çiz
                    ctx.fillStyle = "#8b4513";
                    ctx.fillRect(c.x + 5, c.y + 10, 10, 15);
                }
            }

            // Çayları Güncelle ve Çiz
            for (let i = teas.length - 1; i >= 0; i--) {
                let tea = teas[i];
                tea.y += tea.speed;

                // Yere düşen çayı sil
                if (tea.y > canvas.height) {
                    teas.splice(i, 1);
                    continue;
                }

                // Çayı Çiz (Çay Paketi)
                ctx.fillStyle = "#cd853f"; // Çay rengi
                ctx.fillRect(tea.x, tea.y, tea.width, tea.height);
                ctx.fillStyle = "#fff"; // Çay etiketi
                ctx.fillRect(tea.x + 3, tea.y - 5, 8, 8);
                ctx.strokeStyle = "#fff"; // İp
                ctx.beginPath();
                ctx.moveTo(tea.x + tea.width/2, tea.y);
                ctx.lineTo(tea.x + tea.width/2, tea.y - 5);
                ctx.stroke();

                // Çarpışma Kontrolü (Çay vs Vatandaş)
                for (let j = citizens.length - 1; j >= 0; j--) {
                    let c = citizens[j];
                    if (!c.hasTea && checkCollision(tea, c)) {
                        c.hasTea = true; // Vatandaş çayı kaptı
                        score += 10;
                        scoreElement.innerText = score;
                        teas.splice(i, 1); // Çayı ekrandan sil
                        
                        // Mutluluk efekti (yazı)
                        particles.push({
                            x: c.x,
                            y: c.y - 30,
                            life: 40,
                            text: "Keyif Çayı! ☕"
                        });
                        break;
                    }
                }
            }

            // Efektleri (Yazıları) Güncelle ve Çiz
            for (let i = particles.length - 1; i >= 0; i--) {
                let p = particles[i];
                p.y -= 1; // Yazı yukarı çıksın
                p.life--;
                
                ctx.fillStyle = `rgba(50, 205, 50, ${p.life / 40})`; // Yeşile dönük kaybolan yazı
                ctx.font = "bold 16px sans-serif";
                ctx.fillText(p.text, p.x - 10, p.y);

                if (p.life <= 0) {
                    particles.splice(i, 1);
                }
            }

            requestAnimationFrame(update);
        }

        // Oyunu Başlat
        update();
    </script>
</body>
</html>

Teşekkür ederim, elinize sağlık fakat benim bahsettiğim çok başka.
Göstermek için YouTube'den videosunu bulayım dedim, bütün videoları silmişler.

Yazarak tarif edersem beni de silerler.