AI game creator

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

No:15225

102

←

Prev Next

→

Snake Game
Developer User6606｜Date and time 23/9/7 19:40:06
Build time 47.13 sec｜Game capacity 4.211KB｜

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 {
            margin: 0 auto;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="game-board" width="400" height="400"></canvas>

// Récupérer le canvas
        var canvas = document.getElementById("game-board");
        var context = canvas.getContext("2d");

// Taille d'une case
        var box = 20;

// Initialisation de la position et de la direction du serpent
        var snake = [];
        snake[0] = { x: 10 * box, y: 10 * box };
        var direction = "right";

// Initialisation de la position de la nourriture
        var food = {
            x: Math.floor(Math.random() * 20) * box,
            y: Math.floor(Math.random() * 20) * box
        };

// Fonction pour dessiner le serpent et la nourriture
        function draw() {
            // Effacer le canvas à chaque frame
            context.clearRect(0, 0, canvas.width, canvas.height);

// Dessiner le serpent
            for (var i = 0; i < snake.length; i++) {
                context.fillStyle = "green";
                context.fillRect(snake[i].x, snake[i].y, box, box);
            }

// Dessiner la nourriture
            context.fillStyle = "red";
            context.fillRect(food.x, food.y, box, box);
        }

// Fonction pour gérer les commandes du joueur via les touches du clavier
        document.addEventListener("keydown", changeDirection);

// Fonction pour mettre à jour la position du serpent et la détection des collisions
        function update() {
            // Mise à jour de la position de la tête du serpent en fonction de la direction choisie
            var snakeX = snake[0].x;
            var snakeY = snake[0].y;

if (direction == "right") snakeX += box;
            if (direction == "left") snakeX -= box;
            if (direction == "up") snakeY -= box;
            if (direction == "down") snakeY += box;

// Si le serpent mange la nourriture
            if (snakeX == food.x && snakeY == food.y) {
                // Générer une nouvelle position pour la nourriture
                food.x = Math.floor(Math.random() * 20) * box;
                food.y = Math.floor(Math.random() * 20) * box;
            } else {
                // Si le serpent ne mange pas la nourriture, supprimer la queue
                snake.pop();
            }

// Créer une nouvelle tête du serpent
            var newHead = { x: snakeX, y: snakeY };

// Game over si le serpent touche les bords du canvas ou se touche lui-même
            if (
                snakeX < 0 ||
                snakeY < 0 ||
                snakeX >= canvas.width ||
                snakeY >= canvas.height ||
                checkCollision(newHead, snake)
            ) {
                clearInterval(gameInterval); // Arrêter le jeu
                alert("Game over!");
            }

// Ajouter la nouvelle tête du serpent
            snake.unshift(newHead);

// Dessiner le serpent et la nourriture à chaque mise à jour
            draw();
        }

// Fonction pour détecter les collisions entre le serpent et ses parties existantes
        function checkCollision(head, array) {
            for (var i = 0; i < array.length; i++) {
                if (head.x == array[i].x && head.y == array[i].y) {
                    return true;
                }
            }
            return false;
        }

// Lancer le jeu
        var gameInterval = setInterval(update, 100);
    </script>
</body>
</html>