> ## 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 Stüdyosu

> Oyun bilgilerini, HTML kodunu, şemayı ve ödülleri hazırlayın; önizleme ve konsoldan kontrol edin.

**Minigame Stüdyosu** ekranını açıp **Minigame Ekle** düğmesine basın. Oyun bilgileri, kod, şema, ödüller ve test araçları aynı düzenleyicide bulunur.

HTML, CSS ve JavaScript ile bulmaca, refleks, platform, kart veya arena gibi farklı türlerde tarayıcı oyunları hazırlayabilirsiniz. Oyun fikrinizi ve kontrolleri yapay zekâya anlatıp **tek sayfalık HTML kodu** oluşturmasını isteyebilir, sonucu stüdyonun kod görünümüne ekleyip canlı önizlemede deneyebilirsiniz.

Gerçek zamanlı odalar, oyuncu işlemleri ve ödüller eklemek için **Geliştirici** sekmesindeki bağlantı rehberini de oyun kodunu hazırlarken kullanın.

## Oyun bilgilerini doldurun

**Oyun Bilgileri** sekmesinde adı, açıklamayı, kapak görselini ve aktiflik tercihini hazırlayın. Aşağıdaki **Işık Avı** örneğinde oyuncu ışıkları toplar ve kırmızı kürelerden kaçar. Oyunun içinde yazı bulunmaz; ilerleme çubuğu ve üç can simgesi kullanılır.

[![Genel bilgiler, Bağlantı modu](https://mintcdn.com/zonely-a8cd49e7/rwMU9q3NELY6LUJe/images/panel/tools-integrations-guide-20261027/mini-oyunlar-01.png?fit=max\&auto=format\&n=rwMU9q3NELY6LUJe\&q=85\&s=6410b8fbf5e9a24060c59a54a86fa6d4)](https://docs.zonely.gen.tr/images/panel/tools-integrations-guide-20261027/mini-oyunlar-01.png)

> [card] 1. Genel bilgiler
>
> Adı, açıklamayı, kapak görselini ve aktif durumunu belirleyin.

> [card] 2. Bağlantı modu
>
> Zonely Public Server hazır tarayıcı köprüsünü kullanır. Özel sunucu farklı bir seçenektir.

**Bağlantı Modu** listesinden oyunun kullanacağı çalışma ortamını seçin.

| Mod | Kullanımı |
| - | - |
| Zonely Public Server | Hazır tarayıcı çalışma ortamı ve oyun köprüsü. |
| Zonely Minigame Server | Kendi Zonely oyun sunucunuzun çalışma ortamı. |
| Özel Socket.IO | Kendi Socket.IO sunucunuzun bağlantısı. |
| Özel WebSocket | Kendi WebSocket sunucunuzun bağlantısı. |

Özel bağlantı seçtiğinizde açılan adres ve yol alanlarını kendi sunucunuza göre doldurun. Hazır bağlantıda oyunun kullanacağı yöntemleri **Geliştirici** sekmesinden inceleyin.

## Oyun kodunu ekleyin

**Minigame Kodları** sekmesinin kod görünümünü açın. Aşağıdaki örneğin tamamını kopyalayıp bu alana yapıştırın; HTML, CSS ve JavaScript aynı kod içinde yer alır.

```html title="Işık Avı — Minigame Kodları" 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="Işıkları topla, kırmızı kürelerden kaçın"></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>
```

Fareyi hareket ettirerek, ekrana dokunarak veya **WASD / ok tuşlarıyla** mor küreyi yönetin. Yeşil ışıkları toplayın ve kırmızı kürelerden kaçın. On iki ışık toplandığında tur tamamlanır; üç can biterse tur sona erer. Ortadaki oynat simgesine basarak yeniden başlayın.

## Oyun şemasını düzenleyin

**Oyun Şeması** sekmesinde düğümleri ekleyip birbirine bağlayın. Seçili düğümün başlığını, olayını, değerini ve notunu sağdaki alandan düzenleyin.

[![Olay akışını düzenleyin](https://mintcdn.com/zonely-a8cd49e7/rwMU9q3NELY6LUJe/images/panel/tools-integrations-guide-20261027/mini-oyunlar-03.png?fit=max\&auto=format\&n=rwMU9q3NELY6LUJe\&q=85\&s=4e757d9ee0c6f7952cd68859924aa9ce)](https://docs.zonely.gen.tr/images/panel/tools-integrations-guide-20261027/mini-oyunlar-03.png)

> [card] 1. Olay akışını düzenleyin
>
> Başlangıç ve bitiş düğümlerini bağlayın; sağdan seçili düğümün olayını düzenleyin.

Şemadaki olay adlarını oyun koduyla eşleştirin. Şema akışı düzenler; hareket, çizim ve çarpışma davranışları HTML içindeki oyun kodunda hazırlanır.

## Ödülü tanımlayın

**Ödüller** sekmesinden kredi, ürün veya sunucu komutu karşılığını hazırlayın. Buradaki ödül anahtarını, **Geliştirici** sekmesinde gösterilen ödül çağrısıyla oyununuza bağlayın.

[![Ödül anahtarı](https://mintcdn.com/zonely-a8cd49e7/rwMU9q3NELY6LUJe/images/panel/tools-integrations-guide-20261027/mini-oyunlar-04.png?fit=max\&auto=format\&n=rwMU9q3NELY6LUJe\&q=85\&s=14c06f4274a02516a21c386f05cead2c)](https://docs.zonely.gen.tr/images/panel/tools-integrations-guide-20261027/mini-oyunlar-04.png)

> [card] 1. Ödül anahtarı
>
> Ödül anahtarını oyun kodundaki ilgili Zonely çağrısıyla eşleştirin.

Işık Avı örneği temel oynanışı gösterir. Ödül vermek istiyorsanız tur kazanma koşulunu Zonely bağlantısına ayrıca bağlayın; sonuç doğrulamasını ve ödül koşullarını oyun sunucunuzla birlikte hazırlayın.

## Oyunu önizleyin

**Oyunu Test Et** sekmesinde **Oyunu başlat** düğmesini kullanın. Hareketi, ışık toplamayı, canları ve tur sonunu kontrol edin. Tur sonundaki oynat simgesiyle yeni tur açabilirsiniz.

[![Metinsiz Işık Avı oyunu: mor oyuncu, yeşil ışıklar, kırmızı engeller ve can simgeleri](https://mintcdn.com/zonely-a8cd49e7/a2DxBoImkJzg7XMa/images/panel/minigame-code-20261028/light-hunt.png?fit=max\&auto=format\&n=a2DxBoImkJzg7XMa\&q=85\&s=9824b9f58816a6bfcc4a31f9985f5c16)](https://docs.zonely.gen.tr/images/panel/minigame-code-20261028/light-hunt.png)

> [card] Işık Avı önizlemesi
>
> Işıkları toplayın, kırmızı kürelerden kaçın ve ilerleme çubuğunu doldurun.

Örnek oyun tek kişiliktir. Çok oyunculu bir oyun hazırlarken ortak oda, hareket ve oyun durumunu seçtiğiniz bağlantı altyapısıyla eşleyin.

## Konsolu ve aktif kullanıcıları izleyin

**Konsol** sekmesinden oturum olaylarını ve hata mesajlarını takip edin. Oyun kodundaki hatayla sunucu bağlantısı hatasını ayırt ederek ilgili alanı düzeltin.

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

> [card] 1. Konsol
>
> Canlı oturumun olaylarını ve hata mesajlarını buradan inceleyin. Oturum açılınca olaylar burada görünür.

**Aktif Oyuncular** sekmesi, kaydedilmiş oyunda oturum açan kullanıcıları listeler. Bir kaydın görünmesi için canlı oyun oturumunun açılmış olması gerekir.

[![Aktif kullanıcılar](https://mintcdn.com/zonely-a8cd49e7/n5Hk71JLhZENj3bv/images/panel/tools-integrations-guide-20261027/mini-oyunlar-07.png?fit=max\&auto=format\&n=n5Hk71JLhZENj3bv\&q=85\&s=baa3fc49b909b704d66c272fa38c535b)](https://docs.zonely.gen.tr/images/panel/tools-integrations-guide-20261027/mini-oyunlar-07.png)

> [card] 1. Aktif kullanıcılar
>
> Kaydedilmiş oyunda canlı oturum açan kullanıcılar listelenir.

## Bağlantı yöntemlerini inceleyip kaydedin

**Geliştirici** sekmesindeki güncel örneklerden başlangıç, hareket, skor ve sonuç olaylarını alın. Oyun kodunda kullandığınız yöntemleri burada gösterilen bağlantı biçimiyle eşleştirin.

[![SDK ve bağlantı rehberi](https://mintcdn.com/zonely-a8cd49e7/n5Hk71JLhZENj3bv/images/panel/tools-integrations-guide-20261027/mini-oyunlar-08.png?fit=max\&auto=format\&n=n5Hk71JLhZENj3bv\&q=85\&s=eb88eb49b790cb84dea6d7fb863d1d8b)](https://docs.zonely.gen.tr/images/panel/tools-integrations-guide-20261027/mini-oyunlar-08.png)

> [card] 1. SDK ve bağlantı rehberi
>
> Hazır köprü yöntemleri ile oyun, skor ve sonuç olaylarının sözleşmesini buradan alın.

Ana listedeki **Minigame Sunucuları** sekmesiyle kendi sunucunuzun kurulumunu ve çalışma durumunu takip edebilirsiniz. Bilgileri, kodu, şemayı ve ödülleri tamamlayıp oyunu kaydedin. Aktif oyunu kullanıcı tarafında açarak bir turu kontrol edin.


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