Хорошо, давайте внесем эти улучшения. Мы исправим логику прыжков и столкновений, чтобы игроки могли успешно забираться выше, переключим управление на использование `event.code` для поддержки разных раскладок клавиатуры, добавим простое главное меню и улучшим визуализацию с помощью градиентного фона и отрисовки игроков как кругов с контуром. Двухпользовательский Платформер

Платформер для двух игроков

body { margin: 0; overflow: hidden; background-color: #f0f0f0; display: flex; justify-content: center; align-items: center; min-height: 100vh; font-family: sans-serif; } canvas { border: 1px solid #000; /* Background will be drawn in JS */ } .hidden { display: none; } #mainMenu { display: flex; flex-direction: column; align-items: center; padding: 20px; border: 1px solid #ccc; background-color: #fff; box-shadow: 2px 2px 8px rgba(0,0,0,0.3); border-radius: 8px; } #mainMenu h1 { margin-bottom: 20px; color: #333; } #mainMenu button { margin: 10px 0; padding: 10px 20px; font-size: 16px; cursor: pointer; border: 1px solid #007bff; border-radius: 4px; background-color: #007bff; color: white; transition: background-color 0.3s ease; } #mainMenu button:hover { background-color: #0056b3; } #mainMenu button#exitBtn { background-color: #dc3545; border-color: #dc3545; } #mainMenu button#exitBtn:hover { background-color: #c82333; } const canvas = document.getElementById('gameCanvas'); const ctx = canvas.getContext('2d'); const mainMenu = document.getElementById('mainMenu'); const singlePlayerBtn = document.getElementById('singlePlayerBtn'); const twoPlayerBtn = document.getElementById('twoPlayerBtn'); const exitBtn = document.getElementById('exitBtn'); canvas.width = 600; canvas.height = 800; const gravity = 0.5; const jumpStrength = -10; // Сила прыжка const moveSpeed = 5; let cameraY = 0; // Смещение камеры по оси Y (мировые координаты вверху холста) let gameState = 'menu'; // 'menu', 'playing' const players = [ { // Player 1 x: 100, y: canvas.height - 50, // Начальная позиция на земле width: 30, // Ширина для коллизии height: 30, // Высота для коллизии color: 'blue', vx: 0, vy: 0, isJumping: true, // Используем event.code для поддержки раскладок controls: { left: 'KeyA', right: 'KeyD', attack: 'KeyW' } }, { // Player 2 x: canvas.width - 130, // Начальная позиция на земле y: canvas.height - 50, width: 30, height: 30, color: 'red', vx: 0, vy: 0, isJumping: true, // Используем event.code для поддержки раскладок controls: { left: 'ArrowLeft', right: 'ArrowRight', attack: 'ArrowUp' } } ]; // Платформы в мировых координатах (Y=0 вверху мира, Y увеличивается вниз) const platforms = [ { x: 0, y: canvas.height - 20, width: canvas.width, height: 20, color: '#228B22' }, // Земля (ForestGreen) { x: 100, y: canvas.height - 100, width: 150, height: 20, color: '#32CD32' }, // LimeGreen { x: canvas.width - 250, y: canvas.height - 200, width: 150, height: 20, color: '#3CB371' }, // MediumSeaGreen { x: 50, y: canvas.height - 300, width: 100, height: 20, color: '#90EE90' }, // LightGreen { x: canvas.width - 150, y: canvas.height - 400, width: 100, height: 20, color: '#66CDAA' }, // MediumAquaMarine { x: 200, y: canvas.height - 500, width: 200, height: 20, color: '#2E8B57' }, // SeaGreen // Добавляем больше платформ выше (меньшие значения Y) { x: 50, y: canvas.height - 650, width: 100, height: 20, color: '#32CD32' }, { x: canvas.width - 150, y: canvas.height - 750, width: 100, height: 20, color: '#3CB371' }, { x: 200, y: canvas.height - 900, width: 200, height: 20, color: '#90EE90' }, { x: 100, y: canvas.height - 1050, width: 150, height: 20, color: '#66CDAA' }, { x: canvas.width - 250, y: canvas.height - 1150, width: 150, height: 20, color: '#2E8B57' }, { x: 50, y: canvas.height - 1300, width: 100, height: 20, color: '#32CD32' }, { x: canvas.width - 150, y: canvas.height - 1450, width: 100, height: 20, color: '#3CB371' }, { x: 200, y: canvas.height - 1600, width: 200, height: 20, color: '#90EE90' }, { x: 100, y: canvas.height - 1750, width: 150, height: 20, color: '#66CDAA' }, { x: canvas.width - 250, y: canvas.height - 1850, width: 150, height: 20, color: '#2E8B57' }, { x: 50, y: canvas.height - 2000, width: 100, height: 20, color: '#32CD32' }, { x: canvas.width - 150, y: canvas.height - 2150, width: 100, height: 20, color: '#3CB371' }, { x: 200, y: canvas.height - 2300, width: 200, height: 20, color: '#90EE90' }, ]; const keys = {}; // Используем event.code для надежности window.addEventListener('keydown', (e) => { keys[e.code] = true; // Предотвращаем прокрутку страницы стрелками и пробелом if (['Space', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(e.code)) { e.preventDefault(); } }); window.addEventListener('keyup', (e) => { keys[e.code] = false; }); function checkCollision(rect1, rect2) { return rect1.x < rect2.x + rect2.width && rect1.x + rect1.width > rect2.x && rect1.y < rect2.y + rect2.height && rect1.y + rect1.height > rect2.y; } function startGame() { gameState = 'playing'; mainMenu.classList.add('hidden'); canvas.classList.remove('hidden'); // Reset player positions for a fresh start players[0].x = 100; players[0].y = canvas.height - 50; players[0].vy = 0; players[0].isJumping = true; players[1].x = canvas.width - 130; players[1].y = canvas.height - 50; players[1].vy = 0; players[1].isJumping = true; cameraY = 0; // Reset camera gameLoop(); // Start the game loop } function showMenu() { gameState = 'menu'; mainMenu.classList.remove('hidden'); canvas.classList.add('hidden'); } singlePlayerBtn.addEventListener('click', startGame); // For now, single player starts 2-player game twoPlayerBtn.addEventListener('click', startGame); exitBtn.addEventListener('click', showMenu); // Exit just goes back to menu function updatePlayer(player) { const prevX = player.x; const prevY = player.y; // Apply gravity player.vy += gravity; // Handle horizontal movement player.vx = 0; if (keys[player.controls.left]) { player.vx = -moveSpeed; } if (keys[player.controls.right]) { player.vx = moveSpeed; } // --- Vertical Movement and Collision --- let potentialY = player.y + player.vy; let landedOnPlatform = false; // Check vertical collision with platforms platforms.forEach(platform => { // Create a temporary rectangle for the player at the potential new Y position const playerRect = { x: player.x, y: potentialY, width: player.width, height: player.height }; if (checkCollision(playerRect, platform)) { // Collision occurred vertically // Check if landing on top of platform (moving down, and bottom was above platform top) if (player.vy > 0 && prevY + player.height <= platform.y) { potentialY = platform.y - player.height; // Snap to top player.vy = 0; // Stop vertical movement landedOnPlatform = true; // Mark that we landed } // Check if hitting bottom of platform (moving up, and top was below platform bottom) else if (player.vy < 0 && prevY >= platform.y + platform.height) { potentialY = platform.y + platform.height; // Snap to bottom player.vy = 0; // Stop vertical movement } } }); // Apply resolved vertical position player.y = potentialY; // Trigger auto-jump if landed if (landedOnPlatform) { player.isJumping = false; // Briefly not jumping player.vy = jumpStrength; // Trigger jump player.isJumping = true; // Now jumping } else { // If not on a platform and vy is not 0, player is falling/jumping if (player.vy !== 0) { player.isJumping = true; } // If vy is 0 but not on a platform, they just walked off // isJumping will become true next frame when gravity makes vy > 0 } // --- Horizontal Movement and Collision --- let potentialX = player.x + player.vx; // Check horizontal collision with platforms platforms.forEach(platform => { // Create a temporary rectangle for the player at the potential new X position const playerRect = { x: potentialX, y: player.y, width: player.width, height: player.height }; if (checkCollision(playerRect, platform)) { // Collision occurred horizontally // Check if hitting right side of platform (moving right, and left was left of platform right) if (player.vx > 0 && prevX + player.width <= platform.x) { potentialX = platform.x - player.width; // Snap to left side player.vx = 0; // Stop horizontal movement } // Check if hitting left side of platform (moving left, and right was right of platform left) else if (player.vx < 0 && prevX >= platform.x + platform.width) { potentialX = platform.x + platform.width; // Snap to right side player.vx = 0; // Stop horizontal movement } } }); // Apply resolved horizontal position player.x = potentialX; // Keep players within canvas bounds horizontally if (player.x < 0) player.x = 0; if (player.x + player.width > canvas.width) player.x = canvas.width - player.width; // Handle falling off the bottom (relative to camera) // If player's world Y is below the bottom of the current camera view if (player.y > cameraY + canvas.height) { // Reset position near the bottom of the current view player.x = players[0] === player ? 100 : canvas.width - 130; player.y = cameraY + canvas.height - 100; // Reset slightly above the bottom edge player.vy = 0; player.isJumping = true; // Assume they will land soon } } function update() { if (gameState !== 'playing') return; players.forEach(updatePlayer); // Update camera based on the lowest player // We want the camera to follow the player who is lowest on the screen, // so the view scrolls up as they ascend. // The lowest Y value in world coordinates means the highest position on the screen. // We need the highest Y value in world coordinates (lowest position on screen) // to determine when to scroll up. const highestPlayerY = Math.min(players[0].y, players[1].y); // Smallest Y is highest position // If the highest player is in the top 25% of the screen, scroll up const scrollThreshold = canvas.height * 0.25; if (highestPlayerY - cameraY < scrollThreshold) { // Adjust cameraY so that the highest player's screen Y is at the threshold // highestPlayerY (world) - cameraY = scrollThreshold (screen) // cameraY = highestPlayerY - scrollThreshold cameraY = highestPlayerY - scrollThreshold; } // Prevent camera from going below the initial ground level (Y = canvas.height - 20) // When cameraY is 0, world Y = screen Y. Ground at canvas.height - 20 world Y is at canvas.height - 20 screen Y. // If we want the ground to be at the very bottom of the screen (canvas.height), // then (canvas.height - 20) - cameraY = canvas.height => cameraY = -20. // So, cameraY should not be less than -20 if we want the initial ground always visible at the bottom. // Let's cap cameraY at 0 for simplicity for now, meaning the initial ground is slightly above the bottom. cameraY = Math.min(cameraY, 0); } function draw() { if (gameState !== 'playing') return; // Draw background gradient const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height); gradient.addColorStop(0, '#87ceeb'); // Sky blue at the top of the canvas gradient.addColorStop(1, '#f0f0f0'); // Light grey at the bottom of the canvas ctx.fillStyle = gradient; ctx.fillRect(0, 0, canvas.width, canvas.height); // Draw platforms platforms.forEach(platform => { // Calculate screen coordinates const screenY = platform.y - cameraY; // Draw only those platforms that are visible on the screen if (screenY + platform.height > 0 && screenY < canvas.height) { ctx.fillStyle = platform.color; ctx.fillRect(platform.x, screenY, platform.width, platform.height); ctx.strokeStyle = 'black'; // Outline ctx.lineWidth = 2; ctx.strokeRect(platform.x, screenY, platform.width, platform.height); } }); // Draw players players.forEach(player => { // Calculate screen coordinates for the center of the circle const screenX_center = player.x + player.width / 2; const screenY_center = player.y + player.height / 2 - cameraY; const radius = player.width / 2; // Use half width as radius ctx.fillStyle = player.color; ctx.beginPath(); ctx.arc(screenX_center, screenY_center, radius, 0, Math.PI * 2); ctx.fill(); ctx.strokeStyle = 'black'; // Outline ctx.lineWidth = 2; ctx.stroke(); }); } function gameLoop() { update(); draw(); // Only continue the loop if the game state is 'playing' if (gameState === 'playing') { requestAnimationFrame(gameLoop); } } // Initially show the menu showMenu(); // The game loop will be started by the button click Теперь: 1. Логика столкновений и прыжков улучшена, игроки должны корректно приземляться на платформы и автоматически подпрыгивать. 2. Управление для первого игрока (WAD) теперь использует `event.code`, что делает его независимым от раскладки клавиатуры. 3. Добавлено простое главное меню с тремя кнопками. Кнопки "Игра на одного" и "Играть с другом" пока запускают одну и ту же игру для двух игроков. Кнопка "Выход" возвращает в меню. 4. Визуализация улучшена: добавлен градиентный фон, игроки отрисовываются как цветные круги с черным контуром, платформы - как цветные прямоугольники с контуром. Запустите проект, и вы увидите главное меню. Нажмите "Играть с другом" (или "Игра на одного"), чтобы начать игру.