AI game creator

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

No:49940

←

Prev Next

→

Snake Game
Developer User21175｜Date and time 24/3/6 23:27:09
Build time 12.765 sec｜Game capacity 3.089KB｜

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>
        body { 
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        canvas { 
            background-color: #eee; 
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    
    <script>
        window.onload = function() {
            const canvas = document.getElementById("gameCanvas");
            const ctx = canvas.getContext("2d");

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

function moveSnake() {
                let head = { x: snake[0].x, y: snake[0].y };
                switch(currentDirection) {
                    case "up":
                        head.y -= snakeSpeed;
                        break;
                    case "down":
                        head.y += snakeSpeed;
                        break;
                    case "left":
                        head.x -= snakeSpeed;
                        break;
                    case "right":
                        head.x += snakeSpeed;
                        break;
                }

snake.unshift(head);
                snake.pop();
            }

function changeDirection(newDirection) {
                if ((newDirection === 'up' && currentDirection !== 'down') ||
                    (newDirection === 'down' && currentDirection !== 'up') ||
                    (newDirection === 'left' && currentDirection !== 'right') ||
                    (newDirection === 'right' && currentDirection !== 'left')) {
                    currentDirection = newDirection;
                }
            }

document.addEventListener("keydown", function(e) {
                switch(e.key) {
                    case "ArrowUp":
                        changeDirection("up");
                        break;
                    case "ArrowDown":
                        changeDirection("down");
                        break;
                    case "ArrowLeft":
                        changeDirection("left");
                        break;
                    case "ArrowRight":
                        changeDirection("right");
                        break;
                }
            });

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

setInterval(gameLoop, 1000/10);
        }
    </script>
</body>
</html>