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

No:21710

129

←

Prev Next

→

Snake Game
Developer User10001｜Date and time 23/10/17 18:40:54
Build time 151.366 sec｜Game capacity 5.569KB｜

Script

Sure! Here's an example of a simple Snake Game implemented as a single HTML file using JavaScript. It will run on a smartphone and use pictograms for display. Please note that this is a basic implementation and can be improved upon.

Snake Game

To play the game: - Open a new text file. - Copy and paste the code above into the text file. - Save the file with a .html extension (e.g., snake_game.html). - Open the saved file using a web browser on your smartphone. - You should see the Snake Game and can use the arrow keys to control the snake. Please note that this is a basic implementation and there are many ways to enhance and improve the game.

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Snake Game</title>
    <style>
        body {
            text-align: center;
            margin-top: 20vh;
        }

#game-board {
            width: 300px;
            height: 300px;
            margin: 0 auto;
            border: 1px solid black;
        }

.cell {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 1px solid gray;
        }
    </style>
</head>
<body>
    <h1>Snake Game</h1>
    <div id="game-board">
        
    </div>
    <script>
        // Game variables
        var gridSize = 15;  // Number of cells in each row/column
        var cellSize = 20;  // Size of each cell in pixels
        var snake = [{ x: 7, y: 7 }];  // Initial snake position
        var direction = 'right';  // Initial direction of the snake
        var food = { x: 3, y: 5 };  // Initial food position

// Create game board
        var gameBoard = document.getElementById('game-board');
        for (var i = 0; i < gridSize; i++) {
            for (var j = 0; j < gridSize; j++) {
                var cell = document.createElement('div');
                cell.className = 'cell';
                cell.id = 'cell-' + i + '-' + j;
                gameBoard.appendChild(cell);
            }
            gameBoard.innerHTML += '<br>';
        }

// Update snake position
        function updateSnake() {
            var head = { x: snake[0].x, y: snake[0].y };

// Move snake in the current direction
            if (direction === 'up') head.y--;
            else if (direction === 'down') head.y++;
            else if (direction === 'left') head.x--;
            else if (direction === 'right') head.x++;

// Check if snake touches the wall or itself
            if (head.x < 0 || head.y < 0 || head.x >= gridSize || head.y >= gridSize || isSnake(head)) {
                alert('Game Over!');
                location.reload();
            }

// Check if snake eats the food
            if (head.x === food.x && head.y === food.y) {
                // Increase length of snake
                snake.push({});
                generateFood();
            }

// Move the snake
            for (var i = snake.length - 1; i >= 1; i--) {
                snake[i].x = snake[i - 1].x;
                snake[i].y = snake[i - 1].y;
            }
            snake[0] = head;

// Redraw the snake
            redrawSnake();

// Call updateSnake() recursively every 200ms
            setTimeout(updateSnake, 200);
        }

// Redraw the snake on the game board
        function redrawSnake() {
            var cells = document.getElementsByClassName('cell');

// Reset all cells
            for (var i = 0; i < cells.length; i++) {
                cells[i].style.backgroundColor = '';
            }

// Draw snake
            for (var i = 0; i < snake.length; i++) {
                var x = snake[i].x;
                var y = snake[i].y;
                var cellId = 'cell-' + x + '-' + y;
                var cell = document.getElementById(cellId);
                if (cell) {
                    cell.style.backgroundColor = 'green';
                }
            }

// Draw food
            var foodCell = document.getElementById('cell-' + food.x + '-' + food.y);
            if (foodCell) {
                foodCell.style.backgroundColor = 'red';
            }
        }

// Generate new food position
        function generateFood() {
            var emptyCells = [];

for (var i = 0; i < gridSize; i++) {
                for (var j = 0; j < gridSize; j++) {
                    var cellId = 'cell-' + i + '-' + j;
                    var cell = document.getElementById(cellId);
                    if (cell && cell.style.backgroundColor === '') {
                        emptyCells.push({ x: i, y: j });
                    }
                }
            }

// Randomly select an empty cell
            var randomIndex = Math.floor(Math.random() * emptyCells.length);
            food = emptyCells[randomIndex];
        }

// Listen to arrow key events for changing direction
        document.addEventListener('keydown', function(event) {
            if (event.key === 'ArrowUp' && direction !== 'down') {
                direction = 'up';
            } else if (event.key === 'ArrowDown' && direction !== 'up') {
                direction = 'down';
            } else if (event.key === 'ArrowLeft' && direction !== 'right') {
                direction = 'left';
            } else if (event.key === 'ArrowRight' && direction !== 'left') {
                direction = 'right';
            }
        });

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

To play the game:
- Open a new text file.
- Copy and paste the code above into the text file.
- Save the file with a .html extension (e.g., snake_game.html).
- Open the saved file using a web browser on your smartphone.
- You should see the Snake Game and can use the arrow keys to control the snake.

Please note that this is a basic implementation and there are many ways to enhance and improve the game.