AI game creator

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

No:16573

←

Prev Next

→

Snake Game
Developer User7383｜Date and time 23/9/19 15:12:58
Build time 39.061 sec｜Game capacity 4.601KB｜

Script

Sure! Here's a simple implementation of a Snake Game in a single HTML file using JavaScript:

To play the game, you can open the HTML file on your smartphone and control the snake using the arrow keys. The aim is to eat the food and avoid colliding with the boundaries or the snake's own body.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's a simple implementation of a Snake Game in a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Snake Game</title>
    <style>
        canvas {
            border: 1px solid #000;
            background-color: #f1f1f1;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>

// Set the initial position of the snake and the food
        let snake = [{ x: 200, y: 200 }];
        let food = { x: 100, y: 100 };

// Set the initial direction of the snake
        let direction = "right";

// Function to draw the snake
        function drawSnake() {
            context.fillStyle = "#000";
            context.fillRect(snake[0].x, snake[0].y, 10, 10);
        }

// Function to draw the food
        function drawFood() {
            context.fillStyle = "#f00";
            context.fillRect(food.x, food.y, 10, 10);
        }

// Function to move the snake
        function moveSnake() {
            // Create a new head position based on the current direction
            let newHead = { x: snake[0].x, y: snake[0].y };

if (direction === "right") {
                newHead.x += 10;
            } else if (direction === "left") {
                newHead.x -= 10;
            } else if (direction === "up") {
                newHead.y -= 10;
            } else if (direction === "down") {
                newHead.y += 10;
            }

// Insert the new head at the beginning of the snake array
            snake.unshift(newHead);

// Remove the tail of the snake
            if (snake.length > 1) {
                snake.pop();
            }
        }

// Function to check if the snake has collided with the food or the boundaries
        function checkCollision() {
            // Check if the snake has collided with the food
            if (snake[0].x === food.x && snake[0].y === food.y) {
                // Generate a new random position for the food
                food.x = Math.floor(Math.random() * canvas.width / 10) * 10;
                food.y = Math.floor(Math.random() * canvas.height / 10) * 10;

// Increase the length of the snake
                snake.push({});
            }

// Check if the snake has collided with the boundaries
            if (
                snake[0].x < 0 ||
                snake[0].x >= canvas.width ||
                snake[0].y < 0 ||
                snake[0].y >= canvas.height ||
                checkSelfCollision()
            ) {
                // Game over
                clearInterval(gameLoop);
            }
        }

// Function to check if the snake has collided with itself
        function checkSelfCollision() {
            for (let i = 1; i < snake.length; i++) {
                if (snake[i].x === snake[0].x && snake[i].y === snake[0].y) {
                    return true;
                }
            }
            return false;
        }

// Function to handle the keydown event and change the direction of the snake
        function handleKeyDown(event) {
            if (event.key === "ArrowRight" && direction !== "left") {
                direction = "right";
            } else if (event.key === "ArrowLeft" && direction !== "right") {
                direction = "left";
            } else if (event.key === "ArrowUp" && direction !== "down") {
                direction = "up";
            } else if (event.key === "ArrowDown" && direction !== "up") {
                direction = "down";
            }
        }

// Add the keydown event listener to change the direction of the snake
        document.addEventListener("keydown", handleKeyDown);

// Function to clear the canvas
        function clearCanvas() {
            context.clearRect(0, 0, canvas.width, canvas.height);
        }

// Main game loop
        function gameLoop() {
            clearCanvas();
            moveSnake();
            checkCollision();
            drawSnake();
            drawFood();
        }

// Start the game loop
        const gameInterval = setInterval(gameLoop, 100);
    </script>
</body>
</html>
```

To play the game, you can open the HTML file on your smartphone and control the snake using the arrow keys. The aim is to eat the food and avoid colliding with the boundaries or the snake's own body.