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

> Förbered spelinformation, HTML-kod, schema och belöningar; kontrollera förhandsgranskning och konsol.

**Minigame Studio** öppnar och öppnar skärmen **Lägg till Minigame** Tryck på knappen. Spelinformation, kod, diagramutmärkelser och testverktyg finns i samma regleringsregler.

Du kan förbereda olika typer av webbläsarspel som pussel, reflex, plattform, kort eller arena med HTML, CSS och JavaScript. Spelidé och styr artificiell intelligens **HTML-kod för ensidiga sidan** Du kan be om skapande, lägga till resultatet till kodvyn av studion och prova det i live förhandsvisning.

Realtidsrum, spelare att lägga till belöningar och belöningar **Utvecklare** Använd länkguiden på fliken samtidigt som du förbereder spelkoden.

## Fyll i spelinformation

**Spelinformation** Förbered namnet, beskrivningen, täcka visuella och aktiva val på fliken. Följande **Ljusjakt** Till exempel samlar spelare ljus och flyr från röda sfärer. Det finns ingen skrivning i spelet; framstegsfältet och tre kan ikonen används.

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

> [card] 1. Allmän information
>
> Set namnet, beskrivningen, täcker visuell och aktiv status.

> [card] 2. Anslutningsläge
>
> Zonely Public Server använder färdiga webbläsare bron. Privat server är ett annat alternativ.

**Anslutningsläge** Välj arbetsmiljön från listan till spelet.

| Hem » Hem » | Usage |
| - | - |
| Zonely Public Server | Ready-to-browser arbetsmiljö och spelbro. |
| Zonely Minigame Server | Din egen Zonely spelserver arbetsmiljö. |
| Private Socket.IO | Connection of your own Socket.IO server. |
| Privat WebSocket | Länk till din egen WebSocket-server. |

Fyll adressen och vägområdena öppnas när du väljer privata länkar. Metoder för att använda spelet i den färdiga anslutningen **Utvecklare** Visa fliken.

## Lägg till spelkod

**Minigame koder** Öppna kodvyn på fliken. Kopiera alla följande exempel och klistra in det i detta fält; HTML, CSS och JavaScript ingår i samma kod.

```html title="Ljusjakt - Minigamekoder" 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="Samla ljusen och undvik de röda kloten"></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>
```

Genom att flytta musen, knacka på skärmen eller **WASD / with arrow keys** Hantera lila sfär. Samla gröna lampor och undvika röda sfärer. Rundan är klar när två lampor samlas in; om tre kan sluta, slutar rundan. Börja omstart genom att trycka på spelikonen i mitten.

## Redigera spel diagram

**Spel diagram** Lägg till och ansluta noder på fliken. Redigera rubriken på de valda noderna från fältet direkt till evenemanget, värdet och notera.

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

> [card] 1. redigera händelseflödet
>
> Connect start- och slutnoder; redigera händelsen av utvalda noder från höger.

Match händelsenamn i händelse med spelkoden. Scheme reglerar flöde; rörelse, ritning och kollision beteende är förberedda i spelkoden i HTML.

## Identifiera priset

**Awards** Förbered kredit-, produkt- eller serverkommando jämförelse från fliken. Här är belöningsnyckeln, **Utvecklare** Anslut ditt spel med samtalet av det pris som visas på fliken.

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

> [card] 1. Award switch
>
> Match belöningsnyckeln med motsvarande Zonely-anrop på spelkoden.

Light Hunt-prov visar grundläggande spel. Om du vill ge priser, anslut turnévinstvillkoret till Zonely-anslutning; förbereda resultatverifiering och belöningsvillkor med din spelserver.

## Förhandsgranska spelet

**Testa spelet** På fliken **Starta spelet** Använd knappen. Kontrollera rörelsen, ljussamlingen, liv och turné slut. Du kan öppna ny runda med spelikonen i slutet av turnén.

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

> [card] Light Hunt förhandsvisning
>
> Collect-lampor, undvik röda sfärer och fyll i progressfältet.

Provspel är enskild personlighet. Match det gemensamma rummet, rörelsen och spelstatusen med den länkinfrastruktur du väljer samtidigt som du förbereder ett multiplayer-spel.

## Monitor Console och aktiva användare

**Konsol** Följ sessionshändelserna och felmeddelandena från fliken. Fixa motsvarande utrymme genom att skilja serveranslutningsfel med felet i spelkoden.

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

> [card] 1. konsol
>
> Kalla in händelserna och felmeddelandena i live-sessionen här. Evenemang visas här när sessionen öppnas.

**Aktiva spelare**-fliken listar användare som loggar in i det sparade spelet. För att göra en rekordstil måste livespelssessionen öppnas.

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

> [card] 1. Aktiva användare
>
> Live inloggningsanvändare är listade i det sparade spelet.

## Review och spara anslutningsmetoder

**Utvecklare** Kom igång, åtgärd, poäng och resultat händelser från aktuella exempel på fliken. Matcha de metoder du använder i spelkoden med länkformatet som visas här.

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

> [card] 1. SDK och länkguide
>
> Get kontraktet av spel, poäng och resultat händelser med färdiga bro metoder här.

Huvudlista **Minigame servrar** Med fliken kan du spåra installations- och driftstatusen för din egen server. Ladda upp din information, kod, diagram och belöningar och registrera spelet. Kontrollera en turné genom att öppna det aktiva spelet på användarsidan.


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