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

# 迷你游戏工作室

> 准备游戏信息,HTML代码,计划和奖励;检查预览和控制台.

**迷你游戏工作室** 打开并打开屏幕 **添加迷你游戏** 按下按钮,游戏信息,代码,图奖和测试工具在同一监管中被找到.

您可以编写不同类型的浏览器游戏, 如拼图、反射、平台、卡片或竞技场 HTML, CSS 财务报告和已审计财务报表 JavaScript. 游戏构想和控制人工智能 **HTML 单页代码** 您可以请求创建,将结果添加到工作室的代码视图中,并在直播预览中尝试.

实时房间,玩家增加奖励和奖励 **开发者** 在准备游戏代码时使用标签上的联系指南.

## 填写游戏信息

**游戏信息** 准备标签上的名称、描述、覆盖视觉和主动选择。 **猎取轻型** 例如,玩家收集出出出红地的灯光并逃脱出红地. 游戏中没有写作;使用进步栏和可3个图标.

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

> [card] 1. 概况
>
> 设置名称,描述,覆盖可视性和活性状态.

> [card] 2. 连接模式
>
> 区公共服务器使用即时浏览器桥接,私人服务器是另一个选项.

**连接模式** 从列表到游戏选择工作环境.

| ưμ㼯A | 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. |

选择私有链接时填充地址和道路区域。 准备连接时使用游戏的方法 **开发者** 查看标签。

## 添加游戏代码

**迷你游戏代码** 打开标签的代码视图。 复制所有以下示例并粘贴到此字段 ; HTML, CSS 财务报告和已审计财务报表 JavaScript 包含在同一代码中。

```html title="猎光-迷你游戏代码" 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="收起灯光,避开红球"></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>
```

通过移动鼠标, 点击屏幕或 **WASD / with arrow keys** 管理紫色球体。 收集绿色灯光并避免红色球体。 当收集出两个灯光时, 圆形完成; 如果三个能结束, 圆形结束。 开始重起, 按下中间的玩动图标 。

## 编辑游戏图表

**游戏图** 在标签上添加和连接节点。编辑选定节点的页眉,从字段右侧到事件、值和注释。

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

> [card] 1. 编辑事件流程
>
> 连接起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站起站

将事件名称与游戏代码匹配。 方案调节流量; 动作、 绘图和相撞行为在游戏代码中进行 。 HTML.

## 确定奖项

**获奖** 从标签中编写信用、产品或服务器命令比较。 这是奖励密钥 。 **开发者** 将您的游戏与标签上显示的奖金的呼叫连接起来 。

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

> [card] 1. 奖换
>
> 将奖励密钥与相应的密钥匹配 Zonely 调用游戏代码。

Light Hunt 样本显示基本游戏。 如果您想要给奖项, 请将巡回赛的胜出条件与 Zonely 连接; 准备结果校验和对游戏服务器的奖励条件。

## 预览游戏

**测试游戏** 标签 **开始游戏** 使用按钮。 请检查移动、 光收集、 生命和旅游结束。 您可以在旅游结束时打开新的游戏图标 。

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

> [card] 浅猎预览
>
> 收取灯光,避去红花花花花,并填写进度栏.

样本游戏是单个人格,在准备多人游戏时,将普通房间,动作和游戏状态与所选择的链接基础设施相匹配.

## 监视控制台和活跃的用户

**控制台** 跟踪来自标签的会话事件和错误消息。通过区分服务器连接错误和游戏代码错误来修复相应的空间 。

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

> [card] 1. 控制台
>
> 检查此站点的动态会话的事件和错误消息。 当会话打开时, 事件会在这里出现 。

**活动玩家** 选项卡列出在保存的游戏中登录的用户。要查看记录,必须打开游戏直播会话。

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

> [card] 1. 活跃用户
>
> 现场登录用户在已保存的游戏中列出.

## 审查并保存连接方法

**开发者** 从标签上当前实例开始、动作、计分和结果事件。将游戏代码中所使用的方法与此处显示的链接格式相匹配。

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

> [card] 1. SDK和链接指南
>
> 获得游戏合同,得分和结果事件 与即时通桥方法在这里。

主要名单 **迷你游戏服务器** 标签可以跟踪您自己的服务器的安装和运行状态。 上传您的信息、 代码、 图表和奖励, 并注册游戏。 请在用户端打开当前游戏, 查看一次巡游 。


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