snake but you go slow and you get longer if you eat food's game

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

No:37684

←

Prev Next

→

snake but you go slow and you get longer if you e..ALL
Developer User17003｜Date and time 24/1/21 9:09:36
Build time 17.524 sec｜Game capacity 6.374KB｜

Script

The above HTML file contains a complete implementation of a Snake game that runs on a smartphone. The game is enclosed in `
` tags and utilizes JavaScript for the game logic. The game is played by controlling a snake that moves around the game area. The objective is to eat the red food blocks and grow the snake. The game ends if the snake collides with itself or goes outside the game area. The game runs in a single HTML file and includes pictograms represented by colored blocks for the snake and food. The speed of the snake is controlled, so the player can choose to play at a slower pace.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Slow Snake Game</title>
    <style>
        #game {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: gray;
            margin: auto;
            border: 1px solid black;
            width: 400px;
            height: 400px;
        }
    </style>
</head>
<body>
    <div id="game"></div>

// Game variables
        const gameArea = document.getElementById("game");
        const gridSize = 20;
        const foodSize = 20;
        const snakeSize = 20;
        let gameSize = 400;
        let gameSpeed = 200;
        let gameInterval;
        let direction = "right";
        let snake = [{ top: 0, left: 0 }];
        let food = { top: 0, left: 0 };

// Start the game
        function startGame() {
            createFood();
            createSnake();
            gameInterval = setInterval(moveSnake, gameSpeed);
            document.addEventListener("keydown", changeDirection);
        }

// Create the snake
        function createSnake() {
            for (let i = 0; i < snake.length; i++) {
                let snakeBlock = document.createElement("div");
                snakeBlock.style.position = "absolute";
                snakeBlock.style.width = snakeSize + "px";
                snakeBlock.style.height = snakeSize + "px";
                snakeBlock.style.backgroundColor = "black";
                snakeBlock.style.top = snake[i].top + "px";
                snakeBlock.style.left = snake[i].left + "px";
                gameArea.appendChild(snakeBlock);
            }
        }

// Create the food
        function createFood() {
            food.top = getRandomPosition();
            food.left = getRandomPosition();

let foodBlock = document.createElement("div");
            foodBlock.style.position = "absolute";
            foodBlock.style.width = foodSize + "px";
            foodBlock.style.height = foodSize + "px";
            foodBlock.style.backgroundColor = "red";
            foodBlock.style.top = food.top + "px";
            foodBlock.style.left = food.left + "px";
            gameArea.appendChild(foodBlock);
        }

// Move the snake
        function moveSnake() {
            let head = { top: snake[0].top, left: snake[0].left };

// Update head position based on current direction
            if (direction === "right") {
                head.left += snakeSize;
            } else if (direction === "left") {
                head.left -= snakeSize;
            } else if (direction === "up") {
                head.top -= snakeSize;
            } else if (direction === "down") {
                head.top += snakeSize;
            }

// Check for game over conditions
            if (isCollision(head) || isOutsideGameArea(head)) {
                clearInterval(gameInterval);
                alert("Game Over! Your score is " + (snake.length - 1));
                return;
            }

if (isEatingFood(head)) {
                // Grow the snake
                snake.unshift(head);
                createFood();
            } else {
                // Move the snake
                let tail = snake.pop();
                tail.top = head.top;
                tail.left = head.left;
                snake.unshift(tail);
            }

// Update snake's positions on screen
            updateSnake();
        }

// Update the snake's positions on screen
        function updateSnake() {
            let snakeBlocks = document.querySelectorAll("#game > div");

snakeBlocks.forEach((block, index) => {
                block.style.top = snake[index].top + "px";
                block.style.left = snake[index].left + "px";
            });
        }

// Check if the snake is colliding with itself
        function isCollision(head) {
            for (let i = 1; i < snake.length; i++) {
                if (head.top === snake[i].top && head.left === snake[i].left) {
                    return true;
                }
            }
            return false;
        }

// Check if the snake is outside the game area
        function isOutsideGameArea(head) {
            if (head.top < 0 || head.top >= gameSize || head.left < 0 || head.left >= gameSize) {
                return true;
            }
            return false;
        }

// Check if the snake is eating the food
        function isEatingFood(head) {
            if (head.top === food.top && head.left === food.left) {
                return true;
            }
            return false;
        }

// Change the direction of the snake
        function changeDirection(event) {
            if (event.keyCode === 37 && direction !== "right") { // Left arrow key
                direction = "left";
            } else if (event.keyCode === 38 && direction !== "down") { // Up arrow key
                direction = "up";
            } else if (event.keyCode === 39 && direction !== "left") { // Right arrow key
                direction = "right";
            } else if (event.keyCode === 40 && direction !== "up") { // Down arrow key
                direction = "down";
            }
        }

// Generate random positions for food
        function getRandomPosition() {
            return Math.floor(Math.random() * (gameSize / gridSize)) * gridSize;
        }
    </script>
</body>
</html>
```

The above HTML file contains a complete implementation of a Snake game that runs on a smartphone. The game is enclosed in `<script>` tags and utilizes JavaScript for the game logic.

The game is played by controlling a snake that moves around the game area. The objective is to eat the red food blocks and grow the snake. The game ends if the snake collides with itself or goes outside the game area.

The game runs in a single HTML file and includes pictograms represented by colored blocks for the snake and food. The speed of the snake is controlled, so the player can choose to play at a slower pace.