AI game creator

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

No:49654

←

Prev Next

→

Snake Game
Developer User21118｜Date and time 24/3/6 1:10:54
Build time 13.134 sec｜Game capacity 2.735KB｜

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>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    <script>
        let canvas = document.getElementById("gameCanvas");
        let ctx = canvas.getContext("2d");

let snake = [{ x: 10, y: 10 }];
        let direction = "right";
        let score = 0;
        let food = { x: 15, y: 15 };

function drawSnake() {
            snake.forEach(segment => {
                ctx.fillStyle = "green";
                ctx.fillRect(segment.x * 20, segment.y * 20, 20, 20);
            });
        }

function drawFood() {
            ctx.fillStyle = "red";
            ctx.fillRect(food.x * 20, food.y * 20, 20, 20);
        }

function update() {
            let newHead = { x: snake[0].x, y: snake[0]. y };

if (direction === "right") {
                newHead.x++;
            } else if (direction === "left") {
                newHead.x--;
            } else if (direction === "up") {
                newHead.y--;
            } else if (direction === "down") {
                newHead.y++;
            }

if (newHead.x === food.x && newHead.y === food.y) {
                score++;
                generateFood();
            } else {
                snake.pop();
            }

if (newHead.x < 0 || newHead.x >= canvas.width / 20 || newHead.y < 0 || newHead.y >= canvas.height / 20 || collision(newHead)) {
                alert("Game Over! Your score was: " + score);
                location.reload();
            }

snake.unshift(newHead);

ctx.clearRect(0, 0, canvas.width, canvas.height);
            drawSnake();
            drawFood();
        }

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

function collision(head) {
            return snake.some(segment => {
                return segment.x === head.x && segment.y === head.y;
            });
        }

document.addEventListener("keydown", e => {
            const keyPressed = e.key;

if (keyPressed === "ArrowUp" && direction !== "down") {
                direction = "up";
            } else if (keyPressed === "ArrowDown" && direction !== "up") {
                direction = "down";
            } else if (keyPressed === "ArrowLeft" && direction !== "right") {
                direction = "left";
            } else if (keyPressed === "ArrowRight" && direction !== "left") {
                direction = "right";
            }
        });

generateFood();
        setInterval(update, 100);
    </script>
</body>
</html>