Yılan Oyunu🐍 / Html/CSS & Javascript - IRCForumları - IRC ve mIRC Kullanıcılarının Buluşma Noktası

Mylife · 23 Mayıs 2025, 16:03

Yaparken çok keyif aldığım bir uygulama, resmen çocukluğumu hatırlattı. Saatlerce başından kalkmazdık. Şimdi de oynadıkça oynatıyor.
Güzel sokarlar yaptım bu arada, siz de deneyin.

Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir.

Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir.

Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir.

Kod: Kodu kopyalamak için üzerine çift tıklayın!

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>🐍 Yılan Oyunu</title>
  <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@600&display=swap" rel="stylesheet" />
  <style>
    * {
      box-sizing: border-box;
      font-family: 'Orbitron', Arial, sans-serif;
    }
    body {
      background: linear-gradient(145deg, #0f2027, #203a43, #2c5364);
      color: white;
      margin: 0;
      padding: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      min-height: 100vh;
    }
    h1 {
      font-size: 3em;
      margin-bottom: 30px;
      text-shadow: 2px 2px 4px #000;
      user-select: none;
    }

 
    #mainMenu {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 15px;
      margin-bottom: 40px;
      width: 320px;
      max-width: 90vw;
    }
    #nicknameInput {
      padding: 10px 15px;
      font-size: 1em;
      border-radius: 8px;
      border: none;
      width: 100%;
      max-width: 320px;
      outline: none;
      transition: box-shadow 0.3s ease;
    }
    #nicknameInput:focus {
      box-shadow: 0 0 8px #0ff;
    }
    #startButton {
      padding: 10px 25px;
      font-size: 1.1em;
      border-radius: 8px;
      border: none;
      cursor: pointer;
      background-color: #28a745;
      transition: background-color 0.3s ease;
      color: white;
      width: 100%;
      max-width: 320px;
      user-select: none;
    }
    #startButton:hover {
      background-color: #218838;
    }

    #scoreTable {
      margin-top: 20px;
      background: rgba(255, 255, 255, 0.1);
      padding: 15px 25px;
      border-radius: 12px;
      width: 100%;
      max-height: 230px;
      overflow-y: auto;
      text-align: center;
      user-select: none;
    }
    #scoreTable h2 {
      font-size: 1.3em;
      margin-bottom: 12px;
    }
    #scoreTable ol {
      font-size: 0.9em;
      padding-left: 0;
      list-style-position: inside;
      color: #d0f0f0;
      margin: 0;
    }


    #gameContainer {
      display: flex;
      flex-direction: row;
      gap: 25px;
      justify-content: center;
      align-items: flex-start;
      width: 100%;
      max-width: 760px;
    }
    #gameFrame {
      position: relative;
      background-color: #111;
      width: 400px;
      height: 400px;
      border: 10px double #ddd;
      box-shadow: 0 0 15px 5px #00ffcc;
      overflow: hidden;
      border-radius: 15px;
    }
    canvas {
      display: block;
      width: 100%;
      height: 100%;
      border-radius: 15px;
      background: #111;
    }
    #clickToStart {
      position: absolute;
      top: 45%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 1.6em;
      color: #0ff;
      background: rgba(0, 0, 0, 0.7);
      padding: 12px 25px;
      border-radius: 12px;
      display: none;
      animation: blink 1s infinite;
      user-select: none;
      pointer-events: auto;
      cursor: pointer;
    }
    @[Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...]rames blink {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.5; }
    }
    #scorePanel {
      background: rgba(0, 0, 0, 0.5);
      border-radius: 15px;
      padding: 25px 20px;
      width: 280px;
      box-shadow: 0 0 15px #00ffff;
      font-family: 'Orbitron', Arial, sans-serif;
      color: white;
      user-select: none;
    }
    #scorePanel h3 {
      text-align: center;
      color: #0ff;
      border-bottom: 1px solid #888;
      padding-bottom: 10px;
      font-size: 1.4em;
      text-shadow: 1px 1px 2px #000;
      margin-bottom: 15px;
    }
    #currentScore, #instructions {
      font-size: 1.1em;
      margin-bottom: 15px;
      line-height: 1.3em;
    }
    #liveScores {
      padding-left: 15px;
      margin: 0;
    }
    #liveScores li {
      font-size: 1.1em;
      font-weight: 700;
      color: #fff;
      text-shadow: 1px 1px 3px #00ffff;
      margin-bottom: 7px;
      list-style: decimal;
    }


    #gameOverScreen {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: rgba(0, 0, 0, 0.85);
      padding: 40px 50px;
      border-radius: 15px;
      text-align: center;
      z-index: 1000;
      display: none;
      user-select: none;
    }
    #gameOverScreen h2 {
      font-size: 2em;
      margin-bottom: 25px;
      color: #ff4444;
      text-shadow: 2px 2px 6px #000;
    }
    #restartButton {
      padding: 12px 28px;
      font-size: 1.1em;
      background-color: #007bff;
      color: white;
      border: none;
      border-radius: 10px;
      cursor: pointer;
      transition: background-color 0.3s ease;
      user-select: none;
    }
    #restartButton:hover {
      background-color: #0056b3;
    }
  </style>
</head>
<body>
  <h1>🐍 Yılan Oyunu</h1>

  <div id="mainMenu">
    <input
      type="text"
      id="nicknameInput"
      placeholder="Kullanıcı adınızı girin"
      maxlength="12"
      autocomplete="off"
      spellcheck="false"
    />
    <button id="startButton">Oyuna Başla</button>

    <div id="scoreTable">
      <h2>🏆 En İyi Skorlar</h2>
      <ol id="topScores"></ol>
    </div>
  </div>

  <div id="gameContainer" style="display:none;">
    <div id="gameFrame">
      <canvas id="gameCanvas" width="400" height="400"></canvas>
      <div id="clickToStart">Başlamak için tıklayın</div>
      <div id="gameOverScreen">
        <h2>Game Over</h2>
        <button id="restartButton">Tamam</button>
      </div>
    </div>

    <div id="scorePanel">
      <h3>Bilgilendirme</h3>
      <p id="instructions">
        Oyun yön tuşlarıyla oynanır.<br />
        Boşluk tuşu: Başlat / Duraklat<br />
        Duvara veya kendine çarparsan oyun biter.
      </p>
      <div id="currentScore">Skor: 0</div>
      <h3>Skor Tablosu</h3>
      <ol id="liveScores"></ol>
    </div>
  </div>

 <script>
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');
    const clickToStart = document.getElementById('clickToStart');
    const gameOverScreen = document.getElementById('gameOverScreen');
    const restartButton = document.getElementById('restartButton');
    const mainMenu = document.getElementById('mainMenu');
    const gameContainer = document.getElementById('gameContainer');
    const nicknameInput = document.getElementById('nicknameInput');
    const startButton = document.getElementById('startButton');
    const currentScoreDisplay = document.getElementById('currentScore');
    const topScoresList = document.getElementById('topScores');
    const liveScoresList = document.getElementById('liveScores');

    const gridSize = 20;
    const tileCount = canvas.width / gridSize;

    let snake = [];
    let velocityX = 0;
    let velocityY = 0;
    let apple = {};
    let superApple = null;
    let score = 0;
    let normalAppleCount = 0; 
    let isRunning = false;
    let isPaused = false;
    let gameInterval;
    let nickname = '';
    let hasStarted = false;


    function loadScores() {
      let storedScores = localStorage.getItem('snakeHighScores');
      if (storedScores) {
        return JSON.parse(storedScores);
      }
      return [];
    }

    function saveScores(scores) {
      localStorage.setItem('snakeHighScores', JSON.stringify(scores));
    }


    function updateScoreLists() {
      const scores = loadScores();
      
      topScoresList.innerHTML = '';
      scores.forEach(({name, score}, i) => {
        const li = document.createElement('li');
        li.textContent = `${name}: ${score}`;
        topScoresList.appendChild(li);
      });


      liveScoresList.innerHTML = '';
      scores.forEach(({name, score}) => {
        const li = document.createElement('li');
        li.textContent = `${name}: ${score}`;
        liveScoresList.appendChild(li);
      });
    }


    function placeApple() {
      apple.x = Math.floor(Math.random() * tileCount);
      apple.y = Math.floor(Math.random() * tileCount);

      
      if (snake.some(segment => segment.x === apple.x && segment.y === apple.y) ||
          (superApple && superApple.x === apple.x && superApple.y === apple.y)) {
        placeApple();
      }
    }


    function placeSuperApple() {
      superApple = {};
      superApple.x = Math.floor(Math.random() * tileCount);
      superApple.y = Math.floor(Math.random() * tileCount);

     
      if (snake.some(segment => segment.x === superApple.x && segment.y === superApple.y) ||
          (apple.x === superApple.x && apple.y === superApple.y)) {
        placeSuperApple();
      }
    }


    function startGame() {
      if (!nickname.trim()) {
        alert('Lütfen kullanıcı adınızı girin.');
        return;
      }


      mainMenu.style.display = 'none';
      gameContainer.style.display = 'flex';


      snake = [
        {x: 8, y: 10},
        {x: 7, y: 10},
        {x: 6, y: 10}
      ];
      velocityX = 1;
      velocityY = 0;
      score = 0;
      normalAppleCount = 0;
      currentScoreDisplay.textContent = 'Skor: 0';
      superApple = null; 
      placeApple();
      isPaused = false;
      isRunning = false;
      hasStarted = false;
      clickToStart.style.display = 'block';
      gameOverScreen.style.display = 'none';

      updateScoreLists();
      drawGame();
    }


    function drawGame() {
      // Arka plan
      ctx.fillStyle = '#111';
      ctx.fillRect(0, 0, canvas.width, canvas.height);


      if (!superApple) { 
        ctx.fillStyle = '#ff4444';
        ctx.beginPath();
        const appleCenterX = apple.x * gridSize + gridSize / 2;
        const appleCenterY = apple.y * gridSize + gridSize / 2;
        ctx.arc(appleCenterX, appleCenterY, gridSize / 2.5, 0, Math.PI * 2);
        ctx.fill();
      }


      if (superApple) {
        ctx.fillStyle = '#ffd700'; 
        ctx.beginPath();
        const superCenterX = superApple.x * gridSize + gridSize / 2;
        const superCenterY = superApple.y * gridSize + gridSize / 2;
        ctx.arc(superCenterX, superCenterY, gridSize / 2.5, 0, Math.PI * 2);
        ctx.fill();

      
      }

  
      snake.forEach((segment, index) => {
        ctx.fillStyle = index === 0 ? '#00ffff' : '#00cccc';
        ctx.strokeStyle = '#005555';
        ctx.lineWidth = 2;

        const centerX = segment.x * gridSize + gridSize / 2;
        const centerY = segment.y * gridSize + gridSize / 2;
        const radius = gridSize / 2.5;

        ctx.beginPath();
        ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
        ctx.fill();
        ctx.stroke();
      });
    }


    function gameStep() {
      if (isPaused) return;


      const headX = snake[0].x + velocityX;
      const headY = snake[0].y + velocityY;

   
      if (headX < 0 || headX >= tileCount || headY < 0 || headY >= tileCount) {
        endGame();
        return;
      }
    
      if (snake.some(segment => segment.x === headX && segment.y === headY)) {
        endGame();
        return;
      }

 
      snake.unshift({x: headX, y: headY});



      if (superApple && headX === superApple.x && headY === superApple.y) {
     
        score += 50;
        currentScoreDisplay.textContent = `Skor: ${score}`;
        superApple = null;
        normalAppleCount = 0; 
        placeApple();
      }
      else if (!superApple && headX === apple.x && headY === apple.y) {
        
        score += 1;
        currentScoreDisplay.textContent = `Skor: ${score}`;
        normalAppleCount++;
        if (normalAppleCount >= 10) {
          
          superApple = {};
          placeSuperApple();
        } else {
          placeApple();
        }
      } else {
      
        snake.pop();
      }

      drawGame();
    }

 
    function endGame() {
      isPaused = true;
      isRunning = false;
      hasStarted = false;
      clickToStart.style.display = 'none';

  
      let scores = loadScores();
      scores.push({name: nickname, score});
      scores.sort((a,b) => b.score - a.score);
      if (scores.length > 10) scores.length = 10; 
      saveScores(scores);
      updateScoreLists();

      
      gameOverScreen.style.display = 'block';
    }

 
    window.addEventListener('keydown', (e) => {
  const keys = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];

  if (keys.includes(e.key)) {
    e.preventDefault(); 
  }

  if (!isRunning && !hasStarted) return; 

  switch (e.key) {
    case 'ArrowUp':
      if (velocityY !== 1) { velocityX = 0; velocityY = -1; }
      break;
    case 'ArrowDown':
      if (velocityY !== -1) { velocityX = 0; velocityY = 1; }
      break;
    case 'ArrowLeft':
      if (velocityX !== 1) { velocityX = -1; velocityY = 0; }
      break;
    case 'ArrowRight':
      if (velocityX !== -1) { velocityX = 1; velocityY = 0; }
      break;
    case ' ':
      if (!hasStarted) return;
      if (isPaused) {
        isPaused = false;
        currentScoreDisplay.textContent = `Skor: ${score}`;
      } else {
        isPaused = true;
        currentScoreDisplay.textContent = `Oyun Duraklatıldı (Boşluk ile devam ettir)`;
      }
      break;
  }
});



    startButton.addEventListener('click', () => {
      nickname = nicknameInput.value.trim();
      if (!nickname) {
        alert('Lütfen kullanıcı adınızı girin.');
        nicknameInput.focus();
        return;
      }
      startGame();
    });

   
    function runGameLoop() {
      if (gameInterval) clearInterval(gameInterval);
      gameInterval = setInterval(gameStep, 120);
    }


    clickToStart.addEventListener('click', () => {
      if (!hasStarted) {
        isRunning = true;
        isPaused = false;
        hasStarted = true;
        clickToStart.style.display = 'none';
        runGameLoop();
      }
    });

 
    restartButton.addEventListener('click', () => {
     
      gameContainer.style.display = 'none';
      mainMenu.style.display = 'flex';

    
      nicknameInput.value = '';
      nicknameInput.focus();

      gameOverScreen.style.display = 'none';
      if (gameInterval) clearInterval(gameInterval);
      isRunning = false;
      isPaused = false;
      hasStarted = false;
      updateScoreLists();
    });

   
    updateScoreLists();
</script>

</body>
</html>

Test Adresi: [Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...]

SNOOPY · 23 Mayıs 2025, 18:42

Yaşasın yılan oyunu hemen oynamalıyım

Mylife · 23 Mayıs 2025, 19:11

SNOOPY Nickli Üyeden Alıntı
Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir.

Yaşasın yılan oyunu hemen oynamalıyım

Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir.

@[Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...]

[Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...]

burda yayında oynayabilirsin
Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir.

Bakalım en yüksek skoru kim yapacak.

Dedecan61 · 23 Mayıs 2025, 19:46

Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir.

Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir.

Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir.

SNOOPY · 23 Mayıs 2025, 22:58

Bilgisayarda bakacağım

Mylife · 24 Mayıs 2025, 14:36

Canlı skor göstergesi aktif.
Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir.

Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir.

Dedecan61 · 24 Mayıs 2025, 15:01

Uşağum bu nasıl ..
Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir.

Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir.

Mylife · 24 Mayıs 2025, 15:02

Dedecan61 Nickli Üyeden Alıntı
Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir.

Uşağum bu nasıl ..
Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir.

Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir.

Dede iyisin iyisinnn
Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir.

ZaLiM1979 · 24 Mayıs 2025, 15:30

3 kez baslattim oyunu, 3 kez'de baslamadan bitti.
Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir.

GüL · 24 Mayıs 2025, 15:54

@[Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...] Harikasın ben çok severdim bu oyunu hemen oynaycam elinize sağlık
Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir.

Benzer Konular
Konu	Konuyu Başlatan	Forum	Cevaplar	Son Mesaj
Sayı Tahmin Oyunu / Html & JavaScript	Mylife	HTML/CSS/JavaScript	0	22 Mayıs 2025 13:19
Çıngıraklı yılan🐍🐍🐍 bunu hep sevmişimdir nedense =D	tugbu	Hayvanlar Alemi	6	26 Temmuz 2022 12:42
Kekikli Yılan yemeği tarifi🐍🐍	tugbu	Yemek Tarifleri	0	26 Temmuz 2022 12:23
Yılan Türleri 🐍🐍🐍	tugbu	Hayvanlar Alemi	0	26 Temmuz 2022 09:43
Çıngıraklı yılan🐍🐍🐍	tugbu	Hayvan Resimleri	0	22 Nisan 2022 15:29

Konuyu Toplam 1 Üye okuyor. (0 Kayıtlı üye ve 1 Misafir)

Etiketlenen Kullanıcılar
Etiketlemek istediğiniz kullanıcılar arasına virgül koyunuz. Örnek: nokta,sukunet,NucLear

5846 sayılı Fikir ve Sanat Eserleri Kanunu gereğince sitemizde telif hakkı bulunan mp3,video v.b. eserlerin paylaşımı yasaktır. Yasal işlem olması halinde paylaşan kişi yada kişilerin bilgileri gerekli kuruma verilecektir.