AI game creator

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

No:42228

←

Prev Next

→

Snake Game
Developer User18840｜Date and time 24/2/11 5:36:18
Build time 14.932 sec｜Game capacity 6.293KB｜

Script

Sure! Here's an example of a simple Snake Game implemented as a single HTML file with JavaScript code enclosed in script tags. This implementation assumes smartphone operation and uses pictograms for the snake and food.

This HTML file creates a game board where the snake moves and eats food. The snake, represented by a head pictogram, grows in size every time it eats food. When the snake touches the boundaries of the game board or collides with itself, the game is over, and the player is alerted with their final score. They can then start a new game by pressing any arrow key.

←

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;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

.cell {
            width: 30px;
            height: 30px;
        }

#snake-head {
            background-image: url('https://image.flaticon.com/icons/svg/201/201934.svg');
            background-size: cover;
        }
        
        .food {
            background-image: url('https://image.flaticon.com/icons/svg/1397/1397894.svg');
            background-size: cover;
        }
    </style>
</head>
<body>
    <div id="game-board"></div>

let snake = [{ row: 0, column: 0 }];
            let food = {};

function createCells() {
                for (let i = 0; i < boardSize.rows; i++) {
                    const row = document.createElement('div');
                    row.classList.add('row');

for (let j = 0; j < boardSize.columns; j++) {
                        const cell = document.createElement('div');
                        cell.classList.add('cell');
                        row.appendChild(cell);
                        cells.push(cell);
                    }

board.appendChild(row);
                }
            }

function updateCell(row, column, value) {
                const index = row * boardSize.columns + column;
                cells[index].className = value;
            }

function generateFood() {
                const row = Math.floor(Math.random() * boardSize.rows);
                const column = Math.floor(Math.random() * boardSize.columns);
                food = { row, column };
                updateCell(row, column, 'cell food');
            }

function moveSnake() {
                const head = Object.assign({}, snake[0]);
                switch (direction) {
                    case "up":
                        head.row--;
                        break;
                    case "down":
                        head.row++;
                        break;
                    case "left":
                        head.column--;
                        break;
                    case "right":
                        head.column++;
                        break;
                }

snake.unshift(head);
                if (head.row === food.row && head.column === food.column) {
                    generateFood();
                } else {
                    const tail = snake.pop();
                    updateCell(tail.row, tail.column, 'cell');
                }

if (isGameOver()) {
                    clearInterval(gameInterval);
                    alert('Game Over! Your score: ' + (snake.length - 1));
                    startGame();
                } else {
                    updateSnake();
                }
            }

function isGameOver() {
                const head = snake[0];
                return (
                    head.row < 0 ||
                    head.row >= boardSize.rows ||
                    head.column < 0 ||
                    head.column >= boardSize.columns ||
                    snake.some((segment, index) => index !== 0 && segment.row === head.row && segment.column === head.column)
                );
            }

function handleKeyPress(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 startGame() {
                board.innerHTML = '';
                snake = [{ row: 0, column: 0 }];
                clearSnake();
                createCells();
                generateFood();
                updateSnake();
                direction = 'right';
                gameInterval = setInterval(moveSnake, 200);
            }

// Initialize game
            startGame();

// Add event listener for key press
            document.addEventListener('keydown', handleKeyPress);
        });
    </script>
</body>
</html>
```