The snake's game is to control it when it eats and grows's game

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

No:37912

←

Prev Next

→

The snake's game is to control it when it eats and..ALL
Developer User17149｜Date and time 24/1/21 20:28:50
Build time 15.71 sec｜Game capacity 5.477KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>لعبة الثعبان</title>
    <style>
        #game-board {
            width: 400px;
            height: 400px;
            border: 1px solid #000;
            position: relative;
        }
        
        .snake-segment {
            width: 20px;
            height: 20px;
            background: #000;
            position: absolute;
        }
        
        #food {
            width: 20px;
            height: 20px;
            background: #f00;
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="game-board"></div>
    
    <script>
        // Obtaining game board
        const gameBoard = document.getElementById('game-board');
        
        // Set game board dimensions
        const boardWidth = gameBoard.clientWidth;
        const boardHeight = gameBoard.clientHeight;
        
        // Creating snake segments
        let snake = [
            { x: boardWidth / 2, y: boardHeight / 2 }
        ];
        
        // Set initial movement direction
        let direction = 'right';
        
        // Creating food element
        let food = createFood();
        
        // Timer interval for controlling snake movement
        const timerInterval = 100;
        
        // Starting the game
        let gameTimer = setInterval(moveSnake, timerInterval);
        
        // Keyboard key press event listener for controlling direction
        document.addEventListener('keydown', changeDirection);
        
        // Function to create food at random position
        function createFood() {
            let food = document.createElement('div');
            food.id = 'food';
            food.style.left = Math.floor(Math.random() * (boardWidth / 20)) * 20 + 'px';
            food.style.top = Math.floor(Math.random() * (boardHeight / 20)) * 20 + 'px';
            gameBoard.appendChild(food);
            return food;
        }
        
        // Function to move the snake
        function moveSnake() {
            const head = { x: snake[0].x, y: snake[0].y };
            
            // Change position according to the direction
            switch (direction) {
                case 'up':
                    head.y -= 20;
                    break;
                case 'down':
                    head.y += 20;
                    break;
                case 'left':
                    head.x -= 20;
                    break;
                case 'right':
                    head.x += 20;
                    break;
            }
            
            // Check if snake collides with the food
            if (head.x === food.offsetLeft && head.y === food.offsetTop) {
                // Increase snake length
                snake.push({});
                
                // Remove current food
                gameBoard.removeChild(food);
                
                // Create new food
                food = createFood();
            } else {
                // Remove tail segment of the snake
                snake.pop();
            }
            
            // Check if snake collides with the game board boundary or itself
            if (
                head.x <= -20 ||
                head.x >= boardWidth ||
                head.y <= -20 ||
                head.y >= boardHeight ||
                snake.some(segment => segment.x === head.x && segment.y === head.y)
            ) {
                clearInterval(gameTimer);
                alert('لقد خسرت اللعبة!');
                return;
            }
            
            // Add new head segment to the snake
            snake.unshift(head);
            
            // Update snake position on the game board
            updateSnakePosition();
        }
        
        // Function to update the snake's position on the game board
        function updateSnakePosition() {
            // Clear previous positions
            const segments = document.getElementsByClassName('snake-segment');
            while (segments.length > 0) {
                segments[0].parentNode.removeChild(segments[0]);
            }
            
            // Draw new positions
            snake.forEach(segment => {
                const segmentElement = document.createElement('div');
                segmentElement.className = 'snake-segment';
                segmentElement.style.left = segment.x + 'px';
                segmentElement.style.top = segment.y + 'px';
                gameBoard.appendChild(segmentElement);
            });
        }
        
        // Function to change the direction of the snake
        function changeDirection(event) {
            switch (event.keyCode) {
                case 38: // Up arrow key
                    if (direction !== 'down') {
                        direction = 'up';
                    }
                    break;
                case 40: // Down arrow key
                    if (direction !== 'up') {
                        direction = 'down';
                    }
                    break;
                case 37: // Left arrow key
                    if (direction !== 'right') {
                        direction = 'left';
                    }
                    break;
                case 39: // Right arrow key
                    if (direction !== 'left') {
                        direction = 'right';
                    }
                    break;
            }
        }
    </script>
</body>
</html>