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

# Studioul Minigame

> Pregătiți informații despre joc, cod HTML, schemă și recompense; verificați previzualizare și consolă.

**Studioul Minigame** deschide și deschide ecranul **Adaugă minigame** Apăsați butonul. Informații de joc, cod, premii diagrame și instrumente de testare sunt găsite în aceeași reglementare.

Puteți pregăti diferite tipuri de jocuri de browser, cum ar fi puzzle, reflex, platformă, card sau arenă cu HTML, CSS și JavaScript. Ideea de joc și controlează inteligența artificială **Codul HTML al unei singure pagini** Puteți cere crearea, adăuga rezultatul la vizualizarea de cod a studioului și încercați-l în previzualizare live.

Camere în timp real, jucători pentru a adăuga recompense și recompense **Dezvoltator** Utilizați ghidul link-ul pe fila în timp ce se pregătește codul de joc.

## Completați informații de joc

**Informaţii despre joc** Pregătiți numele, descrierea, acoperirea alegerii vizuale și active pe fila. Următoarea **Vânătoare de lumină** De exemplu, jucătorii colectează lumini și scapă din sfere roșii. Nu există nici o scriere în joc; bara de progres și trei pot icon sunt utilizate.

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

> [card] 1. Informaţii generale
>
> Setaţi numele, descrierea, acoperirea stării vizuale şi active.

> [card] 2. Modul de conectare
>
> Zonely Serverul public folosește pod gata-la-browser. Serverul privat este o opțiune diferită.

**Mod conexiune** Selectaţi mediul de lucru din listă până la joc.

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

Completați zonele de adresă și drum deschise atunci când selectați link-uri private. Metode de a utiliza jocul în conexiunea gata **Dezvoltator** Vizualizați fila.

## Adăugați codul de joc

**Coduri minigame** Deschide vizualizarea codului filei. Copiază toate exemplele următoare și lipește-l în acest câmp; HTML, CSS și JavaScript sunt incluse în același cod.

```html title="Vânătoare ușoară" 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="Colecta luminile și pentru a evita sferele roșii"></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>
```

Prin mutarea mouse-ului, atingând ecranul sau **WASD / with arrow keys** Gestiona sfera violet. Colecta lumini verzi și de a evita sferele roșii. Runda este completă atunci când sunt colectate două lumini; în cazul în care trei se poate termina, se termină rotund. Începeți prin apăsarea pictograma de joc în mijloc.

## Editare grafică de joc

**Diagrama jocului** Adaugă și conectează nodurile pe filă. Editează antetul nodurilor selectate din câmpul de la dreapta la eveniment, valoare și notă.

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

> [card] 1. Editați fluxul evenimentului
>
> Connect porni și noduri de sfârșit; editați evenimentul de noduri selectate din dreapta.

Meciul nume de evenimente în cazul cu codul de joc. Schema reglează fluxul; mișcare, desen și coliziune comportament sunt pregătite în codul de joc în HTML.

## Identificați premiul

**Premii** Pregătește compararea de credit, produs sau server de comandă din fila. Aici ți-e cheia de recompensă, **Dezvoltator** Conectați jocul cu apelul de premiu afișat pe fila.

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

> [card] 1. Comutator de premii
>
> Match cheia de recompensă cu apelul Zonely corespunzător pe codul de joc.

Mostra de Hunt Lumina arată jocul de bază. Dacă doriți să dea premii, conectați starea câștigătoare tur la conexiunea Zonely; pregătiți verificarea rezultatului și termenii de recompensare cu serverul de jocuri.

## Previzualizează jocul

**Testează jocul** Pe fila **Începe jocul** Utilizați butonul. Verificați mișcarea, colectarea luminii, vieți și sfârșitul turului. Puteți deschide o nouă rundă cu pictograma de joc la sfârșitul turului.

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

> [card] Previzualizarea Vânătoare de Lumini
>
> Colect lumini, evita sferele roșii și completează bara de progres.

Jocul de probă este o singură personalitate. Se potrivește cu camera comună, mișcare și starea jocurilor de noroc cu infrastructura de link pe care o alegeți în timp ce pregătiți un joc multiplayer.

## Monitor Console and active users

**consolă** Urmareste evenimentele de sesiune si mesajele de eroare din fila. Fixeaza spatiul corespunzator prin diferentiarea erorii de conectare a serverului cu eroarea din codul de joc.

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

> [card] 1. Consola
>
> Verificați evenimentele și mesajele de eroare ale sesiunii live aici. Evenimentele apar aici când sesiunea este deschisă.

**Jucători activi** listează utilizatorii care se loghează în joc salvat. Pentru a face un aspect de înregistrare, sesiunea de joc live trebuie să fie deschisă.

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

> [card] 1. Utilizatori activi
>
> Live log-in utilizatorii sunt enumerate în joc salvat.

## Review and salve conection methods

**Dezvoltator** Începe, acțiune, scor și rezultatele evenimentelor din exemplele actuale pe fila. Potriviți metodele pe care le utilizați în codul de joc cu formatul link-ului afișat aici.

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

> [card] 1. SDK și ghid de link
>
> Z0050QXXX0Events on the get-to-bridge at here.

Lista principală **Servere minigame** Cu fila puteți urmări starea de instalare și funcționare a serverului propriu. Încărcați informațiile, codul, diagrama și recompensele și să înregistreze jocul. Verificați un tur prin deschiderea jocului activ pe partea de utilizator.


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