[exclusive] | 2 Player Github.io

h1 margin: 0 0 0.5rem 0; font-size: 2rem; letter-spacing: 3px; background: linear-gradient(135deg, #FFD966, #FF884D); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 8px #ff7e2e40; font-weight: 800;

.player-name font-size: 1.7rem; font-weight: bold; margin-bottom: 0.3rem;

/* main game card */ .game-container background: rgba(10, 20, 30, 0.65); backdrop-filter: blur(4px); border-radius: 3rem; padding: 1.5rem; box-shadow: 0 25px 45px rgba(0,0,0,0.5), inset 0 1px 2px rgba(255,255,255,0.1); border: 1px solid rgba(90, 150, 220, 0.3); 2 player github.io

.player-card.active-turn border: 2px solid #f5b042; background: #1a1f32e0; box-shadow: 0 0 18px rgba(245,176,66,0.5); transform: scale(1.02);

.message-area background: #000000aa; border-radius: 2rem; padding: 0.8rem; margin: 1rem 0 0; font-weight: bold; font-size: 1.1rem; backdrop-filter: blur(10px); font-family: monospace; color: #ffecb3; h1 margin: 0 0 0

/* scoreboard */ .scoreboard display: flex; justify-content: space-between; gap: 2rem; margin-bottom: 2rem; flex-wrap: wrap;

<script> // ---------- GAME STATE ---------- let scores = p1: 0, p2: 0 ; let currentTurn = "p1"; // "p1" or "p2" let waitingForMove = true; // lock while waiting for second player move after first pick let pendingMove = null; // stores first player's move player: "p1", move: "rock" // DOM elements const scoreP1El = document.getElementById("scoreP1"); const scoreP2El = document.getElementById("scoreP2"); const statusMsgEl = document.getElementById("statusMessage"); const roundHistoryEl = document.getElementById("roundHistory"); const player1Card = document.getElementById("player1Card"); const player2Card = document.getElementById("player2Card"); const moveBtns = document.querySelectorAll(".move-btn[data-move]"); // helper: update score UI function updateScoresUI() scoreP1El.innerText = scores.p1; scoreP2El.innerText = scores.p2; // highlight active player function updateActiveHighlight() if (currentTurn === "p1") player1Card.classList.add("active-turn"); player2Card.classList.remove("active-turn"); else player2Card.classList.add("active-turn"); player1Card.classList.remove("active-turn"); // display main status function setStatusMessage(text, isError = false) statusMsgEl.innerHTML = text; if (isError) setTimeout(() => if (statusMsgEl.innerHTML === text) statusMsgEl.style.opacity = "0.9"; , 800); else statusMsgEl.style.opacity = "1"; // round history pretty text function updateHistory(winnerInfo, p1Move, p2Move) const moveEmoji = rock: "🪨", paper: "📜", scissors: "✂️" ; let historyText = `⚡ Last duel: P1 $moveEmoji[p1Move] vs P2 $moveEmoji[p2Move] → `; if (winnerInfo === "p1") historyText += "🏆 PLAYER 1 WINS!"; else if (winnerInfo === "p2") historyText += "🏆 PLAYER 2 WINS!"; else historyText += "🤝 DRAW! No points awarded."; roundHistoryEl.innerHTML = historyText; // determine winner logic: returns 'p1', 'p2', or 'draw' function determineWinner(move1, move2) // core resolution after both moves are locked function resolveRound(p1Move, p2Move) const winner = determineWinner(p1Move, p2Move); let pointMsg = ""; if (winner === "p1") scores.p1 += 1; pointMsg = "🔥 Player 1 claims victory! +1 point"; setStatusMessage(`🟦 PLAYER 1 wins the round! $p1Move.toUpperCase() beats $p2Move.toUpperCase().`); else if (winner === "p2") scores.p2 += 1; pointMsg = "⚡ Player 2 strikes! +1 point"; setStatusMessage(`🟥 PLAYER 2 wins the round! $p2Move.toUpperCase() beats $p1Move.toUpperCase().`); else pointMsg = "🤝 Stalemate! No points this round."; setStatusMessage(`🤝 DRAW! Both chose $p1Move.toUpperCase(). No points.`); updateScoresUI(); updateHistory(winner, p1Move, p2Move); // extra flair message (optional) const extraMsg = document.createElement("div"); // but we just display clean, we can also briefly show pop but fine. // After round finishes, reset turn to p1 and clear pending move currentTurn = "p1"; pendingMove = null; waitingForMove = true; // ready for new round updateActiveHighlight(); // check match win condition (first to 5 points) if (scores.p1 >= 5) setStatusMessage("🏆✨ GAME OVER! PLAYER 1 IS THE CHAMPION! ✨🏆 Press RESET to play again."); disableMoveButtons(true); return true; // game ended else if (scores.p2 >= 5) setStatusMessage("🏆✨ GAME OVER! PLAYER 2 IS THE CHAMPION! ✨🏆 Press RESET to play again."); disableMoveButtons(true); return true; // if game not ended, enable moves again disableMoveButtons(false); return false; // game continues // enable/disable move buttons (avoid clicks during game over or weird state) function disableMoveButtons(disabled) moveBtns.forEach(btn => if (disabled) btn.disabled = true; btn.style.opacity = "0.5"; btn.style.cursor = "not-allowed"; else btn.disabled = false; btn.style.opacity = "1"; btn.style.cursor = "pointer"; ); // reset full game state function resetMatch() scores = p1: 0, p2: 0 ; currentTurn = "p1"; pendingMove = null; waitingForMove = true; updateScoresUI(); updateActiveHighlight(); setStatusMessage("🔄 Match reset! Player 1's turn — choose your weapon."); roundHistoryEl.innerHTML = "✨ New match — first to 5 points wins! ✨"; disableMoveButtons(false); // any pending game over flag cleared // handle move selection from current player function onMoveSelected(move) scores.p2 >= 5) setStatusMessage("🏁 Match already finished! Press RESET to start a new duel.", true); return; // if waiting for first move of round and it's the correct player's turn if (waitingForMove && currentTurn === "p1") // first move by Player1 pendingMove = player: "p1", move: move ; waitingForMove = false; currentTurn = "p2"; updateActiveHighlight(); setStatusMessage(`🟡 Player 1 chose $move.toUpperCase(). Now Player 2, make your move!`); // disable no extra lock: buttons still active but now currentTurn is p2, so next click will go to else-if branch return; // second move (Player2 responds) if (!waitingForMove && currentTurn === "p2" && pendingMove && pendingMove.player === "p1") const p1Move = pendingMove.move; const p2Move = move; // resolve the round immediately const gameEnded = resolveRound(p1Move, p2Move); // after resolve, waitingForMove becomes true, currentTurn = p1 if (!gameEnded) // if match continues, normal state setStatusMessage(`🎯 Round complete! Player 1's turn — choose again.`); updateActiveHighlight(); else // game ended, buttons already disabled in resolveRound if needed // but disableMoveButtons(true) was called inside resolveRound if game over // updateActiveHighlight already done, but final state no active player needed. // we also set waitingForMove false-ish? already set in resolveRound. return; // invalid state fallback (wrong turn or no pending) if (!waitingForMove && currentTurn !== "p2") setStatusMessage(`⛔ It's not your turn! Wait for the opponent's move.`, true); else if (waitingForMove && currentTurn === "p2") setStatusMessage(`⛔ Player 2 can't start round — Player 1 must move first!`, true); else setStatusMessage(`⚠️ Invalid sequence. Press RESET if stuck.`, true); // event binding for move buttons function bindEvents() moveBtns.forEach(btn => const moveValue = btn.getAttribute("data-move"); btn.addEventListener("click", (e) => e.preventDefault(); // if buttons disabled (game over) block if (btn.disabled) return; onMoveSelected(moveValue); ); ); document.getElementById("resetGameBtn").addEventListener("click", () => resetMatch(); ); // keyboard shortcuts for fun (optional): 1/2 for players? better avoid complexity, but added as nice-to-have function handleKeyPress(e) // extra security: disable pointer events on game over, but reset enables. function init() bindEvents(); resetMatch(); // initial fresh state window.addEventListener("keydown", handleKeyPress); // additional display hint: show keyboard shortcuts const footerHint = document.createElement('div'); footerHint.style.fontSize = '0.65rem'; footerHint.style.marginTop = '8px'; footerHint.style.opacity = '0.7'; footerHint.innerText = '💡 Keyboard: R=Rock // start game init(); </script> </body> </html> $p1Move

<div class="arena"> <div class="action-buttons" id="movesContainer"> <button class="move-btn" data-move="rock">🪨 ROCK</button> <button class="move-btn" data-move="paper">📜 PAPER</button> <button class="move-btn" data-move="scissors">✂️ SCISSORS</button> </div> <div class="action-buttons"> <button class="move-btn reset-btn" id="resetGameBtn">🔄 RESET MATCH</button> </div> </div>