AI game creator

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

No:21716

166

←

Prev Next

→

Snake Game
Developer User10005｜Date and time 23/10/17 19:57:36
Build time 131.41 sec｜Game capacity 5.906KB｜

Script

Sure! Here's a simple implementation of the Snake Game using HTML, CSS, and JavaScript, enclosed in `` tags, all written in a single HTML file: <br><br> <br> <style> #game-board { width: 400px; height: 400px; border: 1px solid #000; margin: 0 auto; position: relative; } .dot { width: 20px; height: 20px; position: absolute; } .snake { background-color: #000; } .food { background-color: #f00; } </style> <div id="game-board"></div>

This implementation creates a game board using a `<div>` element with the id `game-board`. The snake is represented by black dots, the food is represented by red dots, and the player controls the snake's movement using the arrow keys. The game ends when the snake hits the wall or itself, and an alert is displayed with the "Game Over" message. Note: This implementation assumes a fixed size game board of 400x400 pixels. You can modify the size and styling according to your preference.

←

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 HTML, CSS, and JavaScript, enclosed in `<script>` tags, all written in a single HTML file:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Snake Game</title>
    <style>
        #game-board {
            width: 400px;
            height: 400px;
            border: 1px solid #000;
            margin: 0 auto;
            position: relative;
        }
        
        .dot {
            width: 20px;
            height: 20px;
            position: absolute;
        }
        
        .snake {
            background-color: #000;
        }
        
        .food {
            background-color: #f00;
        }
   </style>
</head>
<body>
    <div id="game-board"></div>
    <script>
        // Game settings
        const boardSize = 20; // Size of each square in pixels
        const boardWidth = 400; // Width of the game board in pixels
        const boardHeight = 400; // Height of the game board in pixels
        const snakeSpeed = 200; // Time interval for moving the snake in milliseconds
        
        // Initial game state
        let snake = [{ x: 10, y: 10 }]; // Initial snake position
        let direction = 'right'; // Initial direction of the snake
        let food = {}; // Initial food position
        
        // Game board element
        const gameBoard = document.getElementById('game-board');
        
        // Function to create and render a dot element
        function createDot(className, x, y) {
            const dot = document.createElement('div');
            dot.className = className;
            dot.style.left = (x * boardSize) + 'px';
            dot.style.top = (y * boardSize) + 'px';
            gameBoard.appendChild(dot);
            return dot;
        }
        
        // Function to create and render the snake
        function createSnake() {
            snake.forEach((segment, idx) => {
                const className = idx === 0 ? 'dot snake' : 'dot';
                createDot(className, segment.x, segment.y);
            });
        }
        
        // Function to update the snake position
        function updateSnake() {
            const head = Object.assign({}, snake[0]); // Create a copy of the snake's head
            switch (direction) {
                case 'up':
                    head.y -= 1;
                    break;
                case 'down':
                    head.y += 1;
                    break;
                case 'left':
                    head.x -= 1;
                    break;
                case 'right':
                    head.x += 1;
                    break;
            }
            snake.unshift(head); // Add the new head to the snake
            snake.pop(); // Remove the tail segment
        }
        
        // Function to check if the snake hits the wall or itself
        function checkCollision() {
            const head = snake[0];
            if (head.x < 0 || head.x >= boardWidth / boardSize ||
                head.y < 0 || head.y >= boardHeight / boardSize) {
                return true; // Snake hit the wall
            }
            for (let i = 1; i < snake.length; i++) {
                if (head.x === snake[i].x && head.y === snake[i].y) {
                    return true; // Snake hit itself
                }
            }
            return false; // No collision
        }
        
        // Function to create and render the food
        function createFood() {
            const x = Math.floor(Math.random() * (boardWidth / boardSize));
            const y = Math.floor(Math.random() * (boardHeight / boardSize));
            food = { x, y };
            createDot('dot food', x, y);
        }
        
        // Function to check if the snake ate the food
        function checkFood() {
            const head = snake[0];
            if (head.x === food.x && head.y === food.y) {
                snake.push({}); // Grow the snake
                gameBoard.removeChild(document.querySelector('.food')); // Remove the food
                createFood(); // Create new food
            }
        }
        
        // Function to handle the keydown event
        function handleKeyDown(event) {
            switch (event.key) {
                case 'ArrowUp':
                    if (direction !== 'down') direction = 'up';
                    break;
                case 'ArrowDown':
                    if (direction !== 'up') direction = 'down';
                    break;
                case 'ArrowLeft':
                    if (direction !== 'right') direction = 'left';
                    break;
                case 'ArrowRight':
                    if (direction !== 'left') direction = 'right';
                    break;
            }
        }
        
        // Function to start the game
        function startGame() {
            createSnake();
            createFood();
            document.addEventListener('keydown', handleKeyDown);
            setInterval(() => {
                updateSnake();
                if (checkCollision()) {
                    clearInterval(intervalId);
                    alert('Game Over!');
                }
                checkFood();
                gameBoard.innerHTML = '';
                createSnake();
                createFood();
            }, snakeSpeed);
        }
        
        startGame(); // Start the game
    </script>
</body>
</html>
```

This implementation creates a game board using a `<div>` element with the id `game-board`. The snake is represented by black dots, the food is represented by red dots, and the player controls the snake's movement using the arrow keys. The game ends when the snake hits the wall or itself, and an alert is displayed with the "Game Over" message.

Note: This implementation assumes a fixed size game board of 400x400 pixels. You can modify the size and styling according to your preference.