Squid Game’in ikonik “Red Light, Green Light” oyununu hatırlıyor musunuz? Artık kendi tarayıcınızda bu heyecan dolu oyunu deneyimleyebilirsiniz! HTML, CSS ve JavaScript kullanarak geliştirdiğim bu eğlenceli oyun, gerilimi ve stratejiyi bir araya getiriyor.

Oyun Nasıl Çalışıyor?

Oyunda, yeşil ışık yanarken ilerlemeniz ve kırmızı ışık yanınca durmanız gerekiyor. Ancak dikkatli olun: hareket ettiğiniz fark edilirse oyundan elenirsiniz!

Teknik açıdan, oyun animasyonları ve kullanıcı etkileşimlerini yönetmek için JavaScript’in gücünden yararlanıyor. CSS ile etkileyici bir tasarım sunarken, HTML sayfanın iskeletini oluşturuyor. Kodun her aşamasında optimize edilmiş ve anlaşılır yapılar kullandım, böylece hem eğlenceli bir oyun hem de öğrenmek isteyenler için harika bir örnek oldu.

HTML:

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Karakter ve Bitiş Çizgisi</title>
  
</head>
<body>
  <div class="container">
    <div class="finish-line"></div>
    <!-- Sol taraftaki karakterin resmi -->
    <div class="opposite-character shadow-green">
      <img width="80" height="80" src="https://img.icons8.com/color/48/squid-game-square-guard.png" alt="squid-game-square-guard"/>
    </div>
    <div class="character">🚶</div> <!-- Sağdaki yürüyen karakter -->
    <div class="game-over">GAME OVER</div> <!-- GAME OVER yazısı -->
    <div class="win-message">WIN</div> <!-- WIN yazısı -->
    <div class="timer">01:00</div> <!-- Geriye sayım -->
  </div>

 
</body>
</html>

CSS:

body, html {
      margin: 0;
      padding: 0;
      height: 100%;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      background-color: #202020; /* Arka plan rengini koyu yaptım */
      color: white;
      font-family: Arial, sans-serif;

    }

    .container {
      width: 100%;
      height: 100%;
      position: relative;
    }

    /* Sağdaki yürüyen karakter */
    .character {
      position: absolute;
      right: 20px; /* Sağdan biraz mesafe */
      bottom: 20px; /* Ekranın altına yakın */
      font-size: 50px; /* Karakterin boyutunu büyüttüm */
      transition: none; /* Geçişi devre dışı bırakıyoruz, sürekli hareket etmesini sağlamak için */
    }

    /* Sol taraftaki karakter */
    .opposite-character {
      position: absolute;
      left: 40px; /* Sol tarafta biraz sağa kaydırdım */
      bottom: 20px; /* Ekranın altına yakın */
      transition: transform 2s ease, box-shadow 1s ease; /* Arkasını dönmesi ve gölgesinin değişmesi için geçiş ekliyoruz */
      transform: scaleX(-1);
    }

    /* Bitiş çizgisi */
    .finish-line {
      position: absolute;
      left: 300px; /* Çizgiyi sağa kaydırdım */
      top: 0;
      width: 5px;
      height: 100%; /* Sol tarafa kadar tam boy */
      background-color: red;
    }

    /* GAME OVER yazısı */
    .game-over, .win-message, .timer {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 60px;
      color: red;
      display: none; /* Başlangıçta gizli */
    }

    .win-message {
      color: green; /* "WIN" yazısı yeşil olacak */
    }

    .timer {
        display: block;
      font-size: 60px;
      color: white;
      top: 20%;
      
    }
    .shadow-red{
        filter: drop-shadow(0 0 20px red);
    }
    .shadow-green{
        filter: drop-shadow(0 0 20px green);
    }

Javascript:

const character = document.querySelector('.character');
    const oppositeCharacter = document.querySelector('.opposite-character');
    const finishLine = document.querySelector('.finish-line');
    const gameOverText = document.querySelector('.game-over');
    const winMessage = document.querySelector('.win-message');
    const timerElement = document.querySelector('.timer');

    let isMoving = false;
    let shadowColor = false; // İlk dönüşte kırmızı olacak
    let gameOver = false; // Game over durumunu takip ediyoruz
    let gameWon = false; // Oyun kazanıldı mı?
    let countdown = 60; // Geriye sayım başlatılıyor (60 saniye)

    // Timer için geri sayımı başlatan fonksiyon
    function startCountdown() {
      const countdownInterval = setInterval(() => {
        if (countdown <= 0 || gameOver || gameWon) {
          clearInterval(countdownInterval); // Sayım durduruluyor
        } else {
          countdown--;
          const minutes = Math.floor(countdown / 60);
          const seconds = countdown % 60;
          timerElement.textContent = `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
        }
      }, 1000);
    }

    // İleri tuşuna basıldığında karakterin hareket etmesini sağlayacak event listener
    document.addEventListener('keydown', function(event) {
      if (event.key === 'ArrowLeft' && !gameOver && !gameWon) {
        isMoving = true;  // Tuşa basıldığında hareket etmeye başlasın
      }
    });

    // Tuş bırakıldığında karakterin durmasını sağlayacak event listener
    document.addEventListener('keyup', function(event) {
      if (event.key === 'ArrowLeft' && !gameOver && !gameWon) {
        isMoving = false; // Tuş bırakıldığında hareketi durdur
      }
    });

    // Karakterin sağa doğru hareket etmesi
    function moveCharacter() {
      if (isMoving && !gameOver && !gameWon) {
        const currentRight = parseInt(window.getComputedStyle(character).right);
        character.style.right = (currentRight + 4) + 'px'; // Karakteri sağa hareket ettir
      }
      requestAnimationFrame(moveCharacter); // Animasyonu sürekli olarak çalıştır
    }

    // Rastgele zamanlarda sol karakterin arkasını dönmesi
    function randomTurn() {
      const randomTime = Math.floor(Math.random() * 1000) + 3000; // 3 ile 8 saniye arasında rastgele bir süre
      setTimeout(() => {
        shadowColor = !shadowColor;
        // Sol karakterin arkasını dönmesini sağla
        oppositeCharacter.style.transform = oppositeCharacter.style.transform === 'scaleX(1)' ? 'scaleX(-1)' : 'scaleX(1)';
        // Renk değişimini yap
        // shadowColor = (shadowColor === true) ? oppositeCharacter.classList.add('shadow-green') : oppositeCharacter.classList.add('shadow-red');
        if (shadowColor === true) {
            oppositeCharacter.classList.remove('shadow-green');
            oppositeCharacter.classList.add('shadow-red');
            
        } else {
            oppositeCharacter.classList.remove('shadow-red');
            oppositeCharacter.classList.add('shadow-green');
        }
        // Sol karakterin gölgesini değiştir
        // oppositeCharacter.style.boxShadow = `0 0 10px 5px ${shadowColor}`;

        

        randomTurn(); // Tekrar rastgele dönme işlevini başlat
      }, randomTime);
    }

    // WIN kontrolü
    function checkWin() {
      const characterRight = parseInt(window.getComputedStyle(character).right);
      const finishLineLeft = parseInt(window.getComputedStyle(finishLine).right);

      // Karakter kırmızı çizgiye değdiğinde oyunu kazan
      if (characterRight >= finishLineLeft && !gameWon) {
        gameWon = true;
        winMessage.style.display = 'block'; // WIN yazısını göster
      }
    }

    // GAME OVER kontrolü
    function checkGameOver() {
      // Sol karakterin gölgesi kırmızı olduğunda oyun biter
      if (shadowColor === true && isMoving ) {
        gameOver = true;
        gameOverText.style.display = 'block'; // GAME OVER yazısını göster
      }
    }

    // Karakterin hareketini başlat
    moveCharacter();

    // Sol karakterin arkasını dönme işlemini başlat
    randomTurn();

    // Oyun bitip bitmediğini sürekli kontrol et
    function gameLoop() {
      checkGameOver();
      checkWin();
      requestAnimationFrame(gameLoop); // Her animasyon karesinde oyun durumunu kontrol et
    }

    gameLoop(); // Oyun döngüsünü başlat
    startCountdown(); // Geriye sayımı başlat

Kategoriler:

Javascript, Kod Rehberi,