Parley Hatch
4b7d42dc13
Existing 2-player hotseat game with name entry, emoji avatars, scoreboard, sound effects, and celebration animations.
153 lines
7.4 KiB
HTML
153 lines
7.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>✨ Ultimate Tic-Tac-Toe ✨</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
<div class="stars"></div>
|
|
<div class="container">
|
|
<!-- Player Name Input Screen -->
|
|
<div id="nameScreen" class="screen active">
|
|
<div class="name-card">
|
|
<h1 class="title">✨ Ultimate Tic-Tac-Toe ✨</h1>
|
|
<div class="sparkle-divider"></div>
|
|
|
|
<div class="name-input-group">
|
|
<label for="player1Name">
|
|
<span class="player-icon">🌟</span>
|
|
Player 1 Name
|
|
</label>
|
|
<input type="text" id="player1Name" placeholder="Enter your name..." maxlength="15">
|
|
</div>
|
|
|
|
<div class="name-input-group">
|
|
<label for="player2Name">
|
|
<span class="player-icon">💫</span>
|
|
Player 2 Name
|
|
</label>
|
|
<input type="text" id="player2Name" placeholder="Enter your name..." maxlength="15">
|
|
</div>
|
|
|
|
<div class="avatar-section">
|
|
<h3 class="avatar-title">Choose Your Avatars!</h3>
|
|
<div class="avatar-selection">
|
|
<div class="player-avatar-group">
|
|
<label>Player 1</label>
|
|
<div class="avatar-options" id="player1Avatars">
|
|
<div class="avatar-option selected" data-avatar="⭐">⭐</div>
|
|
<div class="avatar-option" data-avatar="🦄">🦄</div>
|
|
<div class="avatar-option" data-avatar="🌸">🌸</div>
|
|
<div class="avatar-option" data-avatar="🎀">🎀</div>
|
|
<div class="avatar-option" data-avatar="🦋">🦋</div>
|
|
<div class="avatar-option" data-avatar="🌈">🌈</div>
|
|
<div class="avatar-option" data-avatar="🎨">🎨</div>
|
|
<div class="avatar-option" data-avatar="🎪">🎪</div>
|
|
</div>
|
|
</div>
|
|
<div class="player-avatar-group">
|
|
<label>Player 2</label>
|
|
<div class="avatar-options" id="player2Avatars">
|
|
<div class="avatar-option" data-avatar="⭐">⭐</div>
|
|
<div class="avatar-option" data-avatar="🦄">🦄</div>
|
|
<div class="avatar-option selected" data-avatar="🌸">🌸</div>
|
|
<div class="avatar-option" data-avatar="🎀">🎀</div>
|
|
<div class="avatar-option" data-avatar="🦋">🦋</div>
|
|
<div class="avatar-option" data-avatar="🌈">🌈</div>
|
|
<div class="avatar-option" data-avatar="🎨">🎨</div>
|
|
<div class="avatar-option" data-avatar="🎪">🎪</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button id="startBtn" class="start-btn">
|
|
Start Playing! 🎮
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Game Screen -->
|
|
<div id="gameScreen" class="screen">
|
|
<div class="game-card">
|
|
<h1 class="game-title">✨ Tic-Tac-Toe ✨</h1>
|
|
|
|
<div class="game-layout">
|
|
<!-- Left Side: Game Area -->
|
|
<div class="game-area">
|
|
<div class="player-info">
|
|
<div class="player-display player1-display active">
|
|
<span class="player-symbol" id="player1Symbol">X</span>
|
|
<span class="player-name" id="player1Display"></span>
|
|
<div class="player-glow"></div>
|
|
</div>
|
|
<div class="vs">VS</div>
|
|
<div class="player-display player2-display">
|
|
<span class="player-symbol" id="player2Symbol">O</span>
|
|
<span class="player-name" id="player2Display"></span>
|
|
<div class="player-glow"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="game-board" id="gameBoard">
|
|
<div class="cell" data-cell></div>
|
|
<div class="cell" data-cell></div>
|
|
<div class="cell" data-cell></div>
|
|
<div class="cell" data-cell></div>
|
|
<div class="cell" data-cell></div>
|
|
<div class="cell" data-cell></div>
|
|
<div class="cell" data-cell></div>
|
|
<div class="cell" data-cell></div>
|
|
<div class="cell" data-cell></div>
|
|
</div>
|
|
|
|
<div class="game-status" id="gameStatus"></div>
|
|
|
|
<div class="button-group">
|
|
<button id="resetBtn" class="game-btn">🔄 New Game</button>
|
|
<button id="changeNamesBtn" class="game-btn">👥 Change Names</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right Side: Score Board -->
|
|
<div class="score-sidebar">
|
|
<h2 class="score-title">Scoreboard</h2>
|
|
<div class="score-item player1-score">
|
|
<span class="score-avatar" id="score1Avatar">⭐</span>
|
|
<span class="score-name" id="score1Name">Player 1</span>
|
|
<span class="score-value" id="score1">0</span>
|
|
</div>
|
|
<div class="score-divider">🏆</div>
|
|
<div class="score-item player2-score">
|
|
<span class="score-avatar" id="score2Avatar">🌸</span>
|
|
<span class="score-name" id="score2Name">Player 2</span>
|
|
<span class="score-value" id="score2">0</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Winner Screen -->
|
|
<div id="winnerScreen" class="screen">
|
|
<div class="winner-card">
|
|
<div class="confetti"></div>
|
|
<h1 class="winner-title">🎉 Winner! 🎉</h1>
|
|
<div class="trophy" id="winnerAvatar">🏆</div>
|
|
<p class="winner-name" id="winnerName"></p>
|
|
<div class="fireworks">
|
|
<div class="firework"></div>
|
|
<div class="firework"></div>
|
|
<div class="firework"></div>
|
|
</div>
|
|
<button id="playAgainBtn" class="start-btn">Play Again! 🎮</button>
|
|
<button id="changeNamesBtn2" class="game-btn">Change Names</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html>
|