Remember the iconic “Red Light, Green Light” game from Squid Game? Now you can experience the thrill right in your browser! Using HTML, CSS, and JavaScript, I’ve created this exciting game that combines tension and strategy.

How Does the Game Work?

The goal is simple: move forward when the light is green and stop when it turns red. But be careful! If you’re caught moving during a red light, you’ll be eliminated.

From a technical perspective, the game leverages JavaScript to handle animations and user interactions, CSS for an engaging design, and HTML to structure the page. Every part of the code has been optimized and made easy to understand, making it not just a fun game but also a great learning resource for aspiring developers.

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

Categorized in:

Yazılım,