AI game creator

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

No:49951

←

Prev Next

→

Snake Game
Developer User21182｜Date and time 24/3/7 1:49:16
Build time 13.744 sec｜Game capacity 2.76KB｜

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 box = 20;
        let snake = [{ x: 10 * box, y: 10 * box }];
        let food = { x: Math.floor(Math.random() * 20) * box, y: Math.floor(Math.random() * 20) * box };

let direction;
        let score = 0;

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

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

function drawScore() {
            ctx.fillStyle = "black";
            ctx.font = "20px Arial";
            ctx.fillText("Score: " + score, 10, 30);
        }

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

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

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

snake.unshift(head);
        }

function changeDirection(e) {
            if (e.keyCode === 37 && direction !== "RIGHT") direction = "LEFT";
            if (e.keyCode === 38 && direction !== "DOWN") direction = "UP";
            if (e.keyCode === 39 && direction !== "LEFT") direction = "RIGHT";
            if (e.keyCode === 40 && direction !== "UP") direction = "DOWN";
        }

function gameOver() {
            for (let i = 1; i < snake.length; i++) {
                if (snake[i].x === snake[0].x && snake[i].y === snake[0].y) {
                    return true;
                }
            }

return false;
        }

function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            drawSnake();
            drawFood();
            drawScore();

moveSnake();

if (gameOver()) {
                clearInterval(gameLoop);
                alert("Game Over! Your Score: " + score);
            }
        }

document.addEventListener("keydown", changeDirection);

const gameLoop = setInterval(draw, 100);
    </script>
</body>
</html>