Jasne, oto podstawowa struktura dla gry multiplayer 2D z opcjami tworzenia i dołączania do pokoju. Gra Multiplayer 2D Pro

Gra Multiplayer 2D

Stwórz Pokój

Dołącz do Pokoju

body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #282c34; color: #ffffff; margin: 0; } #lobby, #game-area { background-color: #3c4049; padding: 30px; border-radius: 10px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); text-align: center; } h1, h2, h3 { color: #61dafb; margin-bottom: 20px; } #room-options { display: flex; justify-content: space-around; gap: 20px; margin-bottom: 20px; } .room-action { background-color: #4a4e58; padding: 20px; border-radius: 8px; flex: 1; } input[type="text"] { padding: 10px; margin-bottom: 10px; border: 1px solid #61dafb; border-radius: 5px; background-color: #282c34; color: #ffffff; width: calc(100% - 24px); /* Adjust for padding and border */ } button { padding: 10px 20px; background-color: #61dafb; color: #282c34; border: none; border-radius: 5px; cursor: pointer; font-weight: bold; transition: background-color 0.3s ease; } button:hover { background-color: #21a1f1; } #game-canvas { border: 2px solid #61dafb; background-color: #ffffff; display: block; margin: 20px auto; border-radius: 5px; } #players-list { margin-top: 20px; text-align: left; max-width: 200px; margin-left: auto; margin-right: auto; } #players-list ul { list-style: none; padding: 0; } #players-list li { background-color: #4a4e58; padding: 5px 10px; margin-bottom: 5px; border-radius: 4px; } #leave-room-btn { margin-top: 20px; background-color: #ff6b6b; color: #ffffff; } #leave-room-btn:hover { background-color: #ee5253; } .error { color: #ff6b6b; margin-top: 15px; min-height: 1em; /* Prevent layout shift */ } // Elementy DOM const lobbyDiv = document.getElementById('lobby'); const gameAreaDiv = document.getElementById('game-area'); const createRoomBtn = document.getElementById('create-room-btn'); const joinRoomBtn = document.getElementById('join-room-btn'); const leaveRoomBtn = document.getElementById('leave-room-btn'); const createRoomNameInput = document.getElementById('create-room-name'); const joinRoomIdInput = document.getElementById('join-room-id'); const roomInfo = document.getElementById('room-info'); const roomIdDisplay = document.getElementById('room-id-display'); const playersUl = document.getElementById('player-ul'); const gameCanvas = document.getElementById('game-canvas'); const errorMessage = document.getElementById('error-message'); const ctx = gameCanvas.getContext('2d'); // Stan gry (przykładowy) let currentRoomId = null; let players = {}; // { playerId: { x, y, color } } let localPlayerId = null; let webSocket = null; // Placeholder dla WebSocket // --- Funkcje obsługi UI --- function showLobby() { lobbyDiv.style.display = 'block'; gameAreaDiv.style.display = 'none'; errorMessage.textContent = ''; // Wyczyść błędy } function showGameArea(roomId) { lobbyDiv.style.display = 'none'; gameAreaDiv.style.display = 'block'; roomIdDisplay.textContent = roomId; errorMessage.textContent = ''; // Wyczyść błędy // Tutaj inicjalizacja gry po dołączeniu do pokoju requestAnimationFrame(gameLoop); // Rozpocznij pętlę gry } function displayError(message) { errorMessage.textContent = message; } function updatePlayersList() { playersUl.innerHTML = ''; // Wyczyść listę for (const id in players) { const li = document.createElement('li'); li.textContent = `Gracz ${id.substring(0, 6)} ${id === localPlayerId ? '(Ty)' : ''}`; li.style.color = players[id].color || '#ffffff'; // Użyj koloru gracza playersUl.appendChild(li); } } // --- Logika WebSocket (Placeholder) --- function connectWebSocket(roomId, isCreating) { // UWAGA: To jest tylko placeholder. W prawdziwej aplikacji // potrzebny jest działający serwer WebSocket. console.log(`Łączenie z WebSocket dla pokoju: ${roomId}, Tworzenie: ${isCreating}`); // Symulacja połączenia i otrzymania ID gracza localPlayerId = `player_${Math.random().toString(16).substring(2, 8)}`; players[localPlayerId] = { x: 100, y: 100, color: getRandomColor() }; // Początkowa pozycja i kolor console.log(`Połączono jako: ${localPlayerId}`); // Symulacja dołączenia innych graczy (dla testów) setTimeout(() => { if (Object.keys(players).length < 4) { // Dodaj max 3 innych graczy const otherPlayerId = `player_${Math.random().toString(16).substring(2, 8)}`; players[otherPlayerId] = { x: Math.random() * gameCanvas.width, y: Math.random() * gameCanvas.height, color: getRandomColor() }; updatePlayersList(); console.log(`Dołączył gracz: ${otherPlayerId}`); } }, 2000); // Tutaj normalnie byłoby: // webSocket = new WebSocket('ws://twoj-adres-serwera'); // webSocket.onopen = () => { ... wysłanie info o dołączeniu/stworzeniu ... }; // webSocket.onmessage = (event) => { ... obsługa wiadomości od serwera (aktualizacje stanu gry, nowi gracze etc.) ... }; // webSocket.onclose = () => { ... obsługa rozłączenia ... }; // webSocket.onerror = (error) => { ... obsługa błędów ... }; // Po "połączeniu" pokaż obszar gry currentRoomId = roomId; showGameArea(roomId); updatePlayersList(); // Pokaż siebie na liście } function sendMessage(type, payload) { // UWAGA: Placeholder console.log(`Wysyłanie wiadomości: Typ=${type}, Dane=${JSON.stringify(payload)}`); // W prawdziwej aplikacji: // if (webSocket && webSocket.readyState === WebSocket.OPEN) { // webSocket.send(JSON.stringify({ type, payload })); // } // Symulacja odpowiedzi serwera na ruch (dla testów) if (type === 'move') { // W prawdziwej aplikacji serwer by rozgłosił ten ruch // Tutaj tylko aktualizujemy lokalnie dla demonstracji if (players[payload.playerId]) { players[payload.playerId].x = payload.x; players[payload.playerId].y = payload.y; } } } // --- Logika Gry --- const playerSpeed = 5; const keysPressed = {}; function handleKeyDown(event) { keysPressed[event.key.toLowerCase()] = true; } function handleKeyUp(event) { keysPressed[event.key.toLowerCase()] = false; } function updatePlayerPosition() { if (!localPlayerId || !players[localPlayerId]) return; let dx = 0; let dy = 0; if (keysPressed['w'] || keysPressed['arrowup']) dy -= playerSpeed; if (keysPressed['s'] || keysPressed['arrowdown']) dy += playerSpeed; if (keysPressed['a'] || keysPressed['arrowleft']) dx -= playerSpeed; if (keysPressed['d'] || keysPressed['arrowright']) dx += playerSpeed; if (dx !== 0 || dy !== 0) { const player = players[localPlayerId]; const newX = Math.max(0, Math.min(gameCanvas.width - 20, player.x + dx)); // Ograniczenie do canvasa (rozmiar gracza 20x20) const newY = Math.max(0, Math.min(gameCanvas.height - 20, player.y + dy)); // Ograniczenie do canvasa if (player.x !== newX || player.y !== newY) { // Aktualizuj lokalnie natychmiast dla płynności player.x = newX; player.y = newY; // Wyślij aktualizację pozycji do serwera (placeholder) sendMessage('move', { playerId: localPlayerId, x: newX, y: newY }); } } } function draw() { // Wyczyść canvas ctx.clearRect(0, 0, gameCanvas.width, gameCanvas.height); ctx.fillStyle = '#f0f0f0'; // Tło canvasa ctx.fillRect(0, 0, gameCanvas.width, gameCanvas.height); // Narysuj wszystkich graczy for (const id in players) { const player = players[id]; ctx.fillStyle = player.color || 'blue'; // Domyślny kolor, jeśli nie ma ctx.fillRect(player.x, player.y, 20, 20); // Narysuj gracza jako kwadrat 20x20 // Opcjonalnie: Narysuj ID nad graczem ctx.fillStyle = 'black'; ctx.font = '10px sans-serif'; ctx.fillText(id.substring(0, 6), player.x, player.y - 5); } } function gameLoop() { if (!currentRoomId) return; // Zatrzymaj pętlę, jeśli nie jesteśmy w pokoju updatePlayerPosition(); // Zaktualizuj pozycję lokalnego gracza na podstawie inputu // W prawdziwej aplikacji tutaj odbieralibyśmy i przetwarzali aktualizacje od serwera draw(); // Narysuj aktualny stan gry requestAnimationFrame(gameLoop); // Kontynuuj pętlę } function getRandomColor() { const letters = '0123456789ABCDEF'; let color = '#'; for (let i = 0; i < 6; i++) { color += letters[Math.floor(Math.random() * 16)]; } return color; } // --- Event Listeners --- createRoomBtn.addEventListener('click', () => { const roomName = createRoomNameInput.value.trim(); if (roomName) { const roomId = `room_${Math.random().toString(16).substring(2, 10)}`; // Wygeneruj losowe ID pokoju console.log(`Tworzenie pokoju: ${roomName} (ID: ${roomId})`); connectWebSocket(roomId, true); // Połącz (placeholder) } else { displayError('Wprowadź nazwę pokoju.'); } }); joinRoomBtn.addEventListener('click', () => { const roomId = joinRoomIdInput.value.trim(); if (roomId) { console.log(`Dołączanie do pokoju: ${roomId}`); connectWebSocket(roomId, false); // Połącz (placeholder) } else { displayError('Wprowadź ID pokoju.'); } }); leaveRoomBtn.addEventListener('click', () => { console.log(`Opuszczanie pokoju: ${currentRoomId}`); if (webSocket) { // webSocket.close(); // Zamknij prawdziwe połączenie } webSocket = null; currentRoomId = null; localPlayerId = null; players = {}; // Wyczyść graczy keysPressed = {}; // Zresetuj klawisze showLobby(); // Wróć do lobby playersUl.innerHTML = ''; // Wyczyść listę graczy UI ctx.clearRect(0, 0, gameCanvas.width, gameCanvas.height); // Wyczyść canvas }); // Nasłuchiwanie na input gracza window.addEventListener('keydown', handleKeyDown); window.addEventListener('keyup', handleKeyUp); // Pokaż lobby na starcie showLobby();

Gra Multiplayer 2D

Stwórz Pokój

Dołącz do Pokoju

Pokój:

Gracze: