🎮ArcadeLab

Superhero City Battle

by SilverTiger54
658 lines10.0 KB
▶ Play
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Superhero City Battle</title>

<style>
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial, sans-serif;
    color: white;
    text-align: center;
    background: #07111f;
}

header {
    padding: 15px;
    background: #080808;
    border-bottom: 3px solid #ffd000;
}

h1 {
    margin: 5px;
    color: #ffd000;
    text-shadow: 0 0 12px #ff8c00;
}

#city {
    min-height: 100vh;
    padding: 20px;

    background:
        linear-gradient(to bottom,
        #17294d 0%,
        #314d70 45%,
        #151515 45%,
        #090909 100%);
}

.buildings {
    display: flex;
    justify-content: center;
    align-items: end;
    gap: 8px;
    height: 100px;
    margin-bottom: 20px;
}

.building {
    width: 55px;
    background: #202a38;
    border: 2px solid #111;
}

.b1 { height: 60px; }
.b2 { height: 90px; }
.b3 { height: 75px; }
.b4 { height: 110px; }
.b5 { height: 70px; }
.b6 { height: 100px; }

.windows {
    color: #ffd84d;
    font-size: 12px;
    line-height: 20px;
}

#selection {
    max-width: 800px;
    margin: auto;
}

.hero-container {
    display: flex;
    justify-content: center;
    gap: 25px;
    flex-wrap: wrap;
}

.hero-card {
    width: 220px;
    padding: 20px;
    background: rgba(0,0,0,0.65);
    border: 3px solid #555;
    border-radius: 20px;
    cursor: pointer;
    transition: 0.2s;
}

.hero-card:hover {
    transform: scale(1.05);
    border-color: #ffd000;
}

.hero-icon {
    font-size: 80px;
}

.hero-card.selected {
    border-color: #00eaff;
    box-shadow: 0 0 25px #00eaff;
}

button {
    padding: 13px 20px;
    margin: 6px;
    border: none;
    border-radius: 12px;
    background: #ffd000;
    color: #111;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
}

button:hover {
    transform: scale(1.06);
}

#battle {
    display: none;
}

.arena {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 15px;
    max-width: 1000px;
    margin: auto;
}

.fighter {
    width: 35%;
    min-width: 230px;
    padding: 15px;
    background: rgba(0,0,0,0.72);
    border-radius: 20px;
    border: 2px solid #555;
}

.fighter-icon {
    font-size: 90px;
}

.health-bar {
    height: 25px;
    background: #333;
    border-radius: 20px;
    overflow: hidden;
}

.health {
    height: 100%;
    transition: 0.4s;
}

#heroHealth {
    width: 100%;
    background: #20d85a;
}

#thanosHealth {
    width: 100%;
    background: #9b42ff;
}

#message {
    min-height: 35px;
    font-size: 20px;
    font-weight: bold;
    margin: 15px;
}

#restart {
    display: none;
    background: #00d9ff;
}

#attackButtons {
    margin-top: 15px;
}

@media(max-width:650px) {
    .arena {
        flex-direction: column;
    }

    .fighter {
        width: 85%;
    }
}
</style>
</head>

<body>

<header>
    <h1>🏙️ SUPERHERO CITY BATTLE 🏙️</h1>
    <p>Defend the city from the Titan!</p>
</header>

<div id="city">

    <!-- CITY -->
    <div class="buildings">

        <div class="building b1">
            <div class="windows">▪<br>▪<br>▪</div>
        </div>

        <div class="building b2">
            <div class="windows">▪<br>▪<br>▪<br>▪</div>
        </div>

        <div class="building b3">
            <div class="windows">▪<br>▪<br>▪</div>
        </div>

        <div class="building b4">
            <div class="windows">▪<br>▪<br>▪<br>▪<br>▪</div>
        </div>

        <div class="building b5">
            <div class="windows">▪<br>▪<br>▪</div>
        </div>

        <div class="building b6">
            <div class="windows">▪<br>▪<br>▪<br>▪</div>
        </div>

    </div>


    <!-- HERO SELECTION -->

    <div id="selection">

        <h2>🦸 Choose Your Hero</h2>

        <div class="hero-container">

            <div class="hero-card"
                 onclick="selectHero('Spider-Man','🕷️',110,25,this)">

                <div class="hero-icon">🕷️</div>

                <h2>Spider-Man</h2>

                <p>❤️ Health: 110</p>
                <p>⚔️ Attack: 25</p>

            </div>


            <div class="hero-card"
                 onclick="selectHero('Iron Man','🤖',100,30,this)">

                <div class="hero-icon">🤖</div>

                <h2>Iron Man</h2>

                <p>❤️ Health: 100</p>
                <p>⚔️ Attack: 30</p>

            </div>

        </div>

        <br>

        <button onclick="startBattle()">
            ⚔️ START BATTLE
        </button>

    </div>


    <!-- BATTLE -->

    <div id="battle">

        <h2>⚠️ THREAT DETECTED!</h2>

        <div class="arena">

            <!-- PLAYER -->

            <div class="fighter">

                <h2 id="heroName">Hero</h2>

                <div class="fighter-icon"
                     id="heroIcon">🦸</div>

                <div class="health-bar">

                    <div class="health"
                         id="heroHealth"></div>

                </div>

                <p id="heroHP">HP: 100</p>

            </div>


            <h1>⚡ VS ⚡</h1>


            <!-- THANOS -->

            <div class="fighter">

                <h2>🟣 Thanos</h2>

                <div class="fighter-icon">🟣</div>

                <div class="health-bar">

                    <div class="health"
                         id="thanosHealth"></div>

                </div>

                <p id="thanosHP">HP: 250</p>

            </div>

        </div>


        <div id="attackButtons">

            <button onclick="attack()">
                👊 Attack
            </button>

            <button onclick="specialAttack()">
                💥 Special Attack
            </button>

            <button onclick="heal()">
                ❤️ Heal
            </button>

        </div>


        <div id="message">
            Thanos has arrived! Protect the city!
        </div>

        <h2 id="score">⭐ Score: 0</h2>

        <button id="restart"
                onclick="location.reload()">
            🔄 Play Again
        </button>

    </div>

</div>


<script>

let hero = null;

let heroHP = 100;
let thanosHP = 250;

let score = 0;

let gameOver = false;

let playerTurn = true;


// SELECT HERO

function selectHero(name, icon, health, attackPower, element) {

    document
    .querySelectorAll(".hero-card")
    .forEach(card => {

        card.classList.remove("selected");

    });

    element.classList.add("selected");

    hero = {

        name: name,

        icon: icon,

        health: health,

        attack: attackPower

    };

}


// START BATTLE

function startBattle() {

    if (!hero) {

        alert("Choose Spider-Man or Iron Man first!");

        return;

    }

    heroHP = hero.health;

    thanosHP = 250;

    score = 0;

    gameOver = false;

    document.getElementById("selection")
        .style.display = "none";

    document.getElementById("battle")
        .style.display = "block";

    document.getElementById("heroName")
        .textContent = hero.name;

    document.getElementById("heroIcon")
        .textContent = hero.icon;

    message(
        "🟣 THANOOS HAS ARRIVED! DEFEND THE CITY!"
    );

    update();

}


// NORMAL ATTACK

function attack() {

    if (gameOver) return;

    let damage =
        Math.floor(
            hero.attack *
            (0.8 + Math.random() * 0.6)
        );

    thanosHP -= damage;

    message(
        "⚔️ " +
        hero.name +
        " attacked Thanos for " +
        damage +
        " damage!"
    );

    checkBattle();

}


// SPECIAL ATTACK

function specialAttack() {

    if (gameOver) return;

    let damage =
        Math.floor(
            hero.attack *
            (1.8 + Math.random())
        );

    thanosHP -= damage;

    message(
        "💥 " +
        hero.name +
        "'s SPECIAL ATTACK dealt " +
        damage +
        " damage!"
    );

    checkBattle();

}


// HEAL

function heal() {

    if (gameOver) return;

    let amount =
        Math.floor(Math.random() * 16) + 10;

    heroHP =
        Math.min(hero.health, heroHP + amount);

    message(
        "❤️ " +
        hero.name +
        " recovered " +
        amount +
        " HP!"
    );

    thanosAttack();

}


// CHECK BATTLE

function checkBattle() {

    update();

    if (thanosHP <= 0) {

        thanosHP = 0;

        score += 1000;

        gameOver = true;

        message(
            "🏆 VICTORY! YOU SAVED THE CITY!"
        );

        document.getElementById("restart")
            .style.display = "inline-block";

        update();

        return;

    }

    thanosAttack();

}


// THANOS ATTACK

function thanosAttack() {

    if (gameOver) return;

    setTimeout(function() {

        let damage =
            Math.floor(Math.random() * 21) + 10;

        heroHP -= damage;

        if (heroHP <= 0) {

            heroHP = 0;

            gameOver = true;

            message(
                "💀 THANOOS DEFEATED YOU! THE CITY IS IN DANGER!"
            );

            document.getElementById("restart")
                .style.display = "inline-block";

        } else {

            message(
                "🟣 Thanos attacked you for " +
                damage +
                " damage!"
            );

        }

        update();

    }, 700);

}


// UPDATE SCREEN

function update() {

    document.getElementById("heroHP")
        .textContent =
        "HP: " + heroHP;

    document.getElementById("thanosHP")
        .textContent =
        "HP: " + Math.max(0, thanosHP);


    document.getElementById("heroHealth")
        .style.width =
        Math.max(
            0,
            heroHP / hero.health * 100
        ) + "%";


    document.getElementById("thanosHealth")
        .style.width =
        Math.max(
            0,
            thanosHP / 250 * 100
        ) + "%";


    document.getElementById("score")
        .textContent =
        "⭐ Score: " + score;

}


// MESSAGE

function message(text) {

    document.getElementById("message")
        .textContent = text;

}

</script>

</body>
</html>

Game Source: Superhero City Battle

Creator: SilverTiger54

Libraries: none

Complexity: complex (658 lines, 10.0 KB)

The full source code is displayed above on this page.

Remix Instructions

To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: superhero-city-battle-silvertiger54" to link back to the original. Then publish at arcadelab.ai/publish.