A game where you are a snake and must collect oranges's game

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

No:8295

313

←

Prev Next

→

A game where you are a snake and must collect oran..ALL
Developer User4164｜Date and time 23/7/14 22:11:09
Build time 34.034 sec｜Game capacity 4.528KB｜

Script

Sure! Here's an example of a playable snake game implemented as a single HTML file using JavaScript:

To play the game, save the above code in a file with the extension ".html", then open it in a web browser such as Chrome or Firefox. In the game, you control a snake using the arrow keys on your phone. The objective is to navigate and collect oranges (represented by the orange square) while avoiding collisions with the snake's own body. When the snake collects an orange, it grows longer. If the snake collides with its own body, the game ends and a "Game Over!" alert is shown. You can then click the "OK" button in the alert to start a new game. Note: This implementation assumes that the player will control the snake using arrow keys, which may not be available on all smartphones. Adjustments may be needed to support touch-based controls, depending on the target platform.

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

Sure! Here's an example of a playable snake game implemented as a single HTML file using JavaScript:

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

let gameBoard = document.getElementById('game-board');
        let snakeHead = createSnakeElement('snake-head', 0, 0);
        let orange = createSnakeElement('orange', getRandomPosition(), getRandomPosition());
        let snake = [snakeHead];

gameBoard.appendChild(orange);
        gameBoard.appendChild(snakeHead);

let directionX = 1; // Initial movement to the right
        let directionY = 0;

setInterval(moveSnake, SNAKE_SPEED);

document.addEventListener('keydown', changeDirection);

function moveSnake() {
            const snakeHeadX = snake[0].offsetLeft + (CELL_SIZE * directionX);
            const snakeHeadY = snake[0].offsetTop + (CELL_SIZE * directionY);

snake.unshift(createSnakeElement('snake-body', snakeHeadX, snakeHeadY));
            
            if (snakeHeadX === orange.offsetLeft && snakeHeadY === orange.offsetTop) {
                gameBoard.removeChild(orange);
                orange = createSnakeElement('orange', getRandomPosition(), getRandomPosition());
                gameBoard.appendChild(orange);
            } else {
                gameBoard.removeChild(snake.pop());
            }

for (let i = 0; i < snake.length; i++) {
                if (i === 0 && snakeCollision(snake[i])) {
                    gameover();
                } else {
                    snake[i].style.left = snake[i].offsetLeft + 'px';
                    snake[i].style.top = snake[i].offsetTop + 'px';
                }
            }
        }

function createSnakeElement(className, x, y) {
            let element = document.createElement('div');
            element.className = 'game-element ' + className;
            element.style.left = x + 'px';
            element.style.top = y + 'px';
            return element;
        }

function getRandomPosition() {
            return Math.floor(Math.random() * (BOARD_SIZE / CELL_SIZE)) * CELL_SIZE;
        }

function snakeCollision(element) {
            return element.offsetLeft === snake[0].offsetLeft && element.offsetTop === snake[0].offsetTop;
        }

function gameover() {
            alert('Game Over!');
            location.reload();
        }
    </script>
</body>
</html>
```

To play the game, save the above code in a file with the extension ".html", then open it in a web browser such as Chrome or Firefox.

In the game, you control a snake using the arrow keys on your phone. The objective is to navigate and collect oranges (represented by the orange square) while avoiding collisions with the snake's own body. When the snake collects an orange, it grows longer.

If the snake collides with its own body, the game ends and a "Game Over!" alert is shown. You can then click the "OK" button in the alert to start a new game.

Note: This implementation assumes that the player will control the snake using arrow keys, which may not be available on all smartphones. Adjustments may be needed to support touch-based controls, depending on the target platform.