[verified] - 2 Player Github.io

<div class="message-area" id="statusMessage"> 🎮 Player 1's turn — choose your weapon! </div> <div class="round-result" id="roundHistory"> ✨ Last round: waiting for first move </div> <footer>🎲 Rock-Paper-Scissors duel | Local two-player mode | One device, hot seat</footer> </div> </div>

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

/* arena */ .arena background: #0a0e18; border-radius: 2rem; padding: 1rem; margin: 1.5rem 0; border: 1px solid #2d3f5e; +1 point"; setStatusMessage(`🟦 PLAYER 1 wins the round

footer font-size: 0.7rem; margin-top: 1rem; opacity: 0.7; color: #5e7499; $p2Move

.move-btn:active transform: translateY(2px); box-shadow: 0 2px 0 #03060c;

<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) // 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>

@media (max-width: 650px) .game-panel padding: 1rem; .move-btn font-size: 1.2rem; padding: 0.5rem 1rem; min-width: 70px; .player-card width: 160px; padding: 0.6rem; .player-score font-size: 2rem; .player-name font-size: 1.3rem; </style> </head> <body> <div class="game-container"> <div class="game-panel"> <h1>⚔️ DUEL ARENA ⚔️</h1> <div class="sub">two players · local battle</div>