Math Game 2 trial
<!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>