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

No:22725

Cultivation isekai game with a Status Screen that ..ALL
Developer User10477｜Date and time 23/10/24 12:44:12
Build time 108.161 sec｜Game capacity 8.432KB｜

Script

Status

Level: 1

Experience: 0

Health: 100

Weapon

Armor

Accessory

Element:

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

<!DOCTYPE html>
<html>
  <head>
    <title>Cultivation Isekai Game</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        background-color: #f2f2f2;
        text-align: center;
      }
      
      #status-container {
        padding: 20px;
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        margin: 20px auto;
        max-width: 500px;
      }
      
      h1 {
        font-size: 24px;
        color: #333;
        margin-bottom: 10px;
      }
      
      .stats {
        font-size: 18px;
        color: #666;
        margin-bottom: 5px;
      }
      
      #inventory {
        margin-top: 20px;
      }
      
      #inventory .item {
        display: inline-block;
        width: 100px;
        height: 100px;
        background-color: #ccc;
        margin: 5px;
      }
      
      #equipment {
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
      }
      
      #equipment .slot {
        width: 100px;
        height: 100px;
        background-color: #f2f2f2;
        border: 1px solid #ccc;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
      }
      
      .element {
        font-size: 18px;
        color: #666;
        margin-top: 20px;
      }
      
      .element img {
        width: 30px;
        height: 30px;
        margin: 0 5px;
        cursor: pointer;
      }
      
      #message {
        font-size: 16px;
        color: #333;
        margin-top: 20px;
      }
    </style>
  </head>
  <body>
    <div id="status-container">
      <h1>Status</h1>
      <div class="stats">Level: <span id="level">1</span></div>
      <div class="stats">Experience: <span id="experience">0</span></div>
      <div class="stats">Health: <span id="health">100</span></div>
      <hr>
      <div id="inventory"></div>
      <hr>
      <div id="equipment">
        <div class="slot" id="weapon-slot">Weapon</div>
        <div class="slot" id="armor-slot">Armor</div>
        <div class="slot" id="accessory-slot">Accessory</div>
      </div>
      <div class="element">
        <span>Element:</span>
        <img id="element-img" src="default.png" alt="Element">
      </div>
      <div id="message"></div>
    </div>
    
    <script>
      // Game variables
      let level = 1;
      let experience = 0;
      let health = 100;
      let inventory = [];
      let equippedItems = {
        weapon: null,
        armor: null,
        accessory: null
      };
      let element = "default";
      
      // Element shards
      let elementShards = {
        fire: 0,
        water: 0,
        earth: 0,
        air: 0
      };
      
      // Equipment class
      class Equipment {
        constructor(name, statBoost) {
          this.name = name;
          this.statBoost = statBoost;
        }
      }
      
      // Item class
      class Item {
        constructor(name, useFunction) {
          this.name = name;
          this.useFunction = useFunction;
        }
      }
      
      // Available equipment
      const swords = [
        new Equipment("Iron Sword", { attack: 10 }),
        new Equipment("Steel Sword", { attack: 20 }),
        new Equipment("Legendary Sword", { attack: 50 }),
      ];
      
      const armors = [
        new Equipment("Leather Armor", { defense: 5 }),
        new Equipment("Plate Armor", { defense: 10 }),
        new Equipment("Crystal Armor", { defense: 20 }),
      ];
      
      const accessories = [
        new Equipment("Ring of Strength", { attack: 5 }),
        new Equipment("Amulet of Health", { health: 20 }),
        new Equipment("Earring of Agility", { defense: 5 }),
      ];
      
      // Available items
      const items = [
        new Item("Health Potion", function() {
          health += 20;
          displayStatus();
          showMessage("You have healed yourself for 20 health.");
        }),
        new Item("Experience Scroll", function() {
          experience += 50;
          displayStatus();
          showMessage("You have gained 50 experience points.");
        }),
      ];
      
      // Generate random element shards after defeating an enemy (for demo purposes)
      function obtainElementShards() {
        const shards = ["fire", "water", "earth", "air"];
        const randomElement = shards[Math.floor(Math.random() * shards.length)];
        elementShards[randomElement]++;
      }
      
      // Refine element shards to change the form and nature of the element
      function refineElementShards() {
        // Your implementation here
        // ...
        // For now, let's just display the first element in sorted order
        const sortedElements = Object.keys(elementShards).sort();
        element = sortedElements[0];
        displayElement();
      }
      
      // Equip an item to a specific slot
      function equipItem(item, slot) {
        equippedItems[slot] = item;
        displayInventory();
        displayEquippedItems();
        displayStatus();
        showMessage(`You have equipped ${item.name} in ${slot} slot.`);
      }
      
      // Unequip an item from a specific slot
      function unequipItem(slot) {
        const item = equippedItems[slot];
        equippedItems[slot] = null;
        displayInventory();
        displayEquippedItems();
        displayStatus();
        showMessage(`You have unequipped ${item.name} from ${slot} slot.`);
      }
      
      // Display the character's current status
      function displayStatus() {
        document.getElementById("level").textContent = level;
        document.getElementById("experience").textContent = experience;
        document.getElementById("health").textContent = health;
      }
      
      // Display the inventory
      function displayInventory() {
        const inventoryContainer = document.getElementById("inventory");
        inventoryContainer.innerHTML = "";
        
        inventory.forEach(item => {
          const itemElement = document.createElement("div");
          itemElement.classList.add("item");
          itemElement.textContent = item.name;
          itemElement.addEventListener("click", () => useItem(item));
          inventoryContainer.appendChild(itemElement);
        });
      }
      
      // Display the equipped items
      function displayEquippedItems() {
        const weaponSlot = document.getElementById("weapon-slot");
        const armorSlot = document.getElementById("armor-slot");
        const accessorySlot = document.getElementById("accessory-slot");
        
        weaponSlot.textContent = equippedItems.weapon ? equippedItems.weapon.name : "Weapon";
        armorSlot.textContent = equippedItems.armor ? equippedItems.armor.name : "Armor";
        accessorySlot.textContent = equippedItems.accessory ? equippedItems.accessory.name : "Accessory";
        
        weaponSlot.addEventListener("click", () => equippedItems.weapon ? unequipItem("weapon") : null);
        armorSlot.addEventListener("click", () => equippedItems.armor ? unequipItem("armor") : null);
        accessorySlot.addEventListener("click", () => equippedItems.accessory ? unequipItem("accessory") : null);
      }
      
      // Display the current element
      function displayElement() {
        const elementImg = document.getElementById("element-img");
        elementImg.src = `${element}.png`;
      }
      
      // Use an item from the inventory
      function useItem(item) {
        item.useFunction();
        inventory = inventory.filter(i => i !== item);
        displayInventory();
      }
      
      // Show a message in the message container
      function showMessage(message) {
        document.getElementById("message").textContent = message;
      }
      
      // Initialize the game
      function initGame() {
        // Generate initial equipment
        const randomWeapon = swords[Math.floor(Math.random() * swords.length)];
        const randomArmor = armors[Math.floor(Math.random() * armors.length)];
        const randomAccessory = accessories[Math.floor(Math.random() * accessories.length)];
        
        equipItem(randomWeapon, "weapon");
        equipItem(randomArmor, "armor");
        equipItem(randomAccessory, "accessory");
        
        displayElement();
      }
      
      // Start the game
      initGame();
    </script>
  </body>
</html>