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

# Mini-jeu Studio

> Préparer les informations de jeu, le code HTML, le schéma et les récompenses; vérifier l'aperçu et la console.

**Mini-jeu Studio** ouvrir et ouvrir l'écran **Ajouter un jeu** Appuyez sur le bouton. Les informations de jeu, le code, les prix de diagramme et les outils de test sont trouvés dans le même règlement.

Vous pouvez préparer différents types de jeux de navigateur tels que puzzle, réflexe, plate-forme, carte ou arène avec HTML, CSS et JavaScript. Idée de jeu et contrôle l'intelligence artificielle **Code HTML d'une seule page** Vous pouvez demander la création, ajouter le résultat à la vue de code du studio et l'essayer dans l'aperçu en direct.

Chambres en temps réel, joueurs pour ajouter des récompenses et des récompenses **Développeur** Utilisez le guide de lien sur l'onglet pendant la préparation du code de jeu.

## Remplir les informations du jeu

**Informations sur le jeu** Préparez le nom, la description, le choix visuel et actif de la couverture sur l'onglet. La **Chasse légère** suivante Par exemple, les joueurs collectent des lumières et s'échappent des sphères rouges. Il n'y a pas d'écriture dans le jeu; la barre de progression et trois icônes peuvent être utilisées.

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

> [card] 1. Informations générales
>
> Fixez le nom, la description, la couverture visuelle et l'état actif.

> [card] 2. Mode de connexion
>
> Zonely Public Server utilise un pont prêt à naviguer. Le serveur privé est une autre option.

**Mode de connexion** Sélectionnez l'environnement de travail de la liste vers le jeu.

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

Remplissez l'adresse et les zones de route ouvertes lorsque vous sélectionnez des liens privés. Méthodes d'utilisation du jeu dans la connexion prête **Développeur** Voir l'onglet.

## Ajouter le code du jeu

**Codes des mini-jeux** Ouvrez la vue de code de l'onglet. Copiez tous les exemples suivants et collez-les dans ce champ; HTML, CSS et JavaScript sont inclus dans le même code.

```html title="Chasse à la lumière — Mini-codes de jeu" 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="Recueillir les lumières et éviter les orbes rouges"></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>
```

En déplaçant la souris, en appuyant sur l'écran ou **WASD / with arrow keys** Gérer la sphère pourpre. Recueillir les lumières vertes et éviter les sphères rouges. Le tour est terminé lorsque deux lumières sont recueillies; si trois peuvent se terminer, les extrémités du tour. Commencez à recommencer en appuyant sur l'icône de lecture au milieu.

## Modifier le tableau de jeu

**Diagramme de jeu** Ajouter et connecter des nœuds dans l'onglet. Modifier l'en-tête des nœuds sélectionnés depuis le champ droit jusqu'à l'événement, la valeur et la note.

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

> [card] 1. Modifier le flux d'événement
>
> Connect noeuds de début et de fin; éditer l'événement de nœuds sélectionnés à partir de droite.

Les noms d'événements de match dans l'événement avec le code de jeu. Scheme régule le flux; le mouvement, le dessin et le comportement de collision sont préparés dans le code de jeu dans HTML.

## Identifier le prix

**Prix** Préparer la comparaison de la commande crédit, produit ou serveur depuis l'onglet. Voici la clé de récompense, **Développeur** Connectez votre jeu avec l'appel du prix affiché sur l'onglet.

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

> [card] 1. Interrupteur d ' attribution
>
> Cochez la clé de récompense avec l'appel correspondant Zonely sur le code du jeu.

Light Hunt échantillon montre le jeu de base. Si vous voulez donner des prix, connectez la condition de réussite de la visite à la connexion Zonely; préparez les termes de vérification et de récompense avec votre serveur de jeu.

## Aperçu du jeu

**Tester le jeu** Sur l'onglet **Démarre le jeu** Utilisez le bouton. Vérifiez le mouvement, la collection de lumière, les vies et la fin de la tournée. Vous pouvez ouvrir une nouvelle ronde avec l'icône de jeu à la fin de la tournée.

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

> [card] Aperçu de la chasse à la lumière
>
> Collectez les lumières, évitez les sphères rouges et remplissez la barre de progression.

Le jeu d'exemple est une personnalité unique. Correspondez à la salle commune, le mouvement et le statut de jeu avec l'infrastructure de lien que vous choisissez tout en préparant un jeu multijoueur.

## Console de moniteur et utilisateurs actifs

**console** Suivez les événements de session et les messages d'erreur de l'onglet. Correction de l'espace correspondant en distinguant l'erreur de connexion du serveur avec l'erreur dans le code de jeu.

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

> [card] 1. Console
>
> Vérifiez ici les événements et les messages d'erreur de la session en direct. Les événements apparaissent ici lorsque la session est ouverte.

L'onglet **Actifs** liste les utilisateurs qui se connectent dans le jeu enregistré. Pour faire un enregistrement, la session de jeu en direct doit être ouverte.

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

> [card] 1. Usagers actifs
>
> Les utilisateurs de Live sont listés dans le jeu enregistré.

## Examiner et enregistrer les méthodes de connexion

**Développeur** Commencez, actionz, notez et résultats des événements à partir des exemples actuels sur l'onglet. Faites correspondre les méthodes que vous utilisez dans le code de jeu avec le format de lien affiché ici.

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

> [card] 1. SDK et guide de liens
>
> Obtenez le contrat d'événements de jeu, de score et de résultat avec des méthodes prêtes à être mises en place ici.

Liste principale **Serveurs Minigame** Avec l'onglet, vous pouvez suivre l'état d'installation et de fonctionnement de votre propre serveur. Téléchargez vos informations, code, diagramme et récompenses et enregistrez le jeu. Vérifiez une visite en ouvrant le jeu actif du côté utilisateur.


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