Zombie vs robot team card raid's game

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

No:29547

←

Prev Next

→

Zombie vs robot team card raid
Developer User13398｜Date and time 23/12/17 13:12:31
Build time 32.603 sec｜Game capacity 4.286KB｜

Script

Zombie Card

Robot Card

In this game, there are two teams, the zombies and the robots. Each team has three cards with different pictograms representing each member of the team. The game randomly selects one card from each team and displays them. The winner is determined based on the index of the selected cards in their respective team arrays. The winner is displayed in the console log. To play the game, simply open the HTML file in a web browser, preferably on a smartphone, and click the "Raid!" button to start the card raid. The chosen cards and the winner will be displayed.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Zombie vs Robot Team Card Raid</title>
    <style>
        body {
            text-align: center;
            font-family: Arial, sans-serif;
        }
        h1 {
            color: #FF4136;
            font-size: 24px;
        }
        .container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .card {
            width: 120px;
            height: 180px;
            border: 2px solid #111;
            border-radius: 10px;
            margin: 10px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background-color: #fff;
        }
        .card img {
            width: 80px;
            height: 80px;
            margin-bottom: 10px;
        }
        .card p {
            margin: 0;
            font-size: 14px;
            color: #000;
        }
        button {
            margin-top: 20px;
            padding: 10px 20px;
            font-size: 16px;
            background-color: #0074D9;
            color: #fff;
            border: none;
            border-radius: 5px;
        }
    </style>
    <script>
        // Card data for the cards
        var zombies = [
            {
                name: "Zombie 1",
                image: "https://image.flaticon.com/icons/svg/189/189001.svg"
            },
            {
                name: "Zombie 2",
                image: "https://image.flaticon.com/icons/svg/189/189002.svg"
            },
            {
                name: "Zombie 3",
                image: "https://image.flaticon.com/icons/svg/189/189003.svg"
            }
        ];

var robots = [
            {
                name: "Robot 1",
                image: "https://image.flaticon.com/icons/svg/1111/1111582.svg"
            },
            {
                name: "Robot 2",
                image: "https://image.flaticon.com/icons/svg/1111/1111583.svg"
            },
            {
                name: "Robot 3",
                image: "https://image.flaticon.com/icons/svg/1111/1111589.svg"
            }
        ];

// Randomly selects a card from the given card array
        function getRandomCard(cards) {
            var randomIndex = Math.floor(Math.random() * cards.length);
            return cards[randomIndex];
        }

// Handles the card raid
        function cardRaid() {
            var zombieCard = getRandomCard(zombies);
            var robotCard = getRandomCard(robots);

// Display the zombie and robot cards
            var zombieCardElement = document.getElementById("zombieCard");
            zombieCardElement.innerHTML = '<img src="' + zombieCard.image + '"><p>' + zombieCard.name + '</p>';
            
            var robotCardElement = document.getElementById("robotCard");
            robotCardElement.innerHTML = '<img src="' + robotCard.image + '"><p>' + robotCard.name + '</p>';

// Check for the winner
            if (zombies.indexOf(zombieCard) > robots.indexOf(robotCard)) {
                console.log("Zombies win!");
            } else if (zombies.indexOf(zombieCard) < robots.indexOf(robotCard)) {
                console.log("Robots win!");
            } else {
                console.log("It's a tie!");
            }
        }
    </script>
</head>
<body>
    <div class="container">
        <div class="card" id="zombieCard">
            <p>Zombie Card</p>
            <button onclick="cardRaid()">Raid!</button>
        </div>
        <div class="card" id="robotCard">
            <p>Robot Card</p>
        </div>
    </div>
</body>
</html>
```

To play the game, simply open the HTML file in a web browser, preferably on a smartphone, and click the "Raid!" button to start the card raid. The chosen cards and the winner will be displayed.