AI game creator

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

No:23589

←

Prev Next

→

Snake Game
Developer User11012｜Date and time 23/11/1 23:05:28
Build time 68.201 sec｜Game capacity 4.849KB｜

Script

Sure! Here's a basic implementation of the Snake game using JavaScript enclosed in script tags within a single HTML file:

To play the game, copy and paste the above code into a new HTML file, save it with a .html extension (e.g., snake_game.html), and open it in a browser. The game can be played on a smartphone by tapping the screen to start and using the arrow keys (or arrow buttons on the screen) to control the snake's movement. The objective is to eat the red food without hitting the walls 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 basic implementation of the Snake game using JavaScript enclosed in script tags within a single HTML file:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Snake Game</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas> 
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            var canvas = document.getElementById("gameCanvas");
            var ctx = canvas.getContext("2d");
            
            // Initialize initial snake position and speed
            var snakeSize = 20;
            var snake = [];
            var snakeLength = 1;
            var snakeX = canvas.width / 2;
            var snakeY = canvas.height / 2;
            var speed = 1;
            var direction = "right";
            
            // Initialize food position
            var foodX;
            var foodY;
            
            // Generate random food position
            function generateFoodPosition() {
                foodSize = 20;
                foodX = Math.floor(Math.random() * (canvas.width / foodSize)) * foodSize;
                foodY = Math.floor(Math.random() * (canvas.height / foodSize)) * foodSize;
            }
            
            // Update snake position
            function updateSnakePosition() {
                // Remove tail segment if snake is longer than allowed
                if (snake.length > snakeLength) {
                    snake.shift();
                }
                
                // Update snake position based on current direction
                if (direction === "up") snakeY -= snakeSize;
                if (direction === "down") snakeY += snakeSize;
                if (direction === "left") snakeX -= snakeSize;
                if (direction === "right") snakeX += snakeSize;
                
                // Check if snake consumes the food
                if (snakeX === foodX && snakeY === foodY) {
                    snakeLength++;
                    generateFoodPosition();
                }
                
                // Check collision with walls
                if (snakeX < 0 || snakeX >= canvas.width || snakeY < 0 || snakeY >= canvas.height) {
                    gameOver();
                }
                
                // Check collision with own body
                for (var i = 0; i < snake.length; i++) {
                    if (snake[i].x === snakeX && snake[i].y === snakeY) {
                        gameOver();
                    }
                }
                
                // Add current snake position to the front of the snake array
                snake.push({ x: snakeX, y: snakeY });
            }
            
            // Draw snake and food on the canvas
            function draw() {
                // Clear canvas
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                
                // Draw snake
                for (var i = 0; i < snake.length; i++) {
                    ctx.fillStyle = "#FFFFFF";
                    ctx.fillRect(snake[i].x, snake[i].y, snakeSize, snakeSize);
                }
                
                // Draw food
                ctx.fillStyle = "#FF0000";
                ctx.fillRect(foodX, foodY, foodSize, foodSize);
            }
            
            // Handle key press events to change snake's direction
            document.addEventListener("keydown", function(event) {
                if (event.keyCode === 38 && direction !== "down") direction = "up";
                if (event.keyCode === 40 && direction !== "up") direction = "down";
                if (event.keyCode === 37 && direction !== "right") direction = "left";
                if (event.keyCode === 39 && direction !== "left") direction = "right";
            });
            
            // End the game
            function gameOver() {
                clearInterval(gameLoop);
                alert("Game Over!");
                location.reload(); // Restart the game
            }
            
            // Game loop
            function gameLoop() {
                updateSnakePosition();
                draw();
            }
            
            // Initialize game
            generateFoodPosition();
            var gameLoop = setInterval(gameLoop, 1000 / speed);
        });
    </script>
</body>
</html>
```