AI game creator

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

No:36101

←

Prev Next

→

Snake Game
Developer User16745｜Date and time 24/1/16 21:03:35
Build time 21.095 sec｜Game capacity 5.324KB｜

Script

Sure! Here's a simple implementation of the classic Snake Game using HTML, CSS, and JavaScript in a single HTML file:

To play the game, simply open the HTML file in a web browser, and you'll be able to control the snake using the arrow keys on your smartphone. The objective of the game is to eat the red food dots to grow the snake's length, but avoid colliding with the game board boundaries or the snake's own body. The game is implemented using the HTML `<div>` elements to represent the snake and food, and the JavaScript code handles the movement, collision detection, and game logic. Note: This implementation does not include pictograms, but you can customize and enhance the game's appearance by replacing the CSS styles for the snake and food classes with appropriate pictogram images if desired.

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

Sure! Here's a simple implementation of the classic Snake Game using HTML, CSS, and JavaScript in a single HTML file:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Snake Game</title>
    <style>
        #game-board {
            position: relative;
            width: 300px;
            height: 300px;
            border: 1px solid black;
        }
        
        .food {
            position: absolute;
            width: 20px;
            height: 20px;
            background-color: red;
        }
        
        .snake {
            position: absolute;
            width: 20px;
            height: 20px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div id="game-board">
        <div class="food"></div>
        <div class="snake"></div>
    </div>

// Initial snake position
        var snakeX = 0;
        var snakeY = 0;

function startGame() {
            // Generate random food position
            generateFoodPosition();

// Start moving the snake
            intervalId = setInterval(moveSnake, speed);

// Listen for arrow keypress events
            document.addEventListener("keydown", changeDirection);
        }

// Check for collision with food
            if (snakeX === food.offsetLeft && snakeY === food.offsetTop) {
                // Generate new food position
                generateFoodPosition();

// Extend snake length
                var newPart = document.createElement("div");
                newPart.classList.add("snake");
                gameBoard.appendChild(newPart);
            }

// Check for collision with game board boundaries
            if (snakeX < 0 || snakeX >= gameBoard.offsetWidth || snakeY < 0 || snakeY >= gameBoard.offsetHeight) {
                gameOver();
            }

// Check for collision with snake body
            var snakeParts = document.querySelectorAll(".snake");
            for (var i = 1; i < snakeParts.length; i++) {
                if (snakeX === snakeParts[i].offsetLeft && snakeY === snakeParts[i].offsetTop) {
                    gameOver();
                }
            }

// Move the snake
            snake.style.left = snakeX + "px";
            snake.style.top = snakeY + "px";

// Move snake body parts
            var prevPart = snake;
            for (var j = 1; j < snakeParts.length; j++) {
                var currentPart = snakeParts[j];
                var tempX = currentPart.offsetLeft;
                var tempY = currentPart.offsetTop;
                currentPart.style.left = prevPart.offsetLeft + "px";
                currentPart.style.top = prevPart.offsetTop + "px";
                prevPart = currentPart;
            }
        }

function generateFoodPosition() {
            var maxX = gameBoard.offsetWidth - 20;
            var maxY = gameBoard.offsetHeight - 20;
            var foodX = Math.floor(Math.random() * maxX / 20) * 20;
            var foodY = Math.floor(Math.random() * maxY / 20) * 20;

food.style.left = foodX + "px";
            food.style.top = foodY + "px";
        }

function gameOver() {
            clearInterval(intervalId);
            alert("Game Over");
        }

// Start the game
        startGame();
    </script>
</body>
</html>
```

The game is implemented using the HTML `<div>` elements to represent the snake and food, and the JavaScript code handles the movement, collision detection, and game logic.

Note: This implementation does not include pictograms, but you can customize and enhance the game's appearance by replacing the CSS styles for the snake and food classes with appropriate pictogram images if desired.