Snake Game's game | AI game creator

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

No:52228

142

Snake Game
Developer User21803｜Date and time 24/3/19 6:59:02
Build time 11.494 sec｜Game capacity 2.955KB｜

→ 　

1　

0　

　
　
　
　

[PR]現在の欲しいものランキング

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

(C)2023 HisashiApp

<script>
    const canvas = document.createElement("canvas");
    const ctx = canvas.getContext("2d");
    
    const tileSize = 10;
    let snake = [{ x: 10, y: 10 }];
    let food = generateFoodPosition();
    let direction = "right";
    let score = 0;
    let gameover = false;
    
    canvas.width = 300;
    canvas.height = 300;
    document.body.appendChild(canvas);
    
    document.addEventListener("keydown", changeDirection);
    
    function changeDirection(event) {
        const key = event.key;
    
        if (key === "ArrowUp" && direction !== "down") {
            direction = "up";
        } else if (key === "ArrowDown" && direction !== "up") {
            direction = "down";
        } else if (key === "ArrowLeft" && direction !== "right") {
            direction = "left";
        } else if (key === "ArrowRight" && direction !== "left") {
            direction = "right";
        }
    }
    
    function generateFoodPosition() {
        return { 
            x: Math.floor(Math.random() * canvas.width / tileSize) * tileSize, 
            y: Math.floor(Math.random() * canvas.height / tileSize) * tileSize 
        };
    }
    
    function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
    
        // draw snake
        ctx.fillStyle = "green";
        snake.forEach(s => {
            ctx.fillRect(s.x, s.y, tileSize, tileSize);
        });
    
        // draw food
        ctx.fillStyle = "red";
        ctx.fillRect(food.x, food.y, tileSize, tileSize);
    
        // update score
        ctx.fillStyle = "black";
        ctx.fillText("Score: " + score, 10, 20);
    }
    
    function update() {
        if (gameover) {
            return;
        }
    
        const head = { x: snake[0].x, y: snake[0].y };
    
        // move the snake
        if (direction === "up") {
            head.y -= tileSize;
        } else if (direction === "down") {
            head.y += tileSize;
        } else if (direction === "left") {
            head.x -= tileSize;
        } else if (direction === "right") {
            head.x += tileSize;
        }
    
        // check if snake eats food
        if (head.x === food.x && head.y === food.y) {
            snake.unshift(head);
            food = generateFoodPosition();
            score++;
        } else {
            snake.pop();
            snake.unshift(head);
        }
    
        // check if snake collides with walls or itself
        if (head.x < 0 || head.x >= canvas.width || head.y < 0 || head.y >= canvas.height
            || snake.slice(1).some(s => s.x === head.x && s.y === head.y)) {
            gameover = true;
        }
    }
    
    function gameLoop() {
        update();
        draw();
    
        if (!gameover) {
            requestAnimationFrame(gameLoop);
        } else {
            ctx.fillText("Game Over! Score: " + score, canvas.width / 2 - 50, canvas.height / 2);
        }
    }
    
    gameLoop();
</script>