HTML basit oyun kodu

SizinSesiniz · 20 Eyl 2024

Bu oyunda kullanıcı ekrandaki kırmızı noktaya tıklayarak puan kazanmaya çalışır. Zamanla hız artar ve nokta rastgele konumlarda belirir.

HTML:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Kırmızı Noktaya Tıkla Oyunu</title>

    <style>

        body {

            text-align: center;

            font-family: Arial, sans-serif;

            margin-top: 50px;

        }



        #gameArea {

            position: relative;

            width: 400px;

            height: 400px;

            margin: 0 auto;

            border: 2px solid black;

            background-color: #f0f0f0;

        }



        #target {

            position: absolute;

            width: 30px;

            height: 30px;

            background-color: red;

            border-radius: 50%;

            cursor: pointer;

        }



        #score {

            font-size: 24px;

            margin-top: 20px;

        }

    </style>

</head>

<body>



    <h1>Kırmızı Noktaya Tıkla</h1>

    <div id="gameArea">

        <div id="target"></div>

    </div>

    <div id="score">Puan: 0</div>



    <script>

        let target = document.getElementById('target');

        let scoreDisplay = document.getElementById('score');

        let score = 0;

        let speed = 1000; // Hedefin hareket süresi (milisaniye)



        // Hedefi rastgele bir konuma taşı

        function moveTarget() {

            const gameArea = document.getElementById('gameArea');

            const areaWidth = gameArea.offsetWidth;

            const areaHeight = gameArea.offsetHeight;



            // Rastgele pozisyon hesapla

            const randomX = Math.floor(Math.random() * (areaWidth - target.offsetWidth));

            const randomY = Math.floor(Math.random() * (areaHeight - target.offsetHeight));



            target.style.left = randomX + 'px';

            target.style.top = randomY + 'px';



            // Zamanla hızını artır

            speed *= 0.98; // Hızı %2 artır

            setTimeout(moveTarget, speed);

        }



        // Hedefe tıklama olayı

        target.addEventListener('click', () => {

            score++;

            scoreDisplay.textContent = `Puan: ${score}`;

        });



        // Oyun başlatılır

        moveTarget();

    </script>



</body>

</html>

Oyun Açıklaması:

Oyuncu, ekrandaki kırmızı noktaya tıklayarak puan kazanır.

Nokta rastgele konumlarda belirir ve oyuncu her tıkladığında nokta hızlanır.

Her tıklama 1 puan kazandırır ve puan ekranda gösterilir.

Bu basit oyun, temel HTML, CSS ve JavaScript kullanılarak oluşturulmuştur ve başlangıç seviyesi için uygundur.

YoRuMSuZ · 20 Eyl 2024

Kırmızı Noktaya Tıkla Oyunu

Kırmızı Noktaya Tıkla

Puan: 0

Oyun gayet güzel ve eğlenceli @sizinsesiniz , artık herkes rekorunu yazar ben 9 puan aldım ilk denememde ama bitiş süresi ekleyelim bu oyuna :)

SizinSesiniz · 21 Eyl 2024

Kesinlikle mantıklı olur.

Bende 13 puanda kaldım

SizinSesiniz · 21 Eyl 2024

YoRuMSuZ dediki:
Oyun gayet güzel ve eğlenceli @sizinsesiniz , artık herkes rekorunu yazar ben 9 puan aldım ilk denememde ama bitiş süresi ekleyelim bu o)

1 dakikalık geri sayım ekledim

@YoRuMSuZ

Kod:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kırmızı Noktaya Tıkla Oyunu</title>
    <style>
        body {
            text-align: center;
            font-family: Arial, sans-serif;
            margin-top: 50px;
        }

        #gameArea {
            position: relative;
            width: 400px;
            height: 400px;
            margin: 0 auto;
            border: 2px solid black;
            background-color: #f0f0f0;
        }

        #target {
            position: absolute;
            width: 30px;
            height: 30px;
            background-color: red;
            border-radius: 50%;
            cursor: pointer;
        }

        #score {
            font-size: 24px;
            margin-top: 20px;
        }

        #timer {
            font-size: 24px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <h1>Kırmızı Noktaya Tıkla</h1>
    <div id="gameArea">
        <div id="target"></div>
    </div>
    <div id="score">Puan: 0</div>
    <div id="timer">Süre: 60</div>

    <script>
        let target = document.getElementById('target');
        let scoreDisplay = document.getElementById('score');
        let timerDisplay = document.getElementById('timer');
        let score = 0;
        let speed = 1000; // Hedefin hareket süresi (milisaniye)
        let timeLeft = 60; // Geri sayım süresi (saniye)

        // Hedefi rastgele bir konuma taşı
        function moveTarget() {
            const gameArea = document.getElementById('gameArea');
            const areaWidth = gameArea.offsetWidth;
            const areaHeight = gameArea.offsetHeight;

            // Rastgele pozisyon hesapla
            const randomX = Math.floor(Math.random() * (areaWidth - target.offsetWidth));
            const randomY = Math.floor(Math.random() * (areaHeight - target.offsetHeight));

            target.style.left = randomX + 'px';
            target.style.top = randomY + 'px';

            // Zamanla hızını artır
            speed *= 0.98; // Hızı %2 artır
            setTimeout(moveTarget, speed);
        }

        // Hedefe tıklama olayı
        target.addEventListener('click', () => {
            score++;
            scoreDisplay.textContent = `Puan: ${score}`;
        });

        // Geri sayım işlevi
        function startTimer() {
            const timerInterval = setInterval(() => {
                timeLeft--;
                timerDisplay.textContent = `Süre: ${timeLeft}`;
                
                if (timeLeft <= 0) {
                    clearInterval(timerInterval);
                    endGame();
                }
            }, 1000);
        }

        // Oyunu bitir
        function endGame() {
            target.style.display = 'none'; // Hedefi gizle
            alert(`Oyun bitti! Puanınız: ${score}`); // Puanı göster
        }

        // Oyun başlatılır
        moveTarget();
        startTimer();
    </script>
</body>
</html>

YoRuMSuZ · 21 Eyl 2024

Kodları bağımsız bir sayfada çalıştırmak güzel sonuçlar veriyor, ama forumda kullanılan bazı kodlarla çakıştığından bitiş ekranı kapanmıyor.

HTML basit oyun kodu

SizinSesiniz

Şimdi Susma Vakti

YoRuMSuZ

Biz işimize bakalım...

Kırmızı Noktaya Tıkla

SizinSesiniz

Şimdi Susma Vakti

SizinSesiniz

Şimdi Susma Vakti

YoRuMSuZ

Biz işimize bakalım...

Benzer konular

HTML basit oyun kodu

SizinSesiniz

~~Şimdi Susma Vakti~~

YoRuMSuZ

Biz işimize bakalım...

Kırmızı Noktaya Tıkla

SizinSesiniz

~~Şimdi Susma Vakti~~

SizinSesiniz

~~Şimdi Susma Vakti~~

YoRuMSuZ

Biz işimize bakalım...

Benzer konular

Şimdi Susma Vakti

Şimdi Susma Vakti

Şimdi Susma Vakti