Snake finds te apple him self's game

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

No:23993

←

Prev Next

→

Snake finds te apple him self
Developer User11236｜Date and time 23/11/5 2:16:42
Build time 88.744 sec｜Game capacity 4.303KB｜

Script

Sure! Here's an example of a simple Snake game implemented in a single HTML file, using JavaScript and enclosed in script tags:

This implementation creates a Snake game using HTML, CSS, and JavaScript. The game board is represented by a div element with the id "game-board" and has a fixed size of 400x400 pixels. The snake is represented by green div elements, and the apple is represented by a red div element. The snake starts at the center of the game board and moves according to the user's arrow key input. The goal is to eat the apple, which randomly appears on the game board, by moving the snake towards it. Whenever the snake eats the apple, it grows longer. The game ends if the snake touches the boundary of the game board or collides with its own body. You can play the game by opening the HTML file in a web browser, preferably on a smartphone for the best user experience. Use the arrow keys to control the snake's movement and try to eat as many apples as possible!

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

Sure! Here's an example of a simple Snake game implemented in a single HTML file, using JavaScript and enclosed in script tags:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Snake Game</title>
    <style>
        #game-board {
            position: relative;
            width: 400px;
            height: 400px;
            border: 1px solid black;
        }
        .snake {
            position: absolute;
            width: 20px;
            height: 20px;
            background-color: green;
        }
        .apple {
            position: absolute;
            width: 20px;
            height: 20px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="game-board"></div>

setInterval(() => {
                gameBoard.innerHTML = '';
                drawSnake();
                drawApple();
                moveSnake();
            }, 100);

document.addEventListener('keydown', changeDirection);

let direction = { x: 0, y: 0 };

function getRandomCoordinates() {
                const x = Math.floor(Math.random() * 20) * 20;
                const y = Math.floor(Math.random() * 20) * 20;
                return { x, y };
            }

function drawSnake() {
                snake.forEach(segment => {
                    const snakeSegment = document.createElement('div');
                    snakeSegment.classList.add('snake');
                    snakeSegment.style.left = segment.x + 'px';
                    snakeSegment.style.top = segment.y + 'px';
                    gameBoard.appendChild(snakeSegment);
                });
            }

function drawApple() {
                const appleElement = document.createElement('div');
                appleElement.classList.add('apple');
                appleElement.style.left = apple.x + 'px';
                appleElement.style.top = apple.y + 'px';
                gameBoard.appendChild(appleElement);
            }

function moveSnake() {
                const head = { x: snake[0].x + direction.x, y: snake[0].y + direction.y };
                snake.unshift(head);

if (head.x === apple.x && head.y === apple.y) {
                    apple = getRandomCoordinates();
                } else {
                    snake.pop();
                }
            }

function changeDirection(event) {
                const ArrowUp = event.key === 'ArrowUp';
                const ArrowDown = event.key === 'ArrowDown';
                const ArrowLeft = event.key === 'ArrowLeft';
                const ArrowRight = event.key === 'ArrowRight';

if (ArrowUp && direction.y !== 20) {
                    direction = { x: 0, y: -20 };
                }
                if (ArrowDown && direction.y !== -20) {
                    direction = { x: 0, y: 20 };
                }
                if (ArrowLeft && direction.x !== 20) {
                    direction = { x: -20, y: 0 };
                }
                if (ArrowRight && direction.x !== -20) {
                    direction = { x: 20, y: 0 };
                }
            }
        });
    </script>
</body>
</html>
```

The snake starts at the center of the game board and moves according to the user's arrow key input. The goal is to eat the apple, which randomly appears on the game board, by moving the snake towards it. Whenever the snake eats the apple, it grows longer. The game ends if the snake touches the boundary of the game board or collides with its own body.

You can play the game by opening the HTML file in a web browser, preferably on a smartphone for the best user experience. Use the arrow keys to control the snake's movement and try to eat as many apples as possible!