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

No:35372

←

Prev Next

→

Ants vs Bees
Developer User16498｜Date and time 24/1/14 8:42:26
Build time 13.148 sec｜Game capacity 4.334KB｜

Script

Sure! Here's a simple implementation of the game "Ants vs Bees" using JavaScript and pictograms within a single HTML file. This game allows you to control an ant colony defending against attacking bees.

Ants vs Bees

In this game, ants are represented by pictograms of ants (`emozi_all/game.png`) and bees are represented by pictograms of bees (`emozi_apple.png`). The ants and bees move horizontally across the game board. The bees move randomly in either direction (left or right), while the ants remain stationary. The game loop continuously moves the bees every second. Please make sure to provide the `emozi_all/ant.png` and `emozi_rabbit.png` pictogram files in the same directory as the HTML file for the game to display them correctly.

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Ants vs Bees</title>
    <style>
        * {
            box-sizing: border-box;
        }

body {
            font-family: Arial, sans-serif;
            text-align: center;
        }

#game-board {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            margin-top: 50px;
        }

.cell {
            width: 50px;
            height: 50px;
            border: 1px solid #ccc;
        }

.ant {
            background: url('ant.png') no-repeat;
            background-size: cover;
        }

.bee {
            background: url('bee.png') no-repeat;
            background-size: cover;
        }
    </style>
    <script>
        // Initial game state
        const gridWidth = 10;
        const gridHeight = 6;
        const initialAntsCount = 10;
        const initialBeesCount = 5;

let ants = [];
        let bees = [];

function createGameBoard() {
            const gameBoard = document.getElementById("game-board");

for (let row = 0; row < gridHeight; row++) {
                for (let col = 0; col < gridWidth; col++) {
                    const cell = document.createElement("div");
                    cell.classList.add("cell");
                    cell.setAttribute("id", `${row}-${col}`);
                    gameBoard.appendChild(cell);
                }
            }
        }

function generateRandomPosition() {
            const row = Math.floor(Math.random() * gridHeight);
            const col = Math.floor(Math.random() * gridWidth);
            return { row, col };
        }

bees.forEach((bee) => {
                const cell = document.getElementById(`${bee.row}-${bee.col}`);
                cell.classList.add("bee");
            });
        }

function moveBees() {
            bees.forEach((bee, index) => {
                const direction = Math.random() < 0.5 ? -1 : 1;
                const newPosition = bee.col + direction;

if (newPosition >= 0 && newPosition < gridWidth) {
                    bees[index].col = newPosition;

const currentCell = document.getElementById(`${bee.row}-${bee.col}`);
                    currentCell.classList.remove("bee");

const newCell = document.getElementById(`${bee.row}-${newPosition}`);
                    newCell.classList.add("bee");
                }
            });
        }

function handleGameLoop() {
            setInterval(() => {
                moveBees();
            }, 1000);
        }

function initGame() {
            createGameBoard();
            createAnts();
            createBees();
            renderGameBoard();
            handleGameLoop();
        }

window.onload = initGame;
    </script>
</head>
<body>
    <h1>Ants vs Bees</h1>
    <div id="game-board"></div>
</body>
</html>
```

In this game, ants are represented by pictograms of ants (`ant.png`) and bees are represented by pictograms of bees (`bee.png`). The ants and bees move horizontally across the game board. The bees move randomly in either direction (left or right), while the ants remain stationary. The game loop continuously moves the bees every second.

Please make sure to provide the `ant.png` and `bee.png` pictogram files in the same directory as the HTML file for the game to display them correctly.