Snake game's game | AI game creator

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

No:51519

114

Snake game
Developer User14825｜Date and time 24/3/12 20:07:39
Build time 17.506 sec｜Game capacity 2.874KB｜

→ 　

0　

0　

　
　
　
　

[PR]現在の欲しいものランキング

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

(C)2023 HisashiApp

<!DOCTYPE html>
<html>
<head>
    <title>Snake Game</title>
    <style>
        canvas {
            border: 1px solid black;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>

<canvas id="gameCanvas" width="400" height="400"></canvas>

<script>
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');
    
    const snakeSize = 10;
    let direction = 'right';
    let snake = [{ x: 20, y: 20 }];
    let food = { x: 100, y: 100 };
    
    function drawSnakePart(part) {
        ctx.fillStyle = 'green';
        ctx.fillRect(part.x, part.y, snakeSize, snakeSize);
    }
    
    function drawFood() {
        ctx.fillStyle = 'red';
        ctx.fillRect(food.x, food.y, snakeSize, snakeSize);
    }
    
    function moveSnake() {
        let head = { x: snake[0].x, y: snake[0].y };
    
        if (direction === 'right') head.x += snakeSize;
        else if (direction === 'left') head.x -= snakeSize;
        else if (direction === 'up') head.y -= snakeSize;
        else if (direction === 'down') head.y += snakeSize;
    
        snake.unshift(head);
    
        if (head.x === food.x && head.y === food.y) {
            generateFood();
        } else {
            snake.pop();
        }
    }
    
    function generateFood() {
        const x = Math.floor(Math.random() * canvas.width / snakeSize) * snakeSize;
        const y = Math.floor(Math.random() * canvas.height / snakeSize) * snakeSize;
    
        food = { x, y };
    }
    
    function checkGameStatus() {
        if (snake[0].x >= canvas.width || snake[0].x < 0 || snake[0].y >= canvas.height || snake[0].y < 0) {
            alert('Game Over!');
            document.location.reload();
        }
    
        for (let i = 1; i < snake.length; i++) {
            if (snake[0].x === snake[i].x && snake[0].y === snake[i].y) {
                alert('Game Over!');
                document.location.reload();
            }
        }
    }
    
    function gameLoop() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
    
        moveSnake();
    
        drawFood();
    
        for (let i = 0; i < snake.length; i++) {
            drawSnakePart(snake[i]);
        }
    
        checkGameStatus();
    
        setTimeout(gameLoop, 100);
    }
    
    document.addEventListener('keydown', function (event) {
        if (event.key === 'ArrowRight' && direction !== 'left') {
            direction = 'right';
        } else if (event.key === 'ArrowLeft' && direction !== 'right') {
            direction = 'left';
        } else if (event.key === 'ArrowUp' && direction !== 'down') {
            direction = 'up';
        } else if (event.key === 'ArrowDown' && direction !== 'up') {
            direction = 'down';
        }
    });
    
    generateFood();
    gameLoop();
</script>

</body>
</html>