AI game creator

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

No:42727

113

←

Prev Next

→

Snake Game
Developer User18878｜Date and time 24/2/12 21:35:18
Build time 14.53 sec｜Game capacity 4.335KB｜

Script

Sure! Here's a simple implementation of the snake game using JavaScript and HTML:

This implementation creates a game board in HTML and uses JavaScript to control the game logic. The snake moves on the board and eats food, growing longer. The game ends if the snake collides with the wall or its own body. You can control the snake's direction using the arrow keys.

←

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 snake game using JavaScript and HTML:

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

// Initialize the snake
        const snake = [{ x: 1, y: 1 }];
        let direction = { x: 1, y: 0 }; // Initial direction: right

// Generate food at random position
        let food = generateFood();

// Game loop
        setInterval(() => {
            // Move the snake
            const newHead = { 
                x: snake[0].x + direction.x,
                y: snake[0].y + direction.y
            };
            snake.unshift(newHead);

// Check if snake eats the food
            if (newHead.x === food.x && newHead.y === food.y) {
                // Generate new food
                food = generateFood();
            } else {
                snake.pop();
            }

// Check for game over condition
            if (collision()) {
                clearInterval(gameLoop);
                alert("Game over!");
            }

// Update game board
            render();
        }, 200); // Game speed in milliseconds

// Event listener for key presses
        document.addEventListener('keydown', (event) => {
            if (event.key === "ArrowUp" && direction.y !== 1) {
                direction = { x: 0, y: -1 };
            } else if (event.key === "ArrowDown" && direction.y !== -1) {
                direction = { x: 0, y: 1 };
            } else if (event.key === "ArrowLeft" && direction.x !== 1) {
                direction = { x: -1, y: 0 };
            } else if (event.key === "ArrowRight" && direction.x !== -1) {
                direction = { x: 1, y: 0 };
            }
        });

// Render the snake and food on the game board
        function render() {
            gameBoard.innerHTML = "";

// Render snake
            snake.forEach((segment) => {
                const snakeSegment = document.createElement("div");
                snakeSegment.style.width = gridSize + "px";
                snakeSegment.style.height = gridSize + "px";
                snakeSegment.style.backgroundColor = "green";
                snakeSegment.style.position = "absolute";
                snakeSegment.style.left = segment.x * gridSize + "px";
                snakeSegment.style.top = segment.y * gridSize + "px";
                gameBoard.appendChild(snakeSegment);
            });

// Render food
            const foodElement = document.createElement("div");
            foodElement.style.width = gridSize + "px";
            foodElement.style.height = gridSize + "px";
            foodElement.style.backgroundColor = "red";
            foodElement.style.position = "absolute";
            foodElement.style.left = food.x * gridSize + "px";
            foodElement.style.top = food.y * gridSize + "px";
            gameBoard.appendChild(foodElement);
        }

// Generate food at random position
        function generateFood() {
            const x = Math.floor(Math.random() * gridSize);
            const y = Math.floor(Math.random() * gridSize);
            return { x, y };
        }

// Check for collision with wall or snake body
        function collision() {
            const head = snake[0];

if (
                head.x < 0 ||
                head.x >= gridSize ||
                head.y < 0 ||
                head.y >= gridSize ||
                snake.slice(1).some(segment => segment.x === head.x && segment.y === head.y)
            ) {
                return true;
            }

return false;
        }
    </script>
</body>
</html>
```