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

No:42203

←

Prev Next

→

Snake Game
Developer User18831｜Date and time 24/2/11 1:28:52
Build time 16.072 sec｜Game capacity 5.521KB｜

Script

Sure! Here's an implementation of the classic Snake game using HTML, CSS, and JavaScript. It runs as a single HTML file and can be played on a smartphone. The game uses emoji pictograms for the snake and food. Simply copy and paste the code into an HTML file and open it in a web browser to play the game.

Snake Game

To play the game, use the arrow keys or the WASD keys to control the snake. The objective is to eat the food (🍎) to increase your score without hitting the walls or colliding with your own body. The game will display a "Game Over" message with your final score when the game ends.

←

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>
        #game-board {
            display: flex;
            flex-wrap: wrap;
            height: 320px;
            width: 320px;
            border: 2px solid black;
        }

.game-cell {
            height: 20px;
            width: 20px;
        }
    </style>
</head>
<body>
    <h1>Snake Game</h1>
    <div id="game-board"></div>

// Game variables
        let snake = [{ row: 0, col: 0 }];
        let food = { row: 0, col: 0 };
        let direction = { row: 0, col: 1 };
        let interval;
        let score = 0;
        let speed = INITIAL_SPEED;

function drawSnake() {
            const gameCells = document.getElementsByClassName('game-cell');
            for (let i = 0; i < gameCells.length; i++) {
                gameCells[i].innerText = EMPTY_EMOJI;
            }

snake.forEach(segment => {
                const index = (segment.row * BOARD_SIZE) + segment.col;
                gameCells[index].innerText = SNAKE_EMOJI;
            });
        }

function drawFood() {
            const gameCells = document.getElementsByClassName('game-cell');
            const index = (food.row * BOARD_SIZE) + food.col;
            gameCells[index].innerText = FOOD_EMOJI;
        }

function handleKeyPress(event) {
            const key = event.key.toLowerCase();
            const isUpKey = key === 'arrowup' || key === 'w';
            const isDownKey = key === 'arrowdown' || key === 's';
            const isLeftKey = key === 'arrowleft' || key === 'a';
            const isRightKey = key === 'arrowright' || key === 'd';

if (isUpKey && direction.row !== 1) {
                direction = { row: -1, col: 0 };
            } else if (isDownKey && direction.row !== -1) {
                direction = { row: 1, col: 0 };
            } else if (isLeftKey && direction.col !== 1) {
                direction = { row: 0, col: -1 };
            } else if (isRightKey && direction.col !== -1) {
                direction = { row: 0, col: 1 };
            }
        }

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

if (head.row === food.row && head.col === food.col) {
                score++;
                speed -= SPEED_INCREMENT;
                drawFood();
                generateFood();
            } else {
                snake.pop();
            }

if (isOutOfBounds(head) || isCollision()) {
                gameOver();
            } else {
                drawSnake();
            }
        }

function generateFood() {
            let randomRow, randomCol;
            do {
                randomRow = Math.floor(Math.random() * BOARD_SIZE);
                randomCol = Math.floor(Math.random() * BOARD_SIZE);
            } while (isSnakeSegment(randomRow, randomCol));

food = { row: randomRow, col: randomCol };
        }

function isOutOfBounds(segment) {
            return segment.row < 0 || segment.row >= BOARD_SIZE || segment.col < 0 || segment.col >= BOARD_SIZE;
        }

function isSnakeSegment(row, col) {
            return snake.some(segment => segment.row === row && segment.col === col);
        }

function isCollision() {
            return snake.slice(1).some(segment => segment.row === snake[0].row && segment.col === snake[0].col);
        }

function startGame() {
            createGameBoard();
            generateFood();
            drawFood();

interval = setInterval(moveSnake, speed);
            window.addEventListener('keydown', handleKeyPress);
        }

function gameOver() {
            clearInterval(interval);
            window.removeEventListener('keydown', handleKeyPress);

const gameCells = document.getElementsByClassName('game-cell');
            for (let i = 0; i < gameCells.length; i++) {
                gameCells[i].innerText = EMPTY_EMOJI;
            }

alert(`Game Over!\nScore: ${score}`);
        }

startGame();
    </script>
</body>
</html>
```