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

No:36785

サッカークラブを経営し、選手を獲得し試合で勝ち、お金を貯めもっと良い選手を買うゲーム
Developer User4403｜Date and time 24/1/18 11:02:25
Build time 15.849 sec｜Game capacity 3.744KB｜

Script

Soccer Club Management Game

Money: $ 0

Team

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Soccer Club Management Game</title>
  <style>
    body {
      text-align: center;
      font-family: Arial, sans-serif;
    }
    
    #score {
      font-size: 24px;
      margin-bottom: 10px;
    }
    
    #team {
      margin-bottom: 20px;
    }
    
    #players {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 20px;
      margin-bottom: 20px;
    }
    
    .player-card {
      width: 200px;
      padding: 10px;
      background-color: #f2f2f2;
      border-radius: 5px;
      text-align: center;
    }
    
    .player-image {
      font-size: 72px;
    }
    
    .player-name {
      margin-top: 10px;
      font-size: 18px;
      font-weight: bold;
    }
    
    .player-value {
      margin-top: 5px;
      font-size: 14px;
    }
    
    .btn {
      padding: 10px 20px;
      font-size: 16px;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }
    
    .btn:hover {
      background-color: #45a049;
    }
  </style>
</head>
<body>
  <h1>Soccer Club Management Game</h1>
  
  <div id="score">Money: $ 0</div>
  
  <div id="team">Team</div>
  
  <div id="players"></div>
  
  <script>
    let money = 0;
    let team = [];
    const players = [
      {
        id: 1,
        name: "Player 1",
        value: 100,
        image: "⚽️"
      },
      {
        id: 2,
        name: "Player 2",
        value: 200,
        image: "⚽️⚽️"
      },
      {
        id: 3,
        name: "Player 3",
        value: 300,
        image: "⚽️⚽️⚽️"
      },
      {
        id: 4,
        name: "Player 4",
        value: 400,
        image: "⚽️⚽️⚽️⚽️"
      }
    ];
    
    function render() {
      const scoreElement = document.getElementById("score");
      scoreElement.innerText = "Money: $ " + money;
      
      const teamElement = document.getElementById("team");
      teamElement.innerHTML = "Team: " + team.length + " players";
      
      const playersElement = document.getElementById("players");
      playersElement.innerHTML = "";
      
      players.forEach(player => {
        const playerElement = document.createElement("div");
        playerElement.classList.add("player-card");
        
        const playerImageElement = document.createElement("div");
        playerImageElement.classList.add("player-image");
        playerImageElement.innerText = player.image;
        
        const playerNameElement = document.createElement("div");
        playerNameElement.classList.add("player-name");
        playerNameElement.innerText = player.name;
        
        const playerValueElement = document.createElement("div");
        playerValueElement.classList.add("player-value");
        playerValueElement.innerText = "Value: $ " + player.value;
        
        const buyButtonElement = document.createElement("button");
        buyButtonElement.classList.add("btn");
        buyButtonElement.innerText = "Buy";
        buyButtonElement.addEventListener("click", () => {
          buyPlayer(player);
        });
        
        playerElement.appendChild(playerImageElement);
        playerElement.appendChild(playerNameElement);
        playerElement.appendChild(playerValueElement);
        playerElement.appendChild(buyButtonElement);
        
        playersElement.appendChild(playerElement);
      });
    }
    
    function buyPlayer(player) {
      if (money >= player.value) {
        money -= player.value;
        team.push(player);
        render();
      } else {
        alert("Not enough money to buy this player!");
      }
    }
    
    render();
  </script>
</body>
</html>