AI game creator

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

No:45698

114

←

Prev Next

→

Snake Game
Developer User19665｜Date and time 24/2/21 5:51:34
Build time 8.797 sec｜Game capacity 2.235KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

<!DOCTYPE html>
<html>
<head>
<style>
    canvas {
        border: 1px solid black;
    }
</style>
</head>
<body>

const tileSize = 10;
    const gameSize = 40;

let snake = [{x: 10, y: 10}];
    let apple = {x: 15, y: 15};

let direction = "right";

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

function drawApple() {
        context.fillStyle = "red";
        context.fillRect(apple.x * tileSize, apple.y * tileSize, tileSize, tileSize);
    }

function moveSnake() {
        let headX = snake[0].x;
        let headY = snake[0].y;

switch (direction) {
            case "up":
                headY--;
                break;
            case "down":
                headY++;
                break;
            case "left":
                headX--;
                break;
            case "right":
                headX++;
                break;
        }

snake.unshift({x: headX, y: headY});

if (headX === apple.x && headY === apple.y) {
            apple.x = Math.floor(Math.random() * gameSize);
            apple.y = Math.floor(Math.random() * gameSize);
        } else {
            snake.pop();
        }
    }

function clearCanvas() {
        context.clearRect(0, 0, canvas.width, canvas.height);
    }

function gameLoop() {
        clearCanvas();
        moveSnake();
        drawSnake();
        drawApple();
    }

setInterval(gameLoop, 100);

document.addEventListener("keydown", event => {
        switch (event.key) {
            case "ArrowUp":
                direction = "up";
                break;
            case "ArrowDown":
                direction = "down";
                break;
            case "ArrowLeft":
                direction = "left";
                break;
            case "ArrowRight":
                direction = "right";
                break;
        }
    });

</script>

</body>
</html>