<!DOCTYPE html>
<html>
<head>
<title>Phone Tag Game</title>
<style>
.hide {
display: none;
}
</style>
<script>
function switchPlayer() {
var currentPlayer = document.querySelector('.active');
currentPlayer.classList.remove('active');
var nextPlayer = currentPlayer.nextElementSibling || document.querySelector('.player:first-child');
nextPlayer.classList.add('active');
}
function tag() {
var currentPlayer = document.querySelector('.active');
var hiddenPlayers = document.querySelectorAll('.hide');
var randomPlayer = hiddenPlayers[Math.floor(Math.random() * hiddenPlayers.length)];
randomPlayer.classList.remove('hide');
currentPlayer.classList.add('hide');
switchPlayer();
}
</script>
</head>
<body>
<h1>Phone Tag Game</h1>
<div class="players">
<div class="player active">Player 1</div>
<div class="player">Player 2</div>
<div class="player hide">Player 3</div>
<div class="player hide">Player 4</div>
</div>
<button onclick="tag()">Tag!</button>
<script>
var players = document.querySelectorAll('.player');
var randomIndex = Math.floor(Math.random() * players.length);
players[randomIndex].classList.add('active');
</script>
</body>
</html>