Math Game – Atlas Design

<!DOCTYPE html>
<html>
<head>
  <title>Math Dice Challenge - 2 Players</title>
  <style>
    /* Add some stylish and colorful design to the page */
    body {
      font-family: Arial, sans-serif;
      text-align: center;
      background-color: #e6e6e6;
    }
    h1 {
      color: #333333;
      margin-top: 50px;
    }
    .score {
      display: flex;
      justify-content: center;
      margin: 20px 0;
    }
    .score p {
      margin: 10px 20px;
      font-size: 20px;
      color: #555555;
      font-weight: bold;
    }
    .button-container {
      margin-bottom: 50px;
    }
    button {
      padding: 10px 20px;
      font-size: 16px;
      border-radius: 5px;
      background-color: #4CAF50;
      color: white;
      border: none;
      margin: 10px;
    }
  </style>
</head>
<body>
  <h1>Math Dice Challenge - 2 Players</h1>
  <div class="score">
    <p><strong>Player 1:</strong> <span id="player1Score">0</span></p>
    <p><strong>Player 2:</strong> <span id="player2Score">0</span></p>
  </div>
  <div class="button-container">
    <button onclick="rollDice('player1')">Player 1 Roll Dice</button>
    <button onclick="rollDice('player2')">Player 2 Roll Dice</button>
    <button onclick="endGame()">End Game</button>
  </div>
  <script>
    var player1Score = 0;
    var player2Score = 0;

    function rollDice(player) {
      var dice1 = Math.floor(Math.random() * 6) + 1;
      var dice2 = Math.floor(Math.random() * 6) + 1;

      // Ensure that both players roll different dice
      if (player === 'player1') {
        document.getElementById('player1Score').textContent = dice1 + dice2;
        player1Score = dice1 + dice2;
      } else {
        document.getElementById('player2Score').textContent = dice1 + dice2;
        player2Score = dice1 + dice2;
      }
    }

    function endGame() {
      // Your logic for ending the game
    }
  </script>
</body>
</html>