logo-img
Log In
Login
Published by
profile-img

umut

@umut

yılan oyunu html

Nostaljik arcade oyunu Yılanı yönlendirin, yemleri yiyin ve büyüyün. Reflekslerinizi test edin ve en uzun yılanı oluşturun.

Category
Oyun
Language
Html
Type
Tema
Public All
0+
  • License MIT
  • Publication Date 14/05/2023 - 02:42
  • Views 40
  • Downloads 2
  • Files 1
  • Images 1
profile-img

kadrxy

Çok komik ve güzel :D
06/04/2023 | 02:13

<!DOCTYPE html>
<html>
<head>
  <title>Yılan Oyunu</title>
  <style>
    body {
      text-align: center;
      font-family: Arial, sans-serif;
      background-color: #222;
      color: #fff;
    }
    
    h1 {
      margin-top: 50px;
    }
    
    #game-container {
      margin-top: 50px;
    }
    
    #game-board {
      width: 400px;
      height: 400px;
      margin: 0 auto;
      background-color: #333;
      border: 2px solid #fff;
      position: relative;
    }
    
    .snake-dot {
      width: 20px;
      height: 20px;
      background-color: #fff;
      border-radius: 50%;
      position: absolute;
    }
    
    .food-dot {
      width: 20px;
      height: 20px;
      background-color: #ff9800;
      border-radius: 50%;
      position: absolute;
    }
  </style>
</head>
<body>
  <h1>Yılan Oyunu</h1>
  
  <div id="game-container">
    <div id="game-board"></div>
  </div>

  <!--stop game click to space -->
   <p>Yılanı durdurmak için boşluk(space) tuşuna basınız.</p>
   <div id="gamestatus"></div>
  
  <script>
    var gameBoard = document.getElementById('game-board');
    var snakeDots = [{top: 200, left: 200}];
    var foodDot = {top: 0, left: 0};
    var direction = 'right';
    var gameInterval;
    
    function createDot(dotClass, top, left) {
      var dot = document.createElement('div');
      dot.className = dotClass;
      dot.style.top = top + 'px';
      dot.style.left = left + 'px';
      return dot;
    }
    
    function drawGameBoard() {
      gameBoard.innerHTML = '';
      
      snakeDots.forEach(function(dot) {
        var snakeDot = createDot('snake-dot', dot.top, dot.left);
        gameBoard.appendChild(snakeDot);
      });
      
      var foodDotElement = createDot('food-dot', foodDot.top, foodDot.left);
      gameBoard.appendChild(foodDotElement);
    }
    
    function generateFoodDot() {
      var top = Math.floor(Math.random() * 20) * 20;
      var left = Math.floor(Math.random() * 20) * 20;
      foodDot = {top: top, left: left};
    }
    
    function moveSnake() {
      var head = Object.assign({}, snakeDots[0]);
      
      if (direction === 'right') {
        head.left += 20;
      } else if (direction === 'left') {
        head.left -= 20;
      } else if (direction === 'up') {
        head.top -= 20;
      } else if (direction === 'down') {
        head.top += 20;
      }
      
      snakeDots.unshift(head);
      
      if (head.left === foodDot.left && head.top === foodDot.top) {
        generateFoodDot();
      } else {
        snakeDots.pop();
      }
      
      drawGameBoard();
      
      if (checkCollision()) {
        clearInterval(gameInterval);
        alert('Oyun Bitti!');
        window.location.reload();
      }
    }
    
    function checkCollision() {
      var head = snakeDots[0];
      
      if (
        head.left < 0 ||
        head.top < 0 ||
        head.left >= 400 ||
        head.top >= 400        ||
        snakeDots.slice(1).some(function(dot) {
          return dot.left === head.left && dot.top === head.top;
        })
      ) {
        return true;
      }
      
      return false;
    }
    
    function changeDirection(event) {
      var key = event.keyCode;
      
      if (key === 37 && direction !== 'right') {
        direction = 'left';
      } else if (key === 38 && direction !== 'down') {
        direction = 'up';
      } else if (key === 39 && direction !== 'left') {
        direction = 'right';
      } else if (key === 40 && direction !== 'up') {
        direction = 'down';
      }
    }
    
    function startGame() {
      generateFoodDot();
      gameInterval = setInterval(moveSnake, 200);
      document.addEventListener('keydown', changeDirection);
    }

    var isGamePaused = false;

function toggleGamePause() {
  if (isGamePaused) {
    isGamePaused = false;
    gameInterval = setInterval(moveSnake, 200);
    
    const gameStatusElement = document.getElementById('gamestatus');
    gameStatusElement.innerHTML = '';
  } else {
    isGamePaused = true;
    clearInterval(gameInterval);

    const gameStatusElement = document.getElementById('gamestatus');
    gameStatusElement.style.color = 'red';
    gameStatusElement.innerHTML = 'Oyun Duraklatıldı!';

  }
}

document.addEventListener('keydown', function(event) {
  var key = event.keyCode;
  
  if (key === 32) { // Space bar
    toggleGamePause();
  }
});

    
    startGame();
  </script>
</body>
</html>