AI game creator

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

No:19961

108

←

Prev Next

→

Snake Game
Developer User8856｜Date and time 23/10/7 14:51:50
Build time 18.164 sec｜Game capacity 5.098KB｜

Script

Sure! Here's a simple implementation of the Snake Game in a single HTML file using JavaScript and pictograms:

Make sure to replace `'emozi_all/snake.png'` and `'emozi_all/apple.png'` with the proper image paths for the snake head and apple icons respectively. You can customize the appearance and size of the game board and icons by modifying the provided CSS styles.

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

Sure! Here's a simple implementation of the Snake Game in a single HTML file using JavaScript and pictograms:

```html
<!DOCTYPE html>
<html>
<head>
    <style>
        #game-board {
            width: 300px;
            height: 300px;
            border: 1px solid #000;
            position: relative;
        }

.cell {
            width: 20px;
            height: 20px;
            position: absolute;
        }

#snake-head {
            background-image: url('snake-head.png');
        }

.food {
            background-image: url('apple.png');
        }
    </style>
</head>
<body>
    <div id="game-board"></div>

const gameBoard = document.getElementById("game-board");
            const cells = [];

for (let row = 0; row < boardSize; row++) {
                for (let col = 0; col < boardSize; col++) {
                    const cell = document.createElement("div");
                    cell.className = "cell";
                    cell.style.top = row * 20 + "px";
                    cell.style.left = col * 20 + "px";
                    gameBoard.appendChild(cell);
                    cells.push(cell);
                }
            }

const snakeHead = document.createElement("div");
            snakeHead.id = "snake-head";
            gameBoard.appendChild(snakeHead);

function generateFood() {
                const foodCell = document.createElement("div");
                foodCell.className = "cell food";
                let foodX, foodY;
                do {
                    foodX = Math.floor(Math.random() * boardSize);
                    foodY = Math.floor(Math.random() * boardSize);
                } while (snake.some((part) => part.x === foodX && part.y === foodY));

foodCell.style.top = foodY * 20 + "px";
                foodCell.style.left = foodX * 20 + "px";
                gameBoard.appendChild(foodCell);
                food = { x: foodX, y: foodY };
            }

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

if (head.x < 0 || head.x >= boardSize ||
                    head.y < 0 || head.y >= boardSize ||
                    snake.some((part) => part.x === head.x && part.y === head.y)) {
                    // Game over condition
                    alert("Game over! Your score: " + score);
                    return;
                }

snake.unshift(head);

if (head.x === food.x && head.y === food.y) {
                    // Snake eats the food
                    score++;
                    food.classList.remove("food");
                    generateFood();
                } else {
                    snake.pop();
                }

updateSnake();
            }

function updateSnake() {
                const snakeHead = document.getElementById("snake-head");
                snakeHead.style.top = snake[0].y * 20 + "px";
                snakeHead.style.left = snake[0].x * 20 + "px";

cells.forEach((cell) => {
                    cell.classList.remove("snake");
                });

snake.forEach((part) => {
                    const cellIndex = part.y * boardSize + part.x;
                    cells[cellIndex].classList.add("snake");
                });
            }

generateFood();
            updateSnake();

setInterval(moveSnake, 150);
            document.addEventListener("keydown", handleKeyPress);
        });
    </script>
</body>
</html>
```

Make sure to replace `'snake-head.png'` and `'apple.png'` with the proper image paths for the snake head and apple icons respectively. You can customize the appearance and size of the game board and icons by modifying the provided CSS styles.