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

> Prepare game information, HTML code, scheme and rewards; check preview and console.

**Minigame Studio** open and open the screen **Add Minigame** Press the button. Game information, code, diagram awards and test tools are found in the same regulatory.

You can prepare different types of browser games such as puzzle, reflex, platform, card or arena with HTML, CSS and JavaScript. Game idea and controls artificial intelligence **HTML code of single page** You can ask for creation, add the result to the code view of the studio and try it in the live preview.

Real-time rooms, players to add rewards and rewards **Developer** Use the link guide on the tab while preparing the game code.

## Fill out game information

**Game Information** Prepare the name, description, cover visual and active choice on the tab. The following **Light Hunting** For example, players collect lights and escape from red spheres. There is no writing in the game; the progress bar and three can icon are used.

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

> [card] 1. General information
>
> Set the name, description, cover visual and active status.

> [card] 2. Connection mode
>
> Zonely Public Server uses ready-to-browser bridge. Private server is a different option.

**Connection Mode** Select the working environment from the list to the game.

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

Fill the address and road areas opened when you select private links. Methods to use the game in the ready connection **Developer** View the tab.

## Add game code

**Minigame Codes** Open the code view of the tab. Copy all the following example and paste it into this field; HTML, CSS and JavaScript are included in the same code.

```html title="Light Hunt — Minigame Codes" 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="Collect the lights and avoid the red orbs"></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>
```

By moving the mouse, tapping the screen or **WASD / with arrow keys** Manage purple sphere. Collect green lights and avoid red spheres. The round is completed when two lights are collected; if three can ends, the round ends. Start re-start by pressing the playing icon in the middle.

## Edit game chart

**Game Diagram** Add and connect nodes on the tab. Edit the header of the selected nodes from the field right to the event, value and note.

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

> [card] 1. Edit the event flow
>
> Connect start and end nodes; edit the event of selected nodes from right.

Match event names in the event with the game code. Scheme regulates flow; motion, drawing and collision behavior are prepared in the game code in HTML.

## Identify the Award

**Awards** Prepare the credit, product or server command comparison from the tab. Here’s the reward key, **Developer** Connect your game with the call of the prize shown on the tab.

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

> [card] 1. Award switch
>
> Match the reward key with the corresponding Zonely call on the game code.

Light Hunt sample shows basic play. If you want to give prizes, connect the tour winning condition to Zonely connection; prepare the result verification and reward terms with your gaming server.

## Preview the game

**Test the Game** On the tab **Start the game** Use the button. Check the movement, light collection, lives and tour end. You can open new round with the play icon at the end of the 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-en.png?fit=max\&auto=format\&n=a2DxBoImkJzg7XMa\&q=85\&s=ec848e48c6a94c933c1da1c25ef4b81c)](https://docs.zonely.gen.tr/images/panel/minigame-code-20261028/light-hunt-en.png)

> [card] Light Hunt preview
>
> Collect lights, avoid red spheres and fill out the progress bar.

Sample game is single personality. Match the common room, movement and gaming status with the link infrastructure you choose while preparing a multiplayer game.

## Monitor Console and active users

**console** Follow the session events and error messages from the tab. Fix the corresponding space by distinguishing server connection error with the error in the game code.

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

> [card] 1. Console
>
> Check out the events and error messages of the live session here. Events appear here when the session is opened.

**Active Players** tab lists users who log in in in the saved game. To make a record look, the live game session must be opened.

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

> [card] 1. Active users
>
> Live log-in users are listed in the saved game.

## Review and save connection methods

**Developer** Get started, action, score and result events from current examples on the tab. Match the methods you use in the game code with the link format shown here.

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

> [card] 1. SDK and link guide
>
> Get the contract of game, score and result events with ready-to- bridge methods here.

Main list **Minigame Servers** With the tab you can track the installation and operation status of your own server. Upload your information, code, diagram and rewards and register the game. Check a tour by opening the active game on the user side.


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