AI game creator

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

No:11303

←

Prev Next

→

Snake Game
Developer User4286｜Date and time 23/8/9 8:47:43
Build time 34.164 sec｜Game capacity 4.814KB｜

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>
        body {
            margin: 0;
            padding: 0;
        }
        canvas {
            background: #202020;
            display: block;
            margin: 20px auto;
        }
    </style>
</head>
<body>
<script>
    // Game Configuration
    const canvas = document.createElement("canvas");
    const context = canvas.getContext("2d");
    const gridSize = 20;
    const canvasSize = gridSize * 20;
    const initialSnakeLength = 4;
    const frameRate = 10;
    
    // Snake Variables
    let snake = [];
    let snakeDirection = "right";
    
    // Apple Variables
    let apple = {};
    
    // Game Status
    let isGameOver = false;
    
    // Initialization
    function init() {
        canvas.width = canvasSize;
        canvas.height = canvasSize;
        document.body.appendChild(canvas);
        
        createSnake();
        createApple();
        
        document.addEventListener("keydown", changeSnakeDirection);
        setInterval(gameLoop, 1000 / frameRate);
    }
    
    // Snake Creation
    function createSnake() {
        snake = [];
        for (let i = initialSnakeLength - 1; i >= 0; i--) {
            snake.push({ x: i, y: 0 });
        }
    }
    
    // Apple Creation
    function createApple() {
        apple = {
            x: Math.floor(Math.random() * gridSize),
            y: Math.floor(Math.random() * gridSize)
        };
    }
    
    // Snake Movement
    function moveSnake() {
        const snakeHead = {
            x: snake[0].x,
            y: snake[0].y
        };
        
        // Update snake's head position based on the direction
        if (snakeDirection === "right") snakeHead.x++;
        if (snakeDirection === "left") snakeHead.x--;
        if (snakeDirection === "up") snakeHead.y--;
        if (snakeDirection === "down") snakeHead.y++;
        
        snake.unshift(snakeHead);
        
        // Check if snake ate the apple
        if (snake[0].x === apple.x && snake[0].y === apple.y) {
            createApple();
        } else {
            snake.pop();
        }
    }
    
    // Snake Direction Change
    function changeSnakeDirection(event) {
        const arrowKeys = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"];
        
        if (arrowKeys.includes(event.key)) {
            event.preventDefault();
            
            if (event.key === "ArrowUp" && snakeDirection !== "down") {
                snakeDirection = "up";
            }
            if (event.key === "ArrowDown" && snakeDirection !== "up") {
                snakeDirection = "right";
            }
            if (event.key === "ArrowLeft" && snakeDirection !== "right") {
                snakeDirection = "left";
            }
            if (event.key === "ArrowRight" && snakeDirection !== "left") {
                snakeDirection = "down";
            }
        }
    }
    
    // Game Loop
    function gameLoop() {
        if (isGameOver) return;
        
        clearCanvas();
        moveSnake();
        drawSnake();
        drawApple();
        checkCollision();
    }
    
    // Clear Canvas
    function clearCanvas() {
        context.fillStyle = "#202020";
        context.fillRect(0, 0, canvas.width, canvas.height);
    }
    
    // Draw Snake
    function drawSnake() {
        snake.forEach((segment) => {
            context.fillStyle = "#ffffff";
            context.fillRect(
                segment.x * gridSize,
                segment.y * gridSize,
                gridSize,
                gridSize
            );
        });
    }
    
    // Draw Apple
    function drawApple() {
        context.fillStyle = "#ff0000";
        context.fillRect(
            apple.x * gridSize,
            apple.y * gridSize,
            gridSize,
            gridSize
        );
    }
    
    // Check Collision
    function checkCollision() {
        const head = snake[0];
        
        // Check if snake collided with the boundaries
        if (
            head.x < 0 ||
            head.y < 0 ||
            head.x >= gridSize ||
            head.y >= gridSize
        ) {
            gameOver();
        }
        
        // Check if snake collided with itself
        for (let i = 1; i < snake.length; i++) {
            if (snake[i].x === head.x && snake[i].y === head.y) {
                gameOver();
                break;
            }
        }
    }
    
    // Game Over
    function gameOver() {
        isGameOver = true;
        alert("Game Over!");
        init();
    }
    
    // Start the Game
    init();
</script>
</body>
</html>