AI game creator

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

No:51523

142

←

Prev Next

→

inifinite snake
Developer Bowgray｜Date and time 24/3/13 0:20:41
Build time 10.625 sec｜Game capacity 2.093KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Infinite Snake Game</title>
    <style>
        canvas {
            border: 1px solid black;
            background-color: lightgray;
        }
    </style>
</head>
<body>
    <canvas id="snakeCanvas" width="400" height="400"></canvas>
    <script>
        const canvas = document.getElementById('snakeCanvas');
        const ctx = canvas.getContext('2d');
        const box = 20;
        let snake = [{x: 10, y: 10}];
        let food = {x: Math.floor(Math.random() * 20) * box, y: Math.floor(Math.random() * 20) * box};
        let direction = 'RIGHT';

function draw() {
            // Draw the snake
            ctx.fillStyle = 'green';
            ctx.fillRect(snake[0].x, snake[0].y, box, box);

// Draw the food
            ctx.fillStyle = 'red';
            ctx.fillRect(food.x, food.y, box, box);
        }

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

if (direction === 'RIGHT') head.x += box;
            if (direction === 'LEFT') head.x -= box;
            if (direction === 'UP') head.y -= box;
            if (direction === 'DOWN') head.y += box;

snake.unshift(head);

// Check if snake eats food
            if (head.x === food.x && head.y === food.y) {
                food = {x: Math.floor(Math.random() * 20) * box, y: Math.floor(Math.random() * 20) * box};
            } else {
                snake.pop();
            }
        }

document.addEventListener('keydown', (event) => {
            if (event.key === 'ArrowRight' && direction !== 'LEFT') direction = 'RIGHT';
            if (event.key === 'ArrowLeft' && direction !== 'RIGHT') direction = 'LEFT';
            if (event.key === 'ArrowUp' && direction !== 'DOWN') direction = 'UP';
            if (event.key === 'ArrowDown' && direction !== 'UP') direction = 'DOWN';
        });

function gameLoop() {
            draw();
            update();
        }

setInterval(gameLoop, 100); // 100ms

</script>
</body>
</html>