<!doctype html><html lang="ko"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>WebRTC 예제 게임 – PHP로 P2P, 무료 온라인 플레이</title> <meta name="description" content="한 화면에서 대화하는 두 WebRTC 피어, 그리고 봇이나 온라인 상대와 P2P로 별을 모으는 대결: JumPHP 확장 WebRTC의 예제 게임입니다."> <link rel="canonical" href="https://{{DOMAIN}}/ko/"> <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 예제 게임 – PHP로 P2P, 무료 온라인 플레이"> <meta property="og:description" content="한 화면에서 대화하는 두 WebRTC 피어, 그리고 봇이나 온라인 상대와 P2P로 별을 모으는 대결: JumPHP 확장 WebRTC의 예제 게임입니다."> <meta property="og:url" content="https://{{DOMAIN}}/ko/"> <meta property="og:image" content="https://{{DOMAIN}}/images/og.png"> <meta property="og:locale" content="ko_KR"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="WebRTC 예제 게임 – PHP로 P2P, 무료 온라인 플레이"> <meta name="twitter:description" content="한 화면에서 대화하는 두 WebRTC 피어, 그리고 봇이나 온라인 상대와 P2P로 별을 모으는 대결: JumPHP 확장 WebRTC의 예제 게임입니다."> <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 피어, 그리고 봇이나 온라인 상대와 P2P로 별을 모으는 대결: JumPHP 확장 WebRTC의 예제 게임입니다.", "url": "https://{{DOMAIN}}/ko/", "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": "ko", "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">Українська</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" aria-current="page">한국어</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 피어, 그리고 봇이나 온라인 상대와 P2P로 별을 모으는 대결: JumPHP 확장 WebRTC의 예제 게임입니다.</p> <a class="play" href="../play/?lang=ko&back=../ko/">▶ 플레이</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, Esc. 마우스나 손가락: 버튼을 누르고, 누른 채로 이동. 휴대폰: 화면의 패드도 됩니다.</p> </section> <section> <h2>내 게임에서 사용하기</h2> <p>확장 jumphp/webrtc: 브라우저(RTCPeerConnection)와 데스크톱(GStreamer)에서 같은 PHP 코드.</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=ko&back=../ko/">▶ 플레이</a></p> <footer>JumPHP로 PHP에서 만들었습니다.</footer> </main></body></html>