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

> Maak spelinformatie, HTML-code, schema en beloningen; controleer preview en console.

**Minigame Studio** open en open het scherm **Minigame toevoegen** Druk op de knop. Spelinformatie, code, diagram awards en testtools zijn te vinden in dezelfde regelgeving.

U kunt verschillende soorten browserspellen zoals puzzel, reflex, platform, kaart of arena met HTML, CSS en JavaScript voorbereiden. Spelidee en bestuurt kunstmatige intelligentie **HTML-code van een pagina** U kunt vragen om creatie, het resultaat toevoegen aan de codeweergave van de studio en het proberen in de live preview.

Real-time kamers, spelers toe te voegen beloningen en beloningen **Ontwikkelaar** Gebruik de link gids op het tabblad tijdens het voorbereiden van de spelcode.

## Vul spelinformatie in

**Spelinformatie** Bereid de naam, beschrijving, dekking visuele en actieve keuze op het tabblad. De volgende **Lichte jacht** Bijvoorbeeld, spelers verzamelen lichten en ontsnappen uit rode bollen. Er is geen schrijven in het spel; de voortgangsbalk en drie kan pictogram worden gebruikt.

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

> [card] 1. Algemene informatie
>
> Stel de naam, beschrijving, dekking visuele en actieve status.

> [card] 2. Verbindingsmodus
>
> Zonely Public Server maakt gebruik van ready-to-browser bridge. Privé-server is een andere optie.

**Verbindingsmodus** Selecteer de werkomgeving uit de lijst naar het spel.

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

Vul het adres en de weg gebieden geopend wanneer u privé links selecteert. Methoden om het spel te gebruiken in de kant-en-klare verbinding **Ontwikkelaar** Bekijk het tabblad.

## Voeg spelcode toe

**Minigamecodes** Open de codeweergave van het tabblad. Kopieer het volgende voorbeeld en plak het in dit veld; HTML, CSS en JavaScript zijn in dezelfde code opgenomen.

```html title="Lichte jacht" 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="Verzamel de lichten en vermijd de rode bollen"></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>
```

Door de muis te bewegen, op het scherm of **WASD / with arrow keys** te tikken Beheert de paarse bol. Verzamel groene lichten en vermijd rode bollen. De ronde wordt voltooid wanneer twee lichten worden verzameld; als drie kan eindigen, eindigt de ronde. Begin opnieuw te beginnen met het indrukken van het pictogram in het midden.

## Bewerk speldiagram

**Speldiagram** Nodes toevoegen en verbinden op het tabblad. Bewerk de kop van de geselecteerde knooppunten van het veld naar de gebeurtenis, waarde en noot.

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

> [card] 1. Bewerk de gebeurtenisstroom
>
> Connect start- en eindknooppunten; bewerk het evenement van geselecteerde nodes van rechts.

Match event namen in het geval met de spelcode. Scheme regelt stroom; beweging, tekening en botsing gedrag worden voorbereid in de spelcode in HTML.

## Identificeer de prijs

**Gunningen** Maak de vergelijking van credit, product of servercommando's op het tabblad. Hier is de reward key, **Ontwikkelaar** Sluit uw spel aan op de oproep van de prijs die op het tabblad wordt getoond.

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

> [card] 1. Award switch
>
> Match de beloningssleutel met de bijbehorende Zonely call op de spelcode.

Light Hunt sample toont basisspel. Als u prijzen wilt geven, sluit u de tour winnende conditie aan op Zonely verbinding; bereid de resultaatverificatie en beloning termen met uw gaming server.

## Voorbeeld van het spel

**Test het spel** Op het tabblad **Start het spel** Gebruik de knop. Controleer de beweging, lichtverzameling, levens en tour einde. U kunt nieuwe ronde openen met het pictogram aan het einde van de 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-nl.png?fit=max\&auto=format\&n=a2DxBoImkJzg7XMa\&q=85\&s=ba60c2cc1ba12661cf4c54016040fe50)](https://docs.zonely.gen.tr/images/panel/minigame-code-20261028/light-hunt-nl.png)

> [card] Lichte jachtvoorbeeld
>
> Verzamel de lichten, vermijd rode bollen en vul de voortgangsbalk in.

Voorbeeld spel is een persoonlijkheid. Pas de gemeenschappelijke ruimte, beweging en gaming status met de link infrastructuur die u kiest tijdens het voorbereiden van een multiplayer spel.

## Monitor Console en actieve gebruikers

**console** Volg de sessiegebeurtenissen en foutmeldingen van het tabblad. Repareer de bijbehorende ruimte door de serververbindingsfout te onderscheiden met de fout in de spelcode.

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

> [card] 1. Console
>
> Bekijk hier de gebeurtenissen en foutmeldingen van de live sessie. Gebeurtenissen verschijnen hier wanneer de sessie wordt geopend.

**Actieve spelers** tabblad geeft gebruikers die inloggen in het opgeslagen spel. Om een record te maken, moet de live game sessie geopend worden.

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

> [card] 1. Actieve gebruikers
>
> LIVE-inloggebruikers worden vermeld in het opgeslagen spel.

## Bekijk en sla verbindingsmethoden op

**Ontwikkelaar** Aan de slag, actie, score en resultaat gebeurtenissen uit de huidige voorbeelden op het tabblad. Pas de methoden die u gebruikt in de spelcode aan met het linkformaat hier getoond.

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

> [card] 1. SDK en koppelingshandleiding
>
> Haal hier het contract van spel, score en resultaat gebeurtenissen met kant-en-klare bridge methoden.

Hoofdlijst **Minigameservers** Met het tabblad kunt u de installatie- en werkingsstatus van uw eigen server volgen. Upload uw informatie, code, diagram en beloningen en registreer het spel. Controleer een tour door het actieve spel aan de gebruikerskant te openen.


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