2 Playergithubio New !!hot!!
🎮 Game: "First to 5"
A fast-paced clicking race for two players on the same device.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <title>Two Player Duel · First to 5</title> <style> * user-select: none; -webkit-tap-highlight-color: transparent;body background: linear-gradient(145deg, #1a2a3a 0%, #0f1a24 100%); min-height: 100vh; display: flex; justify-content: center; align-items: center; font-family: 'Segoe UI', 'Poppins', system-ui, -apple-system, 'Inter', sans-serif; margin: 0; padding: 20px; .game-container background: rgba(10, 20, 28, 0.65); backdrop-filter: blur(4px); border-radius: 5rem; padding: 1.5rem; box-shadow: 0 25px 40px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.1); .game-panel background: #0e1c26; border-radius: 3rem; padding: 1.2rem; box-shadow: inset 0 2px 5px #00000030, 0 10px 20px rgba(0,0,0,0.3); h1 text-align: center; margin: 0 0 0.8rem 0; font-size: 2.2rem; letter-spacing: 2px; background: linear-gradient(135deg, #f9e0a0, #f5b042); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 2px 3px #00000040; font-weight: 800; .scoreboard display: flex; justify-content: space-between; gap: 1.2rem; margin-bottom: 2rem; .player-card flex: 1; background: #07131c; border-radius: 2rem; padding: 1rem 0.5rem; text-align: center; transition: all 0.2s ease; box-shadow: 0 8px 0 #03080e; .player-card.active-turn transform: translateY(-4px); background: #1f3e4a; box-shadow: 0 8px 0 #0b1a22, 0 0 0 2px #ffd966; .player-name font-size: 1.8rem; font-weight: bold; margin-bottom: 0.5rem; .p1-name color: #ff7b72; text-shadow: 0 0 5px #ff3a2f80; .p2-name color: #6bcbff; text-shadow: 0 0 5px #2aa9ff80; .player-score font-size: 3.2rem; font-weight: 800; background: #00000055; display: inline-block; padding: 0.2rem 1.2rem; border-radius: 3rem; font-family: monospace; letter-spacing: 4px; color: white; .arena background: #0a141e; border-radius: 2rem; padding: 1.5rem; margin: 1rem 0; text-align: center; .action-btn background: #2c3e2f; border: none; font-size: 2.5rem; font-weight: bold; padding: 1.2rem 1.2rem; width: 85%; max-width: 280px; border-radius: 3rem; color: white; cursor: pointer; transition: 0.07s linear; box-shadow: 0 6px 0 #1a2a1c; font-family: inherit; letter-spacing: 1px; .action-btn:active transform: translateY(4px); box-shadow: 0 2px 0 #1a2a1c; .turn-indicator font-size: 1.3rem; background: #00000066; display: inline-block; padding: 0.4rem 1.2rem; border-radius: 2rem; margin-bottom: 1rem; font-weight: 600; backdrop-filter: blur(4px); .winner-message font-size: 1.6rem; font-weight: bold; background: gold; color: #1e2a2e; padding: 0.5rem; border-radius: 3rem; margin-top: 0.8rem; .reset-btn background: #3e2c2c; border: none; font-size: 1.1rem; font-weight: bold; padding: 0.6rem 1.8rem; border-radius: 3rem; color: #ffcf9a; cursor: pointer; margin-top: 1rem; transition: 0.1s; box-shadow: 0 3px 0 #221b1b; font-family: inherit; .reset-btn:active transform: translateY(3px); box-shadow: none; footer text-align: center; font-size: 0.75rem; margin-top: 1.2rem; color: #6e8b9b; @media (max-width: 550px) .player-name font-size: 1.3rem; .player-score font-size: 2.2rem; .action-btn font-size: 1.8rem; padding: 1rem; </style></head> <body> <div class="game-container"> <div class="game-panel"> <h1>⚡ DUEL: FIRST TO 5 ⚡</h1>
<div class="scoreboard"> <div class="player-card" id="player1Card"> <div class="player-name p1-name">🧝 PLAYER 1</div> <div class="player-score" id="scoreP1">0</div> </div> <div class="player-card" id="player2Card"> <div class="player-name p2-name">🧙 PLAYER 2</div> <div class="player-score" id="scoreP2">0</div> </div> </div> <div class="arena"> <div class="turn-indicator" id="turnText">🔴 PLAYER 1 TURN</div> <button class="action-btn" id="mainActionBtn">🔥 CLAIM POINT 🔥</button> <div id="winnerArea" style="min-height: 70px;"></div> <button class="reset-btn" id="resetGameBtn">🔄 NEW MATCH</button> </div> <footer>🎯 tap the big button on your turn · first to 5 wins</footer> </div></div>
<script> (function() // ---------- GAME STATE ---------- let scores = [0, 0]; // index 0 = player1, 1 = player2 let currentPlayer = 0; // 0 = P1, 1 = P2 let gameActive = true; let winScore = 5; 2 playergithubio new
// DOM elements const scoreP1El = document.getElementById('scoreP1'); const scoreP2El = document.getElementById('scoreP2'); const turnText = document.getElementById('turnText'); const mainBtn = document.getElementById('mainActionBtn'); const winnerArea = document.getElementById('winnerArea'); const resetBtn = document.getElementById('resetGameBtn'); const p1Card = document.getElementById('player1Card'); const p2Card = document.getElementById('player2Card'); // Helper: update UI (scores, turn highlight, winner message) function refreshUI() // update scores scoreP1El.innerText = scores[0]; scoreP2El.innerText = scores[1]; // update active glow (only if game active, no winner) if (gameActive) if (currentPlayer === 0) p1Card.classList.add('active-turn'); p2Card.classList.remove('active-turn'); turnText.innerHTML = '🔴 PLAYER 1 · YOUR MOMENT 🔴'; turnText.style.color = '#ffaa88'; else p2Card.classList.add('active-turn'); p1Card.classList.remove('active-turn'); turnText.innerHTML = '🔵 PLAYER 2 · CLAIM IT 🔵'; turnText.style.color = '#8ac9ff'; else // game over: remove turn highlights p1Card.classList.remove('active-turn'); p2Card.classList.remove('active-turn'); // disable / enable button based on gameActive mainBtn.disabled = !gameActive; if (!gameActive) mainBtn.style.opacity = '0.6'; mainBtn.style.cursor = 'not-allowed'; else mainBtn.style.opacity = '1'; mainBtn.style.cursor = 'pointer'; // check for winner after each point function checkWinner() if (scores[0] >= winScore) gameActive = false; winnerArea.innerHTML = '<div class="winner-message">🏆 PLAYER 1 VICTORY! 🏆<br>⭐ LEGENDARY ⭐</div>'; turnText.innerHTML = '✨ GAME OVER ✨'; refreshUI(); return true; else if (scores[1] >= winScore) gameActive = false; winnerArea.innerHTML = '<div class="winner-message">🏆 PLAYER 2 VICTORY! 🏆<br>⚡ UNSTOPPABLE ⚡</div>'; turnText.innerHTML = '✨ GAME OVER ✨'; refreshUI(); return true; return false; // main action: current player scores a point function handleScore() if (!gameActive) return; // add point to current player scores[currentPlayer] += 1; // update score display immediately refreshUI(); // check if this point made someone win const hasWinner = checkWinner(); if (hasWinner) // game ended, no further turn switch return; // SWITCH TURN to other player currentPlayer = currentPlayer === 0 ? 1 : 0; // update UI after switching turn (game still active) refreshUI(); // full game reset function resetGame() scores = [0, 0]; currentPlayer = 0; // player 1 starts gameActive = true; winnerArea.innerHTML = ''; // clear winner message // reset turn text and visual refreshUI(); // extra small haptic feedback style mainBtn.style.transform = 'scale(0.99)'; setTimeout(() => mainBtn.style.transform = ''; , 100); // ---- event binding ---- mainBtn.addEventListener('click', () => handleScore(); // tiny feedback mainBtn.style.transform = 'scale(0.96)'; setTimeout(() => if(mainBtn) mainBtn.style.transform = ''; , 100); ); resetBtn.addEventListener('click', () => resetGame(); ); // touch / mouse / prevent double tap zoom on mobile mainBtn.addEventListener('touchstart', (e) => // just to avoid any weird zoom, but we let click fire e.preventDefault(); handleScore(); mainBtn.style.transform = 'scale(0.96)'; setTimeout(() => mainBtn.style.transform = ''; , 100); , passive: false ); // initial UI setup refreshUI(); )();
</script> </body> </html>
What "New" Looks Like
The "new" wave of 2-player GitHub.io games is moving away from simple flash-game clones (like the classic Fireboy and Watergirl) and experimenting with experimental physics and cooperative chaos. 🎮 Game: "First to 5" A fast-paced clicking
The modern landscape includes games like "12 MiniBattles," a collection of arcade-style microgames that switch rapidly, requiring players to adapt on the fly, or "Rooftop Snipers," a chaotic shooter where the physics are intentionally floaty and unpredictable.
The "new" trend in this scene is Asymmetry. We are seeing more games where the two players have completely different roles. One player might be the pilot of a spaceship, while the other manages the shields—requiring frantic verbal communication ("Turn left! Shield up! He’s behind us!"). This turns a casual browser game into a test of friendship and communication.
A. The Brawlers (Sumo & Stick Figures)
The bread and butter of the site. Games like Stickman Sumo or Boxing Physics focus on ragdoll mechanics. split the ball into three
- Feature Highlight: Momentum Physics. These games don't just track health bars; they track velocity. Knocking your friend off a floating platform using a perfectly timed slide feels infinitely more satisfying than a standard punch.
4. Ping Pong: Resurrection
Best for: Nostalgia + power-ups
Forget simple Pong. This fresh take (updated 6 days ago) adds an MMPORG twist. Each time you hit the ball, you charge a "spell meter." After three hits, you can cast one of four spells: freeze the opponent’s paddle, split the ball into three, shrink the opponent’s goal, or reverse their controls.
Performance: Runs at 240 FPS on a 5-year-old laptop. The developer optimized the canvas rendering specifically for low-end Chromebooks.
1. Neon Clash: Arena (2P Fighting)
Why it’s new: Uses vector-based hit detection instead of pixel squares. This game ditches the traditional health bar for a "knock-out" system. The arena shrinks every 10 seconds. Player 1 (WASD + F) and Player 2 (Arrows + M) try to push each other into neon spikes. The new update includes a "drift" mechanic where players slide on ice platforms.