Fashionista Battle

by SparkWolf78

126 lines3.6 KB

<!DOCTYPE html>
<html>
<head>
  <title>Fashionista Battle</title>
  <style>
    body {
      background-color: black;
      color: pink;
      font-family: Arial, sans-serif;
      text-align: center;
    }
    .btn {
      background-color: pink;
      color: black;
      border: none;
      padding: 10px 20px;
      margin: 10px;
      cursor: pointer;
      font-size: 16px;
    }
    .menu {
      margin-top: 20px;
    }
    .choice {
      display: inline-block;
      margin: 10px;
      padding: 10px;
      border: 2px solid pink;
      cursor: pointer;
    }
    .choice:hover {
      background-color: pink;
      color: black;
    }
  </style>
</head>
<body>
  <h1>Fashionista Battle</h1>
  <div id="game"></div>

  <script>
    const characters = ["Jisoo", "Rosé", "Lisa", "Jennie"];
    const outfits = ["Casual Chic", "Elegant Dress", "Streetwear", "Glamorous Gown"];
    const makeup = ["Natural Glow", "Smokey Eyes", "Bold Lips", "Glitter Glam"];
    const accessories = ["Necklace", "Earrings", "Handbag", "Sunglasses"];
    const poses = ["Dance Pose A", "Dance Pose B", "Dance Pose C", "Dance Pose D"];

    let selectedCharacter = null;
    let selectedOutfit = null;
    let selectedMakeup = null;
    let selectedAccessory = null;
    let selectedPose = null;
    let stage = "select";

    const gameDiv = document.getElementById("game");

    function renderChoices(options, callback) {
      gameDiv.innerHTML = "";
      options.forEach(opt => {
        const div = document.createElement("div");
        div.className = "choice";
        div.innerText = opt;
        div.onclick = () => {
          callback(opt);
        };
        gameDiv.appendChild(div);
      });
    }

    function render() {
      gameDiv.innerHTML = "";
      if (stage === "select") {
        gameDiv.innerHTML = "<h2>Select Your Character</h2>";
        renderChoices(characters, choice => {
          selectedCharacter = choice;
          stage = "outfit";
          render();
        });
      } else if (stage === "outfit") {
        gameDiv.innerHTML = `<h2>Choose Outfit for ${selectedCharacter}</h2>`;
        renderChoices(outfits, choice => {
          selectedOutfit = choice;
          stage = "makeup";
          render();
        });
      } else if (stage === "makeup") {
        gameDiv.innerHTML = `<h2>Choose Makeup for ${selectedCharacter}</h2>`;
        renderChoices(makeup, choice => {
          selectedMakeup = choice;
          stage = "accessory";
          render();
        });
      } else if (stage === "accessory") {
        gameDiv.innerHTML = `<h2>Choose Accessory for ${selectedCharacter}</h2>`;
        renderChoices(accessories, choice => {
          selectedAccessory = choice;
          stage = "pose";
          render();
        });
      } else if (stage === "pose") {
        gameDiv.innerHTML = `<h2>Choose Dance Pose for ${selectedCharacter}</h2>`;
        renderChoices(poses, choice => {
          selectedPose = choice;
          stage = "battle";
          render();
        });
      } else if (stage === "battle") {
        let playerScore = Math.floor(Math.random() * 20) + 10;
        let opponentScore = Math.floor(Math.random() * 20) + 10;
        let result = playerScore >= opponentScore 
          ? `${selectedCharacter} wins the Fashionista Battle! 🎉` 
          : `${selectedCharacter} loses the Fashionista Battle... 😢`;

        gameDiv.innerHTML = `
          <h2>Battle Result</h2>
          <p><strong>${selectedCharacter}</strong> wore ${selectedOutfit}, makeup: ${selectedMakeup}, accessory: ${selectedAccessory}, pose: ${selectedPose}.</p>
          <p>${result}</p>
        `;
      }
    }

    render();
  </script>
</body>
</html>

Game Source: Fashionista Battle

Creator: SparkWolf78

Libraries: none

Complexity: moderate (126 lines, 3.6 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: fashionista-battle-sparkwolf78" to link back to the original. Then publish at arcadelab.ai/publish.