> ## 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

> Bereiten Sie Spielinformationen, HTML-Code, Schema und Belohnungen vor; Überprüfen Sie die Vorschau und die Konsole.

**Minigame Studio** öffnen und öffnen Sie den Bildschirm **Minigame hinzufügen** Drücken Sie die Taste. Spielinformationen, Code, Diagramm-Auszeichnungen und Test-Tools finden Sie in der gleichen Regelung.

Sie können verschiedene Arten von Browserspielen wie Puzzle, Reflex, Plattform, Karte oder Arena mit HTML, CSS und JavaScript vorbereiten. Spielidee und Steuerung der künstlichen Intelligenz **HTML-Code der einzelnen Seite** Sie können nach Erstellung fragen, das Ergebnis in die Codeansicht des Studios einfügen und es in der Live-Vorschau ausprobieren.

Echtzeit-Räume, Spieler, um Belohnungen und Belohnungen **Entwickler** hinzuzufügen Verwenden Sie die Link-Anleitung auf der Registerkarte, während Sie den Spielcode vorbereiten.

## Füllen Sie die Spielinformationen aus

**Spielinformationen** Bereiten Sie den Namen, die Beschreibung, das Cover visuell und die aktive Auswahl auf der Registerkarte vor. Die folgenden **Leichte Jagd** Zum Beispiel sammeln die Spieler Lichter und entkommen aus roten Sphären. Es gibt keine Schrift im Spiel; die Fortschrittsleiste und das Symbol drei Dosen werden verwendet.

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

> [card] 1. Allgemeine Informationen
>
> Setzen Sie den Namen, die Beschreibung, das Cover visuell und aktiv Status.

> [card] 2. Anschlussmodus
>
> Zonely Public Server verwendet eine bereit zum Browser. Private Server ist eine andere Option.

**Anschlussmodus** Wählen Sie die Arbeitsumgebung aus der Liste zum Spiel.

| Home | Nutzung |
| - | - |
| Zonely Public Server | Ready-to-Browser-Arbeitsumgebung und Spielbrücke. |
| Zonely Minigame Server | Die Arbeitsumgebung Ihres eigenen Zonely Gaming Servers. |
| Private Socket.IO | Anschluss Ihres eigenen Socket.IO Servers. |
| Private WebSocket | Link zu Ihrem eigenen WebSocket-Server. |

Füllen Sie die Adresse und die Straßenbereiche aus, die geöffnet werden, wenn Sie private Links auswählen. **Entwickler** Sehen Sie sich den Tab an.

## Spielcode hinzufügen

**Minispielcodes** Öffnen Sie die Codeansicht der Registerkarte. Kopieren Sie das folgende Beispiel und fügen Sie es in dieses Feld ein; HTML, CSS und JavaScript sind im selben Code enthalten.

```html title="Light Hunt — Minispielcodes" 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="Sammle die Lichter und vermeide die roten Kugeln"></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>
```

Wenn man die Maus bewegt, auf den Bildschirm tippt oder **WASD / with arrow keys**, dann kann man die lila Kugel verwalten. grüne Lichter einsammeln und rote Kugeln vermeiden. Die Runde wird abgeschlossen, wenn zwei Lichter eingesammelt werden; wenn drei Enden haben, endet die Runde. Starten Sie den Neustart, indem Sie das Abspielsymbol in der Mitte drücken.

## Bearbeiten Spiel Chart

**Spieldiagramm** Fügen und verbinden Sie Knoten auf der Registerkarte. Bearbeiten Sie den Header der ausgewählten Knoten aus dem Feld direkt zum Ereignis, Wert und Notiz.

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

> [card] 1. Bearbeiten des Ereignisflusses
>
> Start- und Endknoten Connect; Bearbeiten des Ereignisses ausgewählter Knoten von rechts.

Schema regelt den Fluss; Bewegung, Zeichnung und Kollisionsverhalten werden im Spielcode in HTML vorbereitet.

## Identifizieren Sie den Award

**Auszeichnungen** Bereiten Sie den Kredit-, Produkt- oder Server-Befehlsvergleich über den Tab vor. Hier ist der Belohnungsschlüssel, **Entwickler** Verbinden Sie Ihr Spiel mit dem Aufruf des Preises, der auf dem Tab angezeigt wird.

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

> [card] 1. Vergabeschalter
>
> Match den Belohnungsschlüssel mit dem entsprechenden Zonely Aufruf auf dem Spielcode.

Light Hunt zeigt das grundlegende Spiel. Wenn Sie Preise vergeben möchten, verbinden Sie die Tour-Gewinnbedingung mit der Zonely-Verbindung; Bereiten Sie die Ergebnisverifizierung und die Belohnungsbedingungen mit Ihrem Gaming-Server vor.

## Vorschau auf das Spiel

**Teste das Spiel** Auf der Registerkarte **Starten Sie das Spiel** Verwenden Sie die Schaltfläche. Überprüfen Sie die Bewegung, Lichtsammlung, Leben und Tourende. Sie können neue Runde mit dem Spielsymbol am Ende der Tour öffnen.

[![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-de.png?fit=max\&auto=format\&n=a2DxBoImkJzg7XMa\&q=85\&s=e92d4a4dcb240bc8d3c2a8f6d78c29e9)](https://docs.zonely.gen.tr/images/panel/minigame-code-20261028/light-hunt-de.png)

> [card] Light Hunt Vorschau
>
> Lichterfassen, rote Kugeln vermeiden und die Fortschrittsleiste ausfüllen.

Das Beispielspiel ist eine einzelne Persönlichkeit.Match den Gemeinschaftsraum, Bewegung und Spielstatus mit der Link-Infrastruktur, die Sie wählen, während Sie ein Multiplayer-Spiel vorbereiten.

## Monitor Console und aktive Benutzer

**Konsole** Verfolgen Sie die Sitzungsereignisse und Fehlermeldungen aus dem Tab. Beheben Sie den entsprechenden Platz, indem Sie den Serververbindungsfehler mit dem Fehler im Spielcode unterscheiden.

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

> [card] 1. Konsole
>
> Hören Sie sich die Ereignisse und Fehlermeldungen der Live-Sitzung hier an. Ereignisse werden hier angezeigt, wenn die Sitzung geöffnet wird.

Die Registerkarte **Aktive Spieler** listet Benutzer auf, die sich im gespeicherten Spiel anmelden. Um einen Rekord-Look zu erhalten, muss die Live-Spielsitzung geöffnet werden.

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

> [card] 1. Aktive Nutzer
>
> Live Log-in-Benutzer sind im gespeicherten Spiel aufgeführt.

## Überprüfe und spare Verbindungs-Methoden

**Entwickler** Starten, Aktion, Ergebnis und Ereignisse aus aktuellen Beispielen auf der Registerkarte. Passen Sie die Methoden, die Sie im Spielcode verwenden, mit dem hier gezeigten Linkformat an.

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

> [card] 1. SDK und Link Guide
>
> Erhalten Sie den Vertrag von Spiel-, Score- und Ergebnisereignissen mit brückenfertigen Methoden hier.

Hauptliste **Minigame Server** Mit dem Tab können Sie den Installations- und Betriebsstatus Ihres eigenen Servers verfolgen. Laden Sie Ihre Informationen, Code, Diagramm und Belohnungen hoch und registrieren Sie das Spiel. Überprüfen Sie eine Tour, indem Sie das aktive Spiel auf der Benutzerseite öffnen.


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