AI game creator

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

No:19953

←

Prev Next

→

Snake Game
Developer User8882｜Date and time 23/10/7 13:49:46
Build time 24.059 sec｜Game capacity 4.727KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Snake Game</title>
    <style>
        #game-board {
            position: relative;
            width: 400px;
            height: 400px;
            border: 1px solid black;
        }
        .snake-cell {
            position: absolute;
            width: 20px;
            height: 20px;
            background-color: green;
        }
        .food-cell {
            position: absolute;
            width: 20px;
            height: 20px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="game-board"></div>
    <script>
        // Initialiser les variables de jeu
        var gameBoard = document.getElementById('game-board');
        var cells = [];
        var snake = [{
            x: 0,
            y: 0
        }];
        var food = {};
        var direction = 'right';

// Fonction pour générer la nourriture pour le serpent
        function generateFood() {
            var x = Math.floor(Math.random() * 20) * 20;
            var y = Math.floor(Math.random() * 20) * 20;
            food = { x: x, y: y };
            var foodCell = document.createElement('div');
            foodCell.classList.add('food-cell');
            foodCell.style.left = x + 'px';
            foodCell.style.top = y + 'px';
            gameBoard.appendChild(foodCell);
        }

// Fonction pour déplacer le serpent
        function moveSnake() {
            var head = Object.assign({}, snake[0]);
            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;
            }

snake.unshift(head);

if (head.x === food.x && head.y === food.y) {
                var foodCell = document.querySelector('.food-cell');
                gameBoard.removeChild(foodCell);
                generateFood();
            } else {
                snake.pop();
            }

if (checkCollision(head) || checkBoundaries(head)) {
                clearInterval(gameInterval);
                alert("Game Over");
            } else {
                renderSnake();
            }
        }

// Fonction pour afficher le serpent
        function renderSnake() {
            for (var i = 0; i < snake.length; i++) {
                var x = snake[i].x;
                var y = snake[i].y;
                var cell = document.createElement('div');
                cell.classList.add('snake-cell');
                cell.style.left = x + 'px';
                cell.style.top = y + 'px';
                gameBoard.appendChild(cell);
                cells.push(cell);
            }
        }

// Fonction pour vérifier la collision avec le serpent lui-même
        function checkCollision(head) {
            for (var i = 1; i < snake.length; i++) {
                if (snake[i].x === head.x && snake[i].y === head.y) {
                    return true;
                }
            }
            return false;
        }

// Fonction pour vérifier si le serpent a touché les limites du plateau de jeu
        function checkBoundaries(head) {
            if (head.x < 0 || head.x >= gameBoard.offsetWidth || head.y < 0 || head.y >= gameBoard.offsetHeight) {
                return true;
            }
            return false;
        }

// Fonction pour gérer les événements de touche
        function handleKeyPress(e) {
            switch (e.key) {
                case 'ArrowUp':
                    if (direction !== 'down') {
                        direction = 'up';
                    }
                    break;
                case 'ArrowDown':
                    if (direction !== 'up') {
                        direction = 'down';
                    }
                    break;
                case 'ArrowLeft':
                    if (direction !== 'right') {
                        direction = 'left';
                    }
                    break;
                case 'ArrowRight':
                    if (direction !== 'left') {
                        direction = 'right';
                    }
                    break;
            }
        }

// Générer la nourriture initiale et ajouter l'écouteur d'événements de touche
        generateFood();
        document.addEventListener('keydown', handleKeyPress);

// Démarrer le jeu
        var gameInterval = setInterval(moveSnake, 200);
    </script>
</body>
</html>