snake game you move slow's game

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

No:37162

←

Prev Next

→

snake game you move slow
Developer User17003｜Date and time 24/1/20 14:03:22
Build time 13.185 sec｜Game capacity 4.078KB｜

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 #000;
            display: block;
            margin: 20px auto;
        }
    </style>
</head>
<body>
    <canvas id="snakeCanvas" width="400" height="400"></canvas>

// Initialize Canvas
        const canvas = document.getElementById('snakeCanvas');
        const ctx = canvas.getContext('2d');

// Set Initial Variables
        let snake = [];
        let size = 20;
        let speed = 1;
        let direction = 'right';
        let food = { x: 0, y: 0 };
        let score = 0;
        let interval;

// Generate Food Location
        function generateFood() {
            food.x = Math.floor(Math.random() * (canvas.width / size)) * size;
            food.y = Math.floor(Math.random() * (canvas.height / size)) * size;
        }

// Initialize Snake
        function initializeSnake() {
            snake = [{ x: 0, y: 0 }];
        }

// Draw Snake and Food
        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw Snake
            snake.forEach(segment => {
                ctx.fillStyle = 'green';
                ctx.fillRect(segment.x, segment.y, size, size);
                ctx.strokeStyle = 'black';
                ctx.strokeRect(segment.x, segment.y, size, size);
            });

// Draw Food
            ctx.fillStyle = 'red';
            ctx.fillRect(food.x, food.y, size, size);
            ctx.strokeStyle = 'black';
            ctx.strokeRect(food.x, food.y, size, size);

// Draw Score
            ctx.fillStyle = 'black';
            ctx.font = '20px Arial';
            ctx.fillText(`Score: ${score}`, 10, 30);
        }

// Move Snake
        function move() {
            let head = { x: snake[0].x, y: snake[0].y };

// Update head position based on direction
            if (direction === 'right') head.x += size;
            if (direction === 'left') head.x -= size;
            if (direction === 'up') head.y -= size;
            if (direction === 'down') head.y += size;

// Check if head collides with food
            if (head.x === food.x && head.y === food.y) {
                score++;

// Generate a new food location
                generateFood();
            } else {
                // Remove the tail segment
                snake.pop();
            }

// Add the updated head to the front of the snake
            snake.unshift(head);

// Check if snake hits the wall or itself
            if (head.x < 0 || head.y < 0 || head.x >= canvas.width || head.y >= canvas.height || collision()) {
                clearInterval(interval);
                alert('Game Over! Your Score: ' + score);
                startGame();
            }

// Draw the updated snake and food positions
            draw();
        }

// Check if snake hits itself
        function collision() {
            let head = snake[0];
            for (let i = 1; i < snake.length; i++) {
                if (snake[i].x === head.x && snake[i].y === head.y) {
                    return true;
                }
            }
            return false;
        }

// Start the game
        function startGame() {
            initializeSnake();
            generateFood();
            interval = setInterval(move, 1000 / speed);
        }

// Keyboard controls to change snake direction
        document.addEventListener('keydown', (e) => {
            if (e.key === 'ArrowUp' && direction !== 'down') direction = 'up';
            if (e.key === 'ArrowDown' && direction !== 'up') direction = 'down';
            if (e.key === 'ArrowLeft' && direction !== 'right') direction = 'left';
            if (e.key === 'ArrowRight' && direction !== 'left') direction = 'right';
        });

// Start the game
        startGame();
    </script>
</body>
</html>