AI game creator

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

No:52411

←

Prev Next

→

Snake Game
Developer User21925｜Date and time 24/3/22 4:56:26
Build time 11.539 sec｜Game capacity 2.916KB｜

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>
    canvas {
        border: 1px solid black;
    }
</style>
</head>
<body>
<canvas id="gameCanvas" width="400" height="400"></canvas>
<script>
    const canvas = document.getElementById("gameCanvas");
    const ctx = canvas.getContext("2d");
    
    const gridSize = 20;
    const tileCount = canvas.width / gridSize;
    
    let snake = [{ x: 10, y: 10 }];
    let food = { x: 15, y: 15 };
    let xVelocity = 1;
    let yVelocity = 0;
    
    function drawGame() {
        // Clear canvas
        ctx.fillStyle = "black";
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        
        drawSnake();
        drawFood();
    }
    
    function drawSnake() {
        ctx.fillStyle = "green";
        snake.forEach(segment => {
            ctx.fillRect(segment.x * gridSize, segment.y * gridSize, gridSize, gridSize);
        });
    }
    
    function drawFood() {
        ctx.fillStyle = "red";
        ctx.fillRect(food.x * gridSize, food.y * gridSize, gridSize, gridSize);
    }
    
    function moveSnake() {
        const head = { x: snake[0].x + xVelocity, y: snake[0].y + yVelocity };
        snake.unshift(head);
        
        if (head.x === food.x && head.y === food.y) {
            generateFood();
        } else {
            snake.pop();
        }
    }
    
    function generateFood() {
        food.x = Math.floor(Math.random() * tileCount);
        food.y = Math.floor(Math.random() * tileCount);
    }
    
    function checkCollision() {
        if (snake[0].x < 0 || snake[0].x >= tileCount || snake[0].y < 0 || snake[0].y >= tileCount) {
            endGame();
        }
        
        for (let i = 1; i < snake.length; i++) {
            if (snake[i].x === snake[0].x && snake[i].y === snake[0].y) {
                endGame();
            }
        }
    }
    
    function endGame() {
        alert("Game Over! Your Score: " + (snake.length - 1));
        snake = [{ x: 10, y: 10 }];
        xVelocity = 1;
        yVelocity = 0;
        generateFood();
    }
    
    function update() {
        moveSnake();
        checkCollision();
    }
    
    function gameLoop() {
        update();
        drawGame();
        setTimeout(() => {
            requestAnimationFrame(gameLoop);
        }, 100);
    }
    
    document.addEventListener("keydown", e => {
        if (e.key === "ArrowUp" && yVelocity !== 1) {
            xVelocity = 0;
            yVelocity = -1;
        } else if (e.key === "ArrowDown" && yVelocity !== -1) {
            xVelocity = 0;
            yVelocity = 1;
        } else if (e.key === "ArrowLeft" && xVelocity !== 1) {
            xVelocity = -1;
            yVelocity = 0;
        } else if (e.key === "ArrowRight" && xVelocity !== -1) {
            xVelocity = 1;
            yVelocity = 0;
        }
    });
    
    generateFood();
    gameLoop();
</script>
</body>
</html>