AI game creator

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

No:42728

114

←

Prev Next

→

Snake Game
Developer User18878｜Date and time 24/2/12 21:35:42
Build time 14.829 sec｜Game capacity 4.68KB｜

Script

Here's an example of a simple Snake Game implemented in a single HTML file using JavaScript. The game can be played on a smartphone. Please note that this is just a basic version and can be further enhanced with additional features and styling.

To play the game, you can save the above code into a file with the `.html` extension and open it in a web browser on your smartphone. The game board will be displayed, and you can then use the arrow keys on your smartphone's keyboard to control the snake and try to eat the red food while avoiding collision with the snake's body or the game board boundaries. Please note that this is a basic implementation, and you can customize it further as per your requirements, adding different features, levels, or styling to enhance the gameplay experience.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
    <style>
        #game-board {
            width: 300px;
            height: 300px;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <div id="game-board"></div>

// Game variables
        var gameBoard = document.getElementById("game-board");
        var ctx = gameBoard.getContext("2d");
        var tileSize = 20;
        var totalTiles = 15;
        var snake = [{ x: 7, y: 7 }];
        var food = { x: 10, y: 10 };
        var velocity = { x: 0, y: 0 };
        var score = 0;

// Game initialization
        function initializeGame() {
            document.addEventListener("keydown", handleKeyPress);
            setInterval(gameLoop, 100);
        }

// Game loop
        function gameLoop() {
            clearCanvas();
            moveSnake();
            drawSnake();
            drawFood();
            checkGameRules();
        }

// Draw the snake on the canvas
        function drawSnake() {
            ctx.fillStyle = "green";
            snake.forEach(function (segment) {
                ctx.fillRect(segment.x * tileSize, segment.y * tileSize, tileSize, tileSize);
            });
        }

// Draw the food on the canvas
        function drawFood() {
            ctx.fillStyle = "red";
            ctx.fillRect(food.x * tileSize, food.y * tileSize, tileSize, tileSize);
        }

// Clear the canvas
        function clearCanvas() {
            ctx.clearRect(0, 0, gameBoard.width, gameBoard.height);
        }

// Move the snake
        function moveSnake() {
            var snakeHead = { x: snake[0].x + velocity.x, y: snake[0].y + velocity.y };
            snake.unshift(snakeHead);
            if (snakeHead.x === food.x && snakeHead.y === food.y) {
                score += 10;
                generateFood();
            } else {
                snake.pop();
            }
        }

// Generate new food at random position
        function generateFood() {
            food.x = Math.floor(Math.random() * totalTiles);
            food.y = Math.floor(Math.random() * totalTiles);
        }

// Check game rules (collision, out of bounds)
        function checkGameRules() {
            var snakeHead = snake[0];
            if (
                snakeHead.x < 0 ||
                snakeHead.x >= totalTiles ||
                snakeHead.y < 0 ||
                snakeHead.y >= totalTiles ||
                checkSnakeCollision()
            ) {
                alert("Game Over!");
                resetGame();
            }
        }

// Check if snake collided with itself
        function checkSnakeCollision() {
            var snakeHead = snake[0];
            for (var i = 1; i < snake.length; i++) {
                if (snake[i].x === snakeHead.x && snake[i].y === snakeHead.y) {
                    return true;
                }
            }
            return false;
        }

// Handle key press for controlling snake movement
        function handleKeyPress(e) {
            switch (e.keyCode) {
                case 37:
                    velocity = { x: -1, y: 0 }; // Left
                    break;
                case 38:
                    velocity = { x: 0, y: -1 }; // Up
                    break;
                case 39:
                    velocity = { x: 1, y: 0 }; // Right
                    break;
                case 40:
                    velocity = { x: 0, y: 1 }; // Down
                    break;
            }
        }

// Reset the game
        function resetGame() {
            snake = [{ x: 7, y: 7 }];
            score = 0;
            velocity = { x: 0, y: 0 };
            generateFood();
        }

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

Please note that this is a basic implementation, and you can customize it further as per your requirements, adding different features, levels, or styling to enhance the gameplay experience.