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

No:15016

A worldwide game multiplayer game where people fig..ALL
Developer User6475｜Date and time 23/9/5 19:46:18
Build time 32.972 sec｜Game capacity 3.897KB｜

Script

Multiplayer Monster Battle Game

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

<HTML>
  <head>
    <title>Multiplayer Monster Battle Game</title>
    <style>
      body {
        font-family: Arial, sans-serif;
      }
      
      h1 {
        text-align: center;
      }
      
      #game-container {
        margin: 0 auto;
        width: 80%;
        max-width: 600px;
      }
      
      #class-selection {
        display: flex;
        justify-content: center;
      }
      
      .class-icon {
        width: 80px;
        height: 80px;
        border: 2px solid #ccc;
        border-radius: 50%;
        margin: 10px;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      
      .class-icon selected {
        border-color: #ff0000;
      }
      
      #play-button {
        display: flex;
        justify-content: center;
      }
      
      #game-log {
        margin-top: 20px;
        padding: 10px;
        border: 1px solid #ccc;
        height: 200px;
        overflow-y: scroll;
      }
      
      #game-log p {
        margin: 0;
        padding: 5px 0;
        border-bottom: 1px solid #ccc;
      }
    </style>
    <script>
      // Global variables
      var playerClass = "";
      var playerRank = "";
      
      // Array of available classes and their ranks
      var classes = [
        { name: "Nature", ranks: ["Novice", "Apprentice", "Master"] },
        { name: "Fire", ranks: ["Amateur", "Adept", "Champion"] },
        { name: "Darkness", ranks: ["Initiate", "Sorcerer", "Shadow Lord"] }
      ];
      
      // Event listeners
      document.addEventListener("DOMContentLoaded", function() {
        renderClassSelection();
      });
      
      function selectClass(className) {
        playerClass = className;
        renderClassSelection();
      }
      
      function selectRank(rankName) {
        playerRank = rankName;
        renderClassSelection();
      }
      
      function startGame() {
        if (playerClass !== "" && playerRank !== "") {
          // TODO: Implement game logic
          alert("Game started!");
        } else {
          alert("Please select a class and rank!");
        }
      }
      
      // Rendering functions
      function renderClassSelection() {
        var classSelectionContainer = document.getElementById("class-selection");
        classSelectionContainer.innerHTML = "";
        
        classes.forEach(function(classObj) {
          var classIcon = document.createElement("div");
          classIcon.classList.add("class-icon");
          if (playerClass === classObj.name) {
            classIcon.classList.add("selected");
          }
          classIcon.innerHTML = classObj.name;
          classIcon.addEventListener("click", function() {
            selectClass(classObj.name);
          });
          classSelectionContainer.appendChild(classIcon);
          
          if (playerClass === classObj.name) {
            var rankSelection = document.createElement("div");
            
            classObj.ranks.forEach(function(rank) {
              var rankButton = document.createElement("button");
              rankButton.innerHTML = rank;
              rankButton.addEventListener("click", function() {
                selectRank(rank);
              });
              rankSelection.appendChild(rankButton);
            });
            
            classSelectionContainer.appendChild(rankSelection);
          }
        });
      }
    </script>
  </head>
  
  <body>
    <div id="game-container">
      <h1>Multiplayer Monster Battle Game</h1>
      
      <div id="class-selection">
        
      </div>
      
      <div id="play-button">
        <button onclick="startGame()">Play</button>
      </div>
      
      <div id="game-log">
        
      </div>
    </div>
  </body>
</HTML>