AI game creator

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

No:44623

←

Prev Next

→

Snake Game
Developer User19435｜Date and time 24/2/18 19:45:54
Build time 8.89 sec｜Game capacity 2.883KB｜

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" style="border: 1px solid black;"></canvas>

const box = 20;
        let snake = [{ x: 200, y: 200 }];
        let food = { x: 100, y: 100 };
        let score = 0;
        let dx = 0;
        let dy = 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 checkCollision() {
            if (snake[0].x >= canvas.width || snake[0].x < 0 || snake[0].y >= canvas.height || snake[0].y < 0) {
                resetGame();
            }

snake.slice(1).forEach(segment => {
                if (snake[0].x === segment.x && snake[0].y === segment.y) {
                    resetGame();
                }
            });
        }

function moveSnake() {
            const head = { x: snake[0].x + dx, y: snake[0].y + dy };
            snake.unshift(head);
        }

function resetGame() {
            snake = [{ x: 200, y: 200 }];
            score = 0;
            dx = 0;
            dy = 0;
        }

function gameLoop() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

drawFood();
            drawSnake();
            drawScore();

moveSnake();
            checkCollision();
            eatFood();
        }

document.addEventListener("keydown", changeDirection);
        setInterval(gameLoop, 100);
    </script>
</body>
</html>