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

No:12840

116

←

Prev Next

→

Merge Animal
Developer User5583｜Date and time 23/8/23 23:20:44
Build time 47.175 sec｜Game capacity 4.229KB｜

Script

Merge Animal 游戏

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームアプリランキング

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Merge Animal 游戏</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f5f5f5;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        h1 {
            text-align: center;
            color: #333;
        }
        #game-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            max-width: 300px;
            margin-top: 20px;
            padding: 10px;
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }
        .animal {
            width: 80px;
            height: 80px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 40px;
            background-color: #f8f8f8;
            margin: 5px;
            border-radius: 5px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
            cursor: pointer;
            transition: all 0.3s ease-in-out;
        }
        .animal:hover {
            background-color: #eaeaea;
        }
        .result {
            width: 100%;
            text-align: center;
            margin-top: 20px;
            font-size: 24px;
        }
    </style>
</head>
<body>
    <h1>Merge Animal 游戏</h1>
    <div id="game-container"></div>
    <div class="result"></div>

// Create initial animals randomly
        for (let i = 0; i < 9; i++) {
            let animal = document.createElement("div");
            animal.classList.add("animal");
            animal.textContent = getRandomAnimal();
            gameContainer.appendChild(animal);
        }

// Add click event listener to each animal
        let animalsElements = document.querySelectorAll(".animal");
        animalsElements.forEach(animal => {
            animal.addEventListener("click", mergeAnimals);
        });

function getRandomAnimal() {
            return animals[Math.floor(Math.random() * animals.length)];
        }

function mergeAnimals() {
            let selectedAnimals = Array.from(animalsElements).filter(animal => animal.classList.contains("selected"));

if (selectedAnimals.length === 2) {
                let firstAnimal = selectedAnimals[0].textContent.trim();
                let secondAnimal = selectedAnimals[1].textContent.trim();
                let mergedAnimal = merge(firstAnimal, secondAnimal);

if (mergedAnimal) {
                    selectedAnimals[0].textContent = mergedAnimal;
                    selectedAnimals[1].textContent = mergedAnimal;
                    selectedAnimals.forEach(animal => animal.classList.remove("selected"));

// Check if all animals are the same (win condition)
                    if (Array.from(animalsElements).every(animal => animal.textContent.trim() === mergedAnimal)) {
                        resultElement.textContent = `你赢了！你成功合并了所有的 ${mergedAnimal}! 🎉`;
                        animalsElements.forEach(animal => {
                            animal.classList.remove("animal");
                            animal.classList.add("merged-animal");
                        });
                    }
                } else {
                    resultElement.textContent = "合并出错，请尝试其他组合！";
                }
            } else {
                this.classList.toggle("selected");
            }
        }

function merge(animal1, animal2) {
            if (animal1 === animal2) {
                return animal1;
            } else {
                return null;
            }
        }
    </script>
</body>
</html>