Click here for free DL of the app version that can save data.

No:24782

114

←

Prev Next

→

Snake Game
Developer User11854｜Date and time 23/11/12 3:57:12
Build time 143.264 sec｜Game capacity 5.395KB｜

Script

لعبة الثعبان

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
  <title>لعبة الثعبان</title>
  <style>
    body {
      background-color: black;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }

#game-board {
      background-color: #0f0f0f;
      border: 1px solid #aaa;
      width: 400px;
      height: 400px;
    }
  </style>
</head>
<body>
  <h1 style="color:white;text-align:center;">لعبة الثعبان</h1>
  <div id="game-board"></div>
  
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      
      const board = document.getElementById('game-board');
      const boardSize = 20;
      const cellSize = 20;
      const snakeColor = '#f00';
      const foodColor = '#ff0';
      const direction = {
        UP: 'up',
        DOWN: 'down',
        LEFT: 'left',
        RIGHT: 'right'
      }
      
      let snake = [
        { x: 10, y: 10 }, // Initial snake head position
        { x: 9, y: 10 },  // Initial snake body segment position
        { x: 8, y: 10 }   // Initial snake body segment position
      ];
      
      let currentDirection = direction.RIGHT; // Initial snake's direction
      let food = generateFood();
      let isPlaying = false;
      let score = 0;
      let intervalId;
      
      function drawBoard() {
        board.innerHTML = '';
        
        for (let y = 0; y < boardSize; y++) {
          for (let x = 0; x < boardSize; x++) {
            const cell = document.createElement('div');
            cell.style.width = cellSize + 'px';
            cell.style.height = cellSize + 'px';
            cell.style.backgroundColor = '#0f0f0f';
            cell.style.border = '1px solid #555';
            
            snake.forEach(segment => {
              if (segment.x === x && segment.y === y) {
                cell.style.backgroundColor = snakeColor;
              }
            });
            
            if (food.x === x && food.y === y) {
              cell.style.backgroundColor = foodColor;
            }
            
            board.appendChild(cell);
          }
        }
      }
      
      function generateFood() {
        const x = Math.floor(Math.random() * boardSize);
        const y = Math.floor(Math.random() * boardSize);
        
        // Food should not be placed on the snake's segments
        if (snake.some(segment => segment.x === x && segment.y === y)) {
          return generateFood();
        }
        
        return { x, y };
      }
      
      function updateSnake() {
        const head = { ...snake[0] };
        
        switch (currentDirection) {
          case direction.UP:
            head.y--;
            break;
          case direction.DOWN:
            head.y++;
            break;
          case direction.LEFT:
            head.x--;
            break;
          case direction.RIGHT:
            head.x++;
            break;
        }
        
        snake.unshift(head);
        
        if (head.x === food.x && head.y === food.y) {
          score += 10;
          food = generateFood();
        } else {
          snake.pop();
        }
        
        // Check for collision with walls
        if (
          head.x < 0 ||
          head.x >= boardSize ||
          head.y < 0 ||
          head.y >= boardSize ||
          snake.slice(1).some(segment => segment.x === head.x && segment.y === head.y)
        ) {
          endGame();
        }
      }
      
      function endGame() {
        clearInterval(intervalId);
        alert('لعبة الثعبان انتهت! النتيجة: ' + score);
        score = 0;
        snake = [
          { x: 10, y: 10 },
          { x: 9, y: 10 },
          { x: 8, y: 10 }
        ];
        currentDirection = direction.RIGHT;
        food = generateFood();
        
        isPlaying = false;
        startButton.innerText = 'ابدأ اللعبة';
      }
      
      function startGame() {
        isPlaying = true;
        startButton.innerText = 'استمرار';
        intervalId = setInterval(() => {
          updateSnake();
          drawBoard();
        }, 200);
      }
      
      document.addEventListener('keydown', event => {
        if (!isPlaying) return;
        
        const keyPressed = event.key;
        
        if (keyPressed === 'ArrowUp' && currentDirection !== direction.DOWN) {
          currentDirection = direction.UP;
        } else if (keyPressed === 'ArrowDown' && currentDirection !== direction.UP) {
          currentDirection = direction.DOWN;
        } else if (keyPressed === 'ArrowLeft' && currentDirection !== direction.RIGHT) {
          currentDirection = direction.LEFT;
        } else if (keyPressed === 'ArrowRight' && currentDirection !== direction.LEFT) {
          currentDirection = direction.RIGHT;
        }
      });
      
      const startButton = document.createElement('button');
      startButton.innerText = 'ابدأ اللعبة';
      startButton.addEventListener('click', () => {
        if (isPlaying) {
          clearInterval(intervalId);
          isPlaying = false;
          startButton.innerText = 'ابدأ اللعبة';
        } else {
          startGame();
        }
      });
      
      const controls = document.createElement('div');
      controls.appendChild(startButton);
      document.body.insertBefore(controls, board);
      
      drawBoard();
    });
  </script>
</body>
</html>