<!doctype html><html lang="uk"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Приклад гри WebRTC – peer-to-peer на PHP, грайте безкоштовно онлайн</title> <meta name="description" content="Два WebRTC-піри спілкуються на одному екрані, потім дуель за зірки напряму, проти бота або онлайн: приклад гри для розширення WebRTC JumPHP."> <link rel="canonical" href="https://{{DOMAIN}}/uk/"> <link rel="alternate" hreflang="en" href="https://{{DOMAIN}}/"> <link rel="alternate" hreflang="fr" href="https://{{DOMAIN}}/fr/"> <link rel="alternate" hreflang="es" href="https://{{DOMAIN}}/es/"> <link rel="alternate" hreflang="de" href="https://{{DOMAIN}}/de/"> <link rel="alternate" hreflang="it" href="https://{{DOMAIN}}/it/"> <link rel="alternate" hreflang="pt" href="https://{{DOMAIN}}/pt/"> <link rel="alternate" hreflang="nl" href="https://{{DOMAIN}}/nl/"> <link rel="alternate" hreflang="pl" href="https://{{DOMAIN}}/pl/"> <link rel="alternate" hreflang="ru" href="https://{{DOMAIN}}/ru/"> <link rel="alternate" hreflang="uk" href="https://{{DOMAIN}}/uk/"> <link rel="alternate" hreflang="tr" href="https://{{DOMAIN}}/tr/"> <link rel="alternate" hreflang="ja" href="https://{{DOMAIN}}/ja/"> <link rel="alternate" hreflang="zh" href="https://{{DOMAIN}}/zh/"> <link rel="alternate" hreflang="ko" href="https://{{DOMAIN}}/ko/"> <link rel="alternate" hreflang="x-default" href="https://{{DOMAIN}}/"> <link rel="icon" href="../images/favicon.png"> <meta property="og:type" content="website"> <meta property="og:title" content="Приклад гри WebRTC – peer-to-peer на PHP, грайте безкоштовно онлайн"> <meta property="og:description" content="Два WebRTC-піри спілкуються на одному екрані, потім дуель за зірки напряму, проти бота або онлайн: приклад гри для розширення WebRTC JumPHP."> <meta property="og:url" content="https://{{DOMAIN}}/uk/"> <meta property="og:image" content="https://{{DOMAIN}}/images/og.png"> <meta property="og:locale" content="uk_UA"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="Приклад гри WebRTC – peer-to-peer на PHP, грайте безкоштовно онлайн"> <meta name="twitter:description" content="Два WebRTC-піри спілкуються на одному екрані, потім дуель за зірки напряму, проти бота або онлайн: приклад гри для розширення WebRTC JumPHP."> <meta name="twitter:image" content="https://{{DOMAIN}}/images/og.png"> <script type="application/ld+json">{ "@context": "https://schema.org", "@type": "VideoGame", "name": "WebRTC – JumPHP", "description": "Два WebRTC-піри спілкуються на одному екрані, потім дуель за зірки напряму, проти бота або онлайн: приклад гри для розширення WebRTC JumPHP.", "url": "https://{{DOMAIN}}/uk/", "genre": "Багатокористувацьке демо", "gamePlatform": [ "Web browser", "PC", "Mobile" ], "applicationCategory": "Game", "operatingSystem": "Any", "image": "https://{{DOMAIN}}/images/og.png", "screenshot": [ "https://{{DOMAIN}}/images/shot-1.png", "https://{{DOMAIN}}/images/shot-2.png", "https://{{DOMAIN}}/images/shot-3.png", "https://{{DOMAIN}}/images/shot-4.png" ], "isAccessibleForFree": true, "inLanguage": "uk", "numberOfPlayers": { "@type": "QuantitativeValue", "minValue": 1, "maxValue": 2 }, "potentialAction": { "@type": "PlayAction", "target": "https://{{DOMAIN}}/play/" }} </script> <style> :root { --bg: #0a0c18; --panel: #161a30; --text: #eef0ff; --muted: #a7acc9; --me: #40d680; --other: #ff9640; --accent: #5ac8ff; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font: 17px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif; } main { max-width: 1000px; margin: 0 auto; padding: 16px 16px 64px; } nav { font-size: 13px; color: var(--muted); text-align: center; line-height: 2; } nav a { color: var(--muted); text-decoration: none; white-space: nowrap; } nav a[aria-current] { color: var(--text); font-weight: 700; } header { text-align: center; padding: 24px 0 8px; } .peers { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 8px; } .peers i { width: 28px; height: 28px; display: block; } .peers b { flex: 0 1 220px; height: 2px; background: linear-gradient(90deg, var(--me), var(--other)); } h1 { font-size: clamp(32px, 7vw, 56px); margin: 0 0 8px; letter-spacing: 1px; } h2 { margin: 48px 0 12px; font-size: 24px; } p, li { color: var(--muted); } li { margin-bottom: 8px; } li strong { color: var(--text); } .play { display: inline-block; margin: 20px 0; padding: 16px 40px; border-radius: 12px; background: var(--me); color: #07130c; font-weight: 800; font-size: 22px; text-decoration: none; box-shadow: 0 6px 0 #1f8a4c; } .play:active { transform: translateY(4px); box-shadow: 0 2px 0 #1f8a4c; } .hero img, .gallery img { width: 100%; height: auto; image-rendering: pixelated; border-radius: 10px; display: block; background: #000; } .gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; } code { background: var(--panel); padding: 2px 6px; border-radius: 6px; color: var(--text); word-break: break-all; } footer { text-align: center; color: var(--muted); font-size: 14px; margin-top: 56px; } a { color: var(--accent); } </style></head><body> <main> <nav aria-label="Language"><a href="../" lang="en">English</a> · <a href="../fr/" lang="fr">Français</a> · <a href="../es/" lang="es">Español</a> · <a href="../de/" lang="de">Deutsch</a> · <a href="../it/" lang="it">Italiano</a> · <a href="../pt/" lang="pt">Português</a> · <a href="../nl/" lang="nl">Nederlands</a> · <a href="../pl/" lang="pl">Polski</a> · <a href="../ru/" lang="ru">Русский</a> · <a href="../uk/" lang="uk" aria-current="page">Українська</a> · <a href="../tr/" lang="tr">Türkçe</a> · <a href="../ja/" lang="ja">日本語</a> · <a href="../zh/" lang="zh">中文</a> · <a href="../ko/" lang="ko">한국어</a></nav> <header> <div class="peers" aria-hidden="true"><i style="background: var(--me)"></i><b></b><i style="background: var(--other)"></i></div> <h1>WebRTC</h1> <p>Два WebRTC-піри спілкуються на одному екрані, потім дуель за зірки напряму, проти бота або онлайн: приклад гри для розширення WebRTC JumPHP.</p> <a class="play" href="../play/?lang=uk&back=../uk/">▶ Грати</a> </header> <div class="hero"><img src="../images/shot-3.png" alt="Знімок екрана прикладу гри WebRTC" width="640" height="360"></div> <section> <h2>Що можна спробувати</h2> <ul> <li>Два піри на цьому екрані: два WebRTC-з’єднання у вашій сторінці спілкуються каналами даних. PING повертається як PONG із часом туди й назад, а ваш курсор іде ненадійним каналом, як UDP.</li> <li>Тренування з ботом: дуель на ловлю зірок. Бот має власний WebRTC-пір і грає через нього, як віддалений гравець.</li> <li>Гра онлайн: два гравці зустрічаються на ретрансляторі, який лише передає їхні WebRTC-сигнали; далі гра йде напряму з браузера в браузер.</li> </ul> </section> <section> <h2>Керування</h2> <p>Клавіатура: стрілки, Пробіл, Enter, Escape. Миша або палець: натискайте кнопки, утримуйте, щоб рухатися. Телефон: екранний джойстик теж працює.</p> </section> <section> <h2>Використайте у своїй грі</h2> <p>Розширення jumphp/webrtc: той самий PHP-код у браузері (RTCPeerConnection) і на комп’ютері (GStreamer).</p> <p><a href="https://jumphp.net/extensions/jumphp/webrtc/tutoriel">покроковий посібник</a> · <a href="https://jumphp.net/extensions/jumphp/webrtc/documentation">документація</a> · <code>bin/jumphp extension:add <game> jumphp/webrtc</code></p> </section> <section> <h2>Знімки екрана</h2> <div class="gallery"> <img src="../images/shot-1.png" alt="Знімок екрана прикладу гри WebRTC 1" width="640" height="360" loading="lazy"> <img src="../images/shot-2.png" alt="Знімок екрана прикладу гри WebRTC 2" width="640" height="360" loading="lazy"> <img src="../images/shot-3.png" alt="Знімок екрана прикладу гри WebRTC 3" width="640" height="360" loading="lazy"> <img src="../images/shot-4.png" alt="Знімок екрана прикладу гри WebRTC 4" width="640" height="360" loading="lazy"> </div> </section> <p style="text-align: center"><a class="play" href="../play/?lang=uk&back=../uk/">▶ Грати</a></p> <footer>Зроблено на PHP з JumPHP.</footer> </main></body></html>