AI game creator

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

No:15613

←

Prev Next

→

Snake Game
Developer SkyllerForce｜Date and time 23/9/10 6:11:16
Build time 17.487 sec｜Game capacity 2.219KB｜

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;
            background-color: #f1f1f1;
        }
    </style>
</head>
<body>
<canvas id="gameCanvas" width="400" height="400"></canvas>

// Create the snake object
    let snake = [
        {x: 200, y: 200},
        {x: 190, y: 200},
        {x: 180, y: 200},
        {x: 170, y: 200},
        {x: 160, y: 200}
    ];

// Initial direction of the snake
    let dx = 10;
    let dy = 0;

// Function to draw the snake on the canvas
    function drawSnake() {
        snake.forEach(drawSnakePart);
    }

// Draw each part of the snake
    function drawSnakePart(snakePart) {
        ctx.fillStyle = "#000000";
        ctx.strokeStyle = "#ffffff";
        ctx.fillRect(snakePart.x, snakePart.y, 10, 10);
        ctx.strokeRect(snakePart.x, snakePart.y, 10, 10);
    }

// Function to move the snake
    function moveSnake() {
        const head = {x: snake[0].x + dx, y: snake[0].y + dy};
        snake.unshift(head);
        snake.pop();
    }

// Function to update the game
    function update() {
        clearCanvas();
        drawSnake();
        moveSnake();
    }

// Function to clear the canvas
    function clearCanvas() {
        ctx.fillStyle = "#f1f1f1";
        ctx.clearRect(0, 0, canvas.width, canvas.height);
    }

// Function to handle keyboard input
    function handleKeyInput(event) {
        if (event.key === "ArrowUp" && dy !== 10) {
            dx = 0;
            dy = -10;
        } else if (event.key === "ArrowDown" && dy !== -10) {
            dx = 0;
            dy = 10;
        } else if (event.key === "ArrowLeft" && dx !== 10) {
            dx = -10;
            dy = 0;
        } else if (event.key === "ArrowRight" && dx !== -10) {
            dx = 10;
            dy = 0;
        }
    }

// Set up keyboard event listener
    document.addEventListener("keydown", handleKeyInput);

// Start the game loop
    setInterval(update, 100);
</script>
</body>
</html>