AI game creator

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

No:10814

←

Prev Next

→

Snake Game
Developer User4570｜Date and time 23/8/3 7:26:01
Build time 34.116 sec｜Game capacity 4.797KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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;
        }
    </style>
</head>
<body>
    <canvas id="snakeGameCanvas" width="400" height="400"></canvas>

// Main game loop
        function gameLoop() {
            draw();
            move();
            checkCollision();
            setTimeout(gameLoop, 200);
        }

gameLoop();

// Drawing the snake, apple, and score
        function draw() {
            // Clear canvas
            context.clearRect(0, 0, canvas.width, canvas.height);

// Draw snake
            for (var i = 0; i < snake.length; i++) {
                context.fillStyle = "green";
                context.fillRect(snake[i].x, snake[i].y, gridSize, gridSize);
            }

// Draw apple
            context.fillStyle = "red";
            context.fillRect(apple.x, apple.y, gridSize, gridSize);
            
            // Draw score
            context.font = "16px Arial";
            context.fillText("Score: " + score, 10, 20);
        }

// Moving the snake
        function move() {
            var head = { x: snake[0].x, y: snake[0].y };
            
            if (movingDirection === "right") {
                head.x += gridSize;
            } else if (movingDirection === "left") {
                head.x -= gridSize;
            } else if (movingDirection === "up") {
                head.y -= gridSize;
            } else if (movingDirection === "down") {
                head.y += gridSize;
            }
            
            snake.unshift(head);

if (snake[0].x === apple.x && snake[0].y === apple.y) {
                score++;
                generateNewApple();
            } else {
                snake.pop();
            }
        }

// Changing the direction of the snake
        function changeDirection(event) {
            var keyPressed = event.keyCode;
            var validDirections = ["up", "down", "right", "left"];
            
            if (validDirections.includes(keyPressed)) {
                if (keyPressed === "up" && movingDirection !== "down") {
                    movingDirection = "up";
                } else if (keyPressed === "down" && movingDirection !== "up") {
                    movingDirection = "down";
                } else if (keyPressed === "right" && movingDirection !== "left") {
                    movingDirection = "right";
                } else if (keyPressed === "left" && movingDirection !== "right") {
                    movingDirection = "left";
                }
            }
        }

// Checking collision with walls or self
        function checkCollision() {
            var head = snake[0];

if (head.x < 0 || head.x >= canvas.width || 
                head.y < 0 || head.y >= canvas.height || 
                isSnakeCollidingWithSelf()) {
                alert("Game Over! Final score: " + score);
                resetGame();
            }
        }

// Checking collision with self
        function isSnakeCollidingWithSelf() {
            var head = snake[0];
            
            for (var i = 1; i < snake.length; i++) {
                if (snake[i].x === head.x && snake[i].y === head.y) {
                    return true;
                }
            }
            
            return false;
        }

// Generating a new apple randomly
        function generateNewApple() {
            apple.x = Math.floor(Math.random() * gridCount) * gridSize;
            apple.y = Math.floor(Math.random() * gridCount) * gridSize;
        }

// Resetting the game
        function resetGame() {
            snake = [
                { x: gridCount / 2 * gridSize, y: gridCount / 2 * gridSize }
            ];
            
            apple = {
                x: Math.floor(Math.random() * gridCount) * gridSize,
                y: Math.floor(Math.random() * gridCount) * gridSize
            };
            
            score = 0;
            movingDirection = "right";
        }
    </script>
</body>
</html>