2 Player Github.io Instant

.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;

<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) // game end check: if scores already reached >=5, reset needed if (scores.p1 >= 5 // 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) key === 'r' && e.ctrlKey) // just allow reset with R but prevent conflict, but simple: let reset button handle // extra security: disable pointer events on game over, but reset enables. function init() S=Scissors'; document.querySelector('footer').appendChild(footerHint); // start game init(); </script> </body> </html> 2 player github.io

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