AI game creator

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

No:39705

←

Prev Next

→

Snake Game
Developer User17780｜Date and time 24/1/29 22:22:06
Build time 25.389 sec｜Game capacity 5.038KB｜

Script

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

This implementation creates a canvas element where the snake game is rendered. The player can control the snake's movements using the arrow keys on their smartphone. The objective is to eat the randomly generated fruit while avoiding collisions with the walls or the snake's own body. The game ends when a collision occurs, and the player's score is displayed as an alert.

←

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 in a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Snake Game</title>
    <style>
        /* CSS styles for game canvas */
        #gameCanvas {
            width: 400px;
            height: 400px;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas"></canvas>

// Initialize the game
            function init() {
                canvas = document.getElementById('gameCanvas');
                context = canvas.getContext('2d');
                snake = createSnake();
                fruit = createFruit();

gameLoop = setInterval(update, 100); // Game loop updates every 100ms
            }

// Create initial snake
            function createSnake() {
                return {
                    body: [
                        { x: 9, y: 9 } // Initial position of snake's head
                    ],
                    direction: { x: 1, y: 0 }, // Initial movement direction (right)
                    score: 0
                }
            }

// Create initial fruit
            function createFruit() {
                return {
                    x: Math.floor(Math.random() * 18), // Random x position
                    y: Math.floor(Math.random() * 18) // Random y position
                }
            }

// Update game state
            function update() {
                snake.score++;

// Check for collision with walls or self
                var head = snake.body[0];
                if (head.x < 0 || head.x >= 18 || head.y < 0 || head.y >= 18 || checkCollision()) {
                    clearInterval(gameLoop);
                    alert("Game Over! Your score: " + snake.score);
                    return;
                }

// Move snake
                var newHead = {
                    x: head.x + snake.direction.x,
                    y: head.y + snake.direction.y
                };
                snake.body.unshift(newHead); // Add new head to snake's body

// Check for collision with fruit
                if (head.x === fruit.x && head.y === fruit.y) {
                    fruit = createFruit();
                } else {
                    snake.body.pop(); // Remove tail if no collision with fruit
                }

draw();
            }

// Check for collision with self
            function checkCollision() {
                var head = snake.body[0];
                for (var i = 1; i < snake.body.length; i++) {
                    if (snake.body[i].x === head.x && snake.body[i].y === head.y) {
                        return true;
                    }
                }
                return false;
            }

// Draw game state on canvas
            function draw() {
                // Clear canvas
                context.clearRect(0, 0, canvas.width, canvas.height);

// Draw snake
                context.fillStyle = "#333";
                for (var i = 0; i < snake.body.length; i++) {
                    context.fillRect(snake.body[i].x * 20, snake.body[i].y * 20, 20, 20);
                }

// Draw fruit
                context.fillStyle = "#f00";
                context.fillRect(fruit.x * 20, fruit.y * 20, 20, 20);
            }

// Handle user input
            document.addEventListener('keydown', function (event) {
                // Prevent scrolling on arrow key press
                event.preventDefault();

// Change snake's movement direction based on arrow key pressed
                var direction = event.key.replace('Arrow', '').toLowerCase();
                if (direction === 'up' && snake.direction.y !== 1) {
                    snake.direction = { x: 0, y: -1 };
                } else if (direction === 'down' && snake.direction.y !== -1) {
                    snake.direction = { x: 0, y: 1 };
                } else if (direction === 'left' && snake.direction.x !== 1) {
                    snake.direction = { x: -1, y: 0 };
                } else if (direction === 'right' && snake.direction.x !== -1) {
                    snake.direction = { x: 1, y: 0 };
                }
            });

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