<!doctype html><html lang="es"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Juego de ejemplo WebRTC – de igual a igual en PHP, juega gratis en línea</title> <meta name="description" content="Dos pares WebRTC que hablan en una pantalla y un duelo de estrellas de igual a igual, contra un bot o en línea: el juego de ejemplo de la extensión WebRTC de JumPHP."> <link rel="canonical" href="https://{{DOMAIN}}/es/"> <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="Juego de ejemplo WebRTC – de igual a igual en PHP, juega gratis en línea"> <meta property="og:description" content="Dos pares WebRTC que hablan en una pantalla y un duelo de estrellas de igual a igual, contra un bot o en línea: el juego de ejemplo de la extensión WebRTC de JumPHP."> <meta property="og:url" content="https://{{DOMAIN}}/es/"> <meta property="og:image" content="https://{{DOMAIN}}/images/og.png"> <meta property="og:locale" content="es_ES"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="Juego de ejemplo WebRTC – de igual a igual en PHP, juega gratis en línea"> <meta name="twitter:description" content="Dos pares WebRTC que hablan en una pantalla y un duelo de estrellas de igual a igual, contra un bot o en línea: el juego de ejemplo de la extensión WebRTC de 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": "Dos pares WebRTC que hablan en una pantalla y un duelo de estrellas de igual a igual, contra un bot o en línea: el juego de ejemplo de la extensión WebRTC de JumPHP.", "url": "https://{{DOMAIN}}/es/", "genre": "Demo multijugador", "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": "es", "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" aria-current="page">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">한국어</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>Dos pares WebRTC que hablan en una pantalla y un duelo de estrellas de igual a igual, contra un bot o en línea: el juego de ejemplo de la extensión WebRTC de JumPHP.</p> <a class="play" href="../play/?lang=es&back=../es/">▶ Jugar</a> </header> <div class="hero"><img src="../images/shot-3.png" alt="Captura del juego de ejemplo WebRTC" width="640" height="360"></div> <section> <h2>Qué puedes probar</h2> <ul> <li>Dos pares en esta pantalla: dos conexiones WebRTC dentro de tu página hablan por canales de datos. Un PING vuelve como PONG con su tiempo de ida y vuelta, y tu cursor viaja por un canal no fiable, como UDP.</li> <li>Practicar contra un bot: un duelo para atrapar estrellas. El bot tiene su propio par WebRTC y juega a través de él, como un jugador remoto.</li> <li>Jugar en línea: dos jugadores se encuentran en el relé, que solo transmite sus señales WebRTC; después el juego va directo de un navegador al otro.</li> </ul> </section> <section> <h2>Controles</h2> <p>Teclado: flechas, Espacio, Intro, Escape. Ratón o dedo: pulsa los botones, mantén para moverte. Móvil: también funciona la cruceta en pantalla.</p> </section> <section> <h2>Úsalo en tu propio juego</h2> <p>La extensión jumphp/webrtc: el mismo código PHP en el navegador (RTCPeerConnection) y en el ordenador (GStreamer).</p> <p><a href="https://jumphp.net/extensions/jumphp/webrtc/tutoriel">tutorial paso a paso</a> · <a href="https://jumphp.net/extensions/jumphp/webrtc/documentation">documentación</a> · <code>bin/jumphp extension:add <game> jumphp/webrtc</code></p> </section> <section> <h2>Capturas</h2> <div class="gallery"> <img src="../images/shot-1.png" alt="Captura del juego de ejemplo WebRTC 1" width="640" height="360" loading="lazy"> <img src="../images/shot-2.png" alt="Captura del juego de ejemplo WebRTC 2" width="640" height="360" loading="lazy"> <img src="../images/shot-3.png" alt="Captura del juego de ejemplo WebRTC 3" width="640" height="360" loading="lazy"> <img src="../images/shot-4.png" alt="Captura del juego de ejemplo WebRTC 4" width="640" height="360" loading="lazy"> </div> </section> <p style="text-align: center"><a class="play" href="../play/?lang=es&back=../es/">▶ Jugar</a></p> <footer>Hecho en PHP con JumPHP.</footer> </main></body></html>