> ## Documentation Index
> Fetch the complete documentation index at: https://docs.zonely.gen.tr/llms.txt
> Use this file to discover all available pages before exploring further.

# Minigame Studio

> Prepare información de juego, código HTML, esquema y recompensas; verifique vista previa y consola.

**Minigame Studio** abre y abre la pantalla **Agregar Minigame** Pulse el botón. Información del juego, código, premios de diagrama y herramientas de prueba se encuentran en la misma regulación.

Usted puede preparar diferentes tipos de juegos de navegador como rompecabezas, reflejo, plataforma, tarjeta o arena con HTML, CSS y JavaScript. idea del juego y controles inteligencia artificial **HTML código de página individual** Usted puede pedir la creación, añadir el resultado a la vista del código del estudio y probarlo en la vista previa en vivo.

Habitaciones en tiempo real, jugadores para añadir recompensas y recompensas **Desarrollado** Utilice la guía de enlace en la pestaña mientras prepara el código de juego.

## Rellene la información del juego

**Información del juego** Prepare el nombre, descripción, cubrir la opción visual y activa en la pestaña. Los siguientes **Caza de luz** Por ejemplo, los jugadores recogen luces y escapan de las esferas rojas. No hay escritura en el juego; la barra de progreso y tres pueden icono se utilizan.

[![General information, Connection mode](https://mintcdn.com/zonely-a8cd49e7/rwMU9q3NELY6LUJe/images/panel/tools-integrations-guide-20261027/mini-oyunlar-01-es.png?fit=max\&auto=format\&n=rwMU9q3NELY6LUJe\&q=85\&s=8cf7d74d00ef2320bbd5eed8bd55fb69)](https://docs.zonely.gen.tr/images/panel/tools-integrations-guide-20261027/mini-oyunlar-01-es.png)

> [card] 1. Información general
>
> Sea el nombre, descripción, cubrir el estado visual y activo.

> [card] 2. Modo de conexión
>
> onely Public Server utiliza puente listo para abrir. El servidor privado es una opción diferente.

**Modo de conexión** Seleccione el entorno de trabajo de la lista al juego.

| Home | Usage |
| - | - |
| Zonely Public Server | Ready-to-browser working environment and game bridge. |
| Zonely Minigame Server | Your own Zonely gaming server’s working environment. |
| Private Socket.IO | Connection of your own Socket.IO server. |
| Private WebSocket | Link to your own WebSocket server. |

Llene la dirección y las áreas de carretera abiertas cuando seleccione enlaces privados. Métodos para usar el juego en la conexión lista **Desarrollado** Ver la ficha.

## Agregar código del juego

**Códigos de minijuego** Abra la vista de código de la pestaña. Copia el siguiente ejemplo y pegarlo en este campo; HTML, CSS y JavaScript están incluidos en el mismo código.

```html title="Caza de luz — Códigos de minijuego" theme={"theme":"css-variables"}
<!doctype html>
<html lang="tr">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title></title>
<style>
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#090e20}
canvas{display:block;width:100%;height:100%;touch-action:none;outline:none}
</style>
<canvas tabindex="0" aria-label="Recoger las luces y evitar las orbes rojas"></canvas>
<script>
const c=document.querySelector('canvas'),g=c.getContext('2d');
let w,h,p,stars,foes,count,lives,mode,shield,last=0,target=null,elapsed=0;
const keys=new Set(),goal=12;
function size(){w=innerWidth;h=innerHeight;c.width=w*devicePixelRatio;c.height=h*devicePixelRatio;g.setTransform(devicePixelRatio,0,0,devicePixelRatio,0,0);reset()}
function point(){return{x:24+Math.random()*Math.max(1,w-48),y:85+Math.random()*Math.max(1,h-115)}}
function reset(){p={x:w/2,y:h/2};stars=Array.from({length:7},point);foes=Array.from({length:3},(_,i)=>({x:(i+1)*w/4,y:90,vx:65+i*15,vy:50+i*15}));count=0;lives=3;mode='play';shield=1.5;elapsed=0;target=null;keys.clear()}
function aim(e){const r=c.getBoundingClientRect();target={x:e.clientX-r.left,y:e.clientY-r.top}}
c.onpointermove=aim;
c.onpointerdown=e=>{c.focus();if(mode!=='play')reset();aim(e)};
c.onkeydown=e=>{if(['ArrowUp','ArrowDown','ArrowLeft','ArrowRight',' '].includes(e.key))e.preventDefault();if(mode!=='play'&&(e.key===' '||e.key==='Enter'))reset();keys.add(e.key.toLowerCase())};
c.onkeyup=e=>keys.delete(e.key.toLowerCase());
onblur=()=>keys.clear();onresize=size;
function ball(x,y,r,color){g.beginPath();g.arc(x,y,r,0,Math.PI*2);g.fillStyle=color;g.fill()}
function frame(t){const dt=Math.min((t-last)/1000||0,.035);last=t;elapsed+=dt;
if(mode==='play'){
 shield=Math.max(0,shield-dt);
 let dx=0,dy=0;if(keys.has('a')||keys.has('arrowleft'))dx--;if(keys.has('d')||keys.has('arrowright'))dx++;if(keys.has('w')||keys.has('arrowup'))dy--;if(keys.has('s')||keys.has('arrowdown'))dy++;
 if(dx||dy){target=null;const n=Math.hypot(dx,dy);p.x+=dx/n*280*dt;p.y+=dy/n*280*dt}
 else if(target){const x=target.x-p.x,y=target.y-p.y,n=Math.hypot(x,y),step=Math.min(n,320*dt);if(n){p.x+=x/n*step;p.y+=y/n*step}}
 p.x=Math.max(16,Math.min(w-16,p.x));p.y=Math.max(72,Math.min(h-16,p.y));
 for(let i=0;i<stars.length;i++)if(Math.hypot(p.x-stars[i].x,p.y-stars[i].y)<25){count++;stars[i]=point();if(count>=goal){mode='win';break}}
 for(const f of foes){f.x+=f.vx*dt;f.y+=f.vy*dt;if(f.x<16||f.x>w-16){f.vx*=-1;f.x=Math.max(16,Math.min(w-16,f.x))}if(f.y<75||f.y>h-16){f.vy*=-1;f.y=Math.max(75,Math.min(h-16,f.y))}if(mode==='play'&&!shield&&Math.hypot(p.x-f.x,p.y-f.y)<29){lives--;shield=1.5;if(!lives)mode='lose'}}
}
g.fillStyle='#090e20';g.fillRect(0,0,w,h);
g.strokeStyle='#17213d';g.lineWidth=1;for(let x=0;x<w;x+=45){g.beginPath();g.moveTo(x,65);g.lineTo(x,h);g.stroke()}for(let y=65;y<h;y+=45){g.beginPath();g.moveTo(0,y);g.lineTo(w,y);g.stroke()}
g.fillStyle='#1d2944';g.fillRect(22,27,Math.max(1,w-130),8);g.fillStyle='#54e6c7';g.fillRect(22,27,Math.max(1,w-130)*Math.min(1,count/goal),8);
for(let i=0;i<3;i++)ball(w-76+i*23,31,6,i<lives?'#fb7185':'#28324c');
for(const s of stars){ball(s.x,s.y,11+Math.sin(elapsed*3+s.x)*2,'#173a49');ball(s.x,s.y,5,'#69f5d2')}
for(const f of foes){ball(f.x,f.y,18,'#421d35');ball(f.x,f.y,11,'#fb7185')}
if(!shield||Math.floor(elapsed*10)%2) {ball(p.x,p.y,21,'#352951');ball(p.x,p.y,13,'#b6a0ff');ball(p.x-4,p.y-4,4,'#f5f1ff')}
if(mode!=='play'){g.fillStyle='#090e20d9';g.fillRect(0,0,w,h);g.strokeStyle=mode==='win'?'#69f5d2':'#fb7185';g.lineWidth=5;g.beginPath();g.arc(w/2,h/2,45,0,Math.PI*2);g.stroke();g.fillStyle='#ffffff';g.beginPath();g.moveTo(w/2-9,h/2-17);g.lineTo(w/2+18,h/2);g.lineTo(w/2-9,h/2+17);g.closePath();g.fill()}
requestAnimationFrame(frame)}
size();requestAnimationFrame(frame);
</script>
</html>
```

Al mover el ratón, tapping la pantalla o **WASD / with arrow keys** Gestionar la esfera púrpura. Recoger las luces verdes y evitar las esferas rojas. La ronda se completa cuando se recogen dos luces; si tres pueden terminar, la ronda termina. Comience a volver a empezar pulsando el icono de juego en el centro.

## Editar la carta del juego

**Diagrama del juego** Agregue y conecte los nodos en la pestaña. Edite el encabezado de los nodos seleccionados desde el campo derecho al evento, valor y nota.

[![Edit the event flow](https://mintcdn.com/zonely-a8cd49e7/rwMU9q3NELY6LUJe/images/panel/tools-integrations-guide-20261027/mini-oyunlar-03-es.png?fit=max\&auto=format\&n=rwMU9q3NELY6LUJe\&q=85\&s=1d5a34336ea70e4591547f52693482ea)](https://docs.zonely.gen.tr/images/panel/tools-integrations-guide-20261027/mini-oyunlar-03-es.png)

> [card] 1. Editar el flujo de eventos
>
> Connect nodos de inicio y final; edite el evento de los nodos seleccionados de la derecha.

Los nombres de eventos coinciden en el evento con el código de juego. El esquema regula el flujo; el movimiento, el dibujo y el comportamiento de colisión se preparan en el código de juego en HTML.

## Identifique el premio

**Premios** Prepare la comparación de crédito, producto o servidor de la pestaña. Aquí está la clave de recompensa, **Desarrollado** Conecte su juego con la llamada del premio mostrada en la pestaña.

[![Reward key](https://mintcdn.com/zonely-a8cd49e7/rwMU9q3NELY6LUJe/images/panel/tools-integrations-guide-20261027/mini-oyunlar-04-es.png?fit=max\&auto=format\&n=rwMU9q3NELY6LUJe\&q=85\&s=26f996ba64d12f8ea0d815a8a175cc63)](https://docs.zonely.gen.tr/images/panel/tools-integrations-guide-20261027/mini-oyunlar-04-es.png)

> [card] 1. Interruptor de premios
>
> Pulse la clave de recompensa con la correspondiente llamada Zonely en el código de juego.

Light Hunt muestra el juego básico. Si quieres dar premios, conecta la condición ganadora del tour a la conexión Zonely; prepara los términos de verificación y recompensa del resultado con tu servidor de juegos.

## Previsualizar el juego

**Prueba el juego** En la ficha **Comienzo del juego** Usa el botón. Revisa el movimiento, la colección de luz, vidas y el final del tour. Puedes abrir una nueva ronda con el icono de juego al final del tour.

[![Textless Light Hunting game: purple player, green lights, red obstacles and can icons](https://mintcdn.com/zonely-a8cd49e7/a2DxBoImkJzg7XMa/images/panel/minigame-code-20261028/light-hunt-es.png?fit=max\&auto=format\&n=a2DxBoImkJzg7XMa\&q=85\&s=c2a9e7d518dba66746a8c5a73b54b19e)](https://docs.zonely.gen.tr/images/panel/minigame-code-20261028/light-hunt-es.png)

> [card] Light Hunt vista previa
>
> Collect lights, avoid red spheres and fill out the progress bar.

Juego de muestra es una personalidad única. Coincide con la sala común, movimiento y estado de juego con la infraestructura de enlace que usted elige mientras prepara un juego multijugador.

## Monitor Console y usuarios activos

**consola** Siga los eventos de sesión y los mensajes de error de la pestaña. Arregla el espacio correspondiente mediante la distinción de error de conexión del servidor con el error en el código de juego.

[![console](https://mintcdn.com/zonely-a8cd49e7/rwMU9q3NELY6LUJe/images/panel/tools-integrations-guide-20261027/mini-oyunlar-06-es.png?fit=max\&auto=format\&n=rwMU9q3NELY6LUJe\&q=85\&s=25c0e95017f64b0b5ff4cf632b143f39)](https://docs.zonely.gen.tr/images/panel/tools-integrations-guide-20261027/mini-oyunlar-06-es.png)

> [card] 1. Consola
>
> Vea los eventos y mensajes de error de la sesión en vivo aquí. Los eventos aparecen aquí cuando se abre la sesión.

**Jugadores activos** lista usuarios que se conectan en el juego guardado. Para hacer un look de registro, la sesión de juego en vivo debe ser abierta.

[![Active users](https://mintcdn.com/zonely-a8cd49e7/rwMU9q3NELY6LUJe/images/panel/tools-integrations-guide-20261027/mini-oyunlar-07-es.png?fit=max\&auto=format\&n=rwMU9q3NELY6LUJe\&q=85\&s=e2ce76c38cd2b4a37d63a59be9201141)](https://docs.zonely.gen.tr/images/panel/tools-integrations-guide-20261027/mini-oyunlar-07-es.png)

> [card] 1. Usuarios activos
>
> Los usuarios de registro Live están listados en el juego guardado.

## Revisar y guardar los métodos de conexión

**Desarrollado** Empieza, acción, puntuación y resultados de eventos de ejemplos actuales en la pestaña. Combina los métodos que utilizas en el código de juego con el formato de enlace que se muestra aquí.

[![SDK and link guide](https://mintcdn.com/zonely-a8cd49e7/n5Hk71JLhZENj3bv/images/panel/tools-integrations-guide-20261027/mini-oyunlar-08-es.png?fit=max\&auto=format\&n=n5Hk71JLhZENj3bv\&q=85\&s=d56adc0de8ba118f7f4a6c19df6d128d)](https://docs.zonely.gen.tr/images/panel/tools-integrations-guide-20261027/mini-oyunlar-08-es.png)

> [card] 1. SDK y guía de enlace
>
> Consigue el contrato de juego, puntuación y resultados con métodos listos para puente aquí.

Lista principal **Servidores Minigame** Con la pestaña puede seguir el estado de instalación y operación de su propio servidor. Cargue su información, código, diagrama y recompensas y registre el juego. Compruebe un tour abriendo el juego activo en el lado del usuario.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.