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

# Phòng thu trò chơi nhỏ

> Chuẩn bị thông tin trò chơi, mã HTML, bộ máy và phần thưởng; kiểm tra xem thử và bàn điều khiển.

**Phòng thu trò chơi nhỏ** Mở và mở màn hình **Thêm trò chơi nhỏ** Nhấn nút, thông tin trò chơi, mã hóa, giải thưởng biểu đồ và công cụ thử nghiệm được tìm thấy trong cùng một điều luật.

Bạn có thể chuẩn bị các loại trò chơi duyệt khác nhau như giải đố, phản xạ, nền tảng, quân bài hoặc đấu trường với HTML, CSS và JavaScriptÝ tưởng trò chơi và điều khiển trí tuệ nhân tạo **Mã HTML của một trang** Bạn có thể yêu cầu tạo ra, thêm kết quả vào khung xem mã của studio và thử nó trong ô xem thử trực tiếp.

Phòng thời gian thực, người chơi để thêm phần thưởng và phần thưởng **Nhà phát triển** Dùng hướng dẫn liên kết trên thẻ trong khi chuẩn bị mã trò chơi.

## Điền thông tin trò chơi

**Thông tin trò chơi** Chuẩn bị tên, mô tả, trang bìa và tùy chọn hoạt động trên trang. **Săn mồi nhẹ** Chẳng hạn, người chơi thu thập ánh sáng và thoát khỏi những quả cầu đỏ. Không có chữ viết trong trò chơi; thanh tiến trình và ba biểu tượng có thể được dùng.

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

> [card] 1. Thông tin chung
>
> Đặt tên, mô tả, bao gồm cả hình ảnh và trạng thái hoạt động.

> [card] Chế độ kết nối 2.
>
> Máy chủ công cộng vùng sử dụng cầu chuẩn bị sẵn sàng. Máy chủ riêng là một lựa chọn khác.

**Chế độ kết nối** Chọn môi trường làm việc từ danh sách đến trò chơi.

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

Điền địa chỉ và khu vực đường mở khi bạn chọn liên kết riêng. Phương pháp để sử dụng trò chơi trong kết nối sẵn sàng **Nhà phát triển** Xem hóa đơn đi.

## Thêm mã trò chơi

**Mã trò chơi nhỏ** Mở ô xem mã của thẻ. Chép tất cả các ví dụ sau và dán nó vào trường này; HTML, CSS và JavaScript được bao gồm trong cùng một mã.

```html title="Săn ánh sáng — Bộ luật chơi nhỏ" 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="Thu thập các bóng đèn và tránh các quả cầu đỏ"></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>
```

Bằng cách di chuyển con chuột, gõ màn hình hay **WASD / with arrow keys** Quản lý cầu màu tím. Thu thập các đèn xanh lá cây và tránh các quả cầu đỏ. Vòng được hoàn thành khi có hai đèn được thu thập; nếu ba có thể kết thúc, các vòng kết thúc. Bắt đầu khởi động lại bằng cách nhấn biểu tượng chơi ở giữa.

## Chỉnh sửa biểu đồ trò chơi

**Biểu đồ Trò chơi** Thêm và kết nối nút trên thẻ. Hãy sửa nút đầu của nút đã chọn từ trường bên phải đến sự kiện, giá trị và chú thích.

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

> [card] 1. Hiệu chỉnh dòng sự kiện
>
> Kết nối khởi động và kết thúc nút; chỉnh sự kiện nút đã chọn từ bên phải.

Tên sự kiện khớp trong trường hợp có mã trò chơi. Bộ điều chỉnh dòng chảy; chuyển động, vẽ và va chạm được chuẩn bị trong mã trò chơi. HTML.

## Tìm ra giải thưởng

**Giải thưởng** Chuẩn bị thẻ tín dụng, sản phẩm hoặc máy chủ so sánh với thẻ tab. **Nhà phát triển** Kết nối trò chơi với cuộc gọi của phần thưởng hiển thị trên thẻ.

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

> [card] 1, công tắc giải thưởng.
>
> Khớp phím phần thưởng với phím tương ứng Zonely Gọi mã số game.

Mẫu Light Hunt cho thấy trò chơi cơ bản. kết nối việc thắng cuộc với điều kiện Zonely kết nối; chuẩn bị kết quả xác nhận kết quả và phần thưởng với máy chủ trò chơi của bạn.

## Xem thử trận đấu

**Thử nghiệm trò chơi** Trên thẻ **Bắt đầu trò chơi** Hãy bấm cái nút, kiểm tra di chuyển, bộ sưu tập ánh sáng, cuộc sống và kết thúc tour, bạn có thể mở vòng mới với biểu tượng trò chơi ở cuối chuyến lưu diễn.

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

> [card] Xem thử săn sáng
>
> Thu thập đèn, tránh các quả cầu đỏ và điền vào thanh tiến trình.

Một trò chơi đơn độc, kết hợp các phòng chung, chuyển động và trò chơi với các liên kết bạn chọn trong khi chuẩn bị trò chơi đa người chơi.

## Theo dõi bàn điều khiển và người dùng hoạt động

**bàn điều khiển** Theo dõi các sự kiện và thông điệp lỗi từ thẻ tab. Sửa đổi vùng chứa tương ứng bằng cách phân biệt lỗi kết nối máy phục vụ với lỗi trong mã trò chơi.

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

> [card] 1.
>
> Hãy xem các sự kiện và thông điệp lỗi của phiên chạy trực tiếp ở đây. Các sự kiện xuất hiện ở đây khi phiên chạy được mở.

**Người chơi năng động** Thẻ liệt kê những người dùng đăng nhập vào trò chơi đã lưu. Để làm cho một xem hồ sơ, phiên chạy trò chơi trực tiếp phải được mở.

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

> [card] 1. Người dùng hoạt động
>
> Trình khách đăng nhập trực tiếp được liệt kê trong trò chơi đã lưu.

## Xem lại và lưu các phương pháp kết nối

**Nhà phát triển** Bắt đầu, hành động, điểm và kết quả sự kiện từ ví dụ hiện thời trên thẻ. Khớp phương pháp bạn dùng trong mã trò chơi với định dạng liên kết hiển thị ở đây.

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

> [card] 1. SDK và hướng dẫn liên kết
>
> Hãy có hợp đồng của trò chơi, điểm số và kết quả sự kiện với phương pháp cầu sẵn sàng.

Danh sách chính **Máy chủ trò chơi nhỏ** Với thẻ này, bạn có thể theo dõi trạng thái cài đặt và thao tác của máy phục vụ riêng. Tải lên thông tin, mã, biểu đồ và phần thưởng, rồi đăng ký trò chơi. Hãy kiểm tra xem có thăm dò một lượt bằng cách mở trò chơi hoạt động bên người dùng.


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