> ## 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-ja.png?fit=max\&auto=format\&n=rwMU9q3NELY6LUJe\&q=85\&s=a25334ef50001cec5fc04fcc7c073f72)](https://docs.zonely.gen.tr/images/panel/tools-integrations-guide-20261027/mini-oyunlar-01-ja.png)

> [card] 1. 情報全般
>
> 名前、説明、カバー視覚および活動的な状態を置きます。

> [card] 2. 接続モード
>
> Zonelyの公共サーバーは準備が整ったブラウザ橋を使用します。プライベートサーバーは別の選択です。

**接続モード** リストからゲームに作業環境を選択します。

| ホーム | ご利用にあたって |
| - | - |
| Zonely パブリックサーバー | 閲覧者向け作業環境・ゲームブリッジ |
| Zonely Minigame Server | 自社のZonelyゲームサーバの動作環境 |
| プライベートソケット IO | 独自のソケット IO サーバーの接続 |
| 専用WebSocket | 自社WebSocketサーバへのリンク |

プライベートリンクを選択したときに、アドレスと道路エリアを開いたままにします。 準備が整った接続でゲームを使用する方法 **開発者** タブを表示.

## ゲームコードの追加

**ミニゲーム コード** タブのコードビューを開きます。すべての次の例をコピーして、このフィールドに貼り付けます。 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** パープルの球を管理します。緑色の光を収集し、赤の球を避けます。2つのライトが収集されると、ラウンドが完了します。3つが終了したら、ラウンドエンド。再生アイコンを中央に押すことで、再起動を開始します。

## ゲームチャートの編集

**ゲーム図** ノードをタブに追加して接続します。選択したノードのヘッダーをフィールドからイベント、値、メモに編集します。

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

> [card] 1. イベントフローの編集
>
> Connect の始動および終りノード; 選択したノードが right. からイベントを編集する

ゲームコードでイベント名をマッチ。 スキームはフローを調節します。 モーション、描画、衝突動作は、HTMLのゲームコードで準備されます。

## アワードの特定

**受賞作品** は、タブからクレジット、製品、またはサーバーのコマンドの比較を用意します。ここでは、報酬キー、**開発者** タブに示された賞品の呼び出しでゲームを接続します。

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

> [card] 1. 賞品のスイッチ
>
> Matchは、ゲームコードの対応するZonelyコールで報酬キーを一致させます。

ライトハントサンプルは基本プレイを示しています。 賞品を贈る場合は、ツアーの勝利条件を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-ja.png?fit=max\&auto=format\&n=a2DxBoImkJzg7XMa\&q=85\&s=edf4ddf9a74701f017a13b81b509ec34)](https://docs.zonely.gen.tr/images/panel/minigame-code-20261028/light-hunt-ja.png)

> [card] ライトハントプレビュー
>
> Collectライトは、赤の球を避け、進行バーを埋めます。

ゲームの一例は、シングルパーソナリティです。マルチプレイゲームの準備中に選択したリンクインフラで、一般的な部屋、動き、ゲームの状態にマッチします。

## モニターコンソールとアクティブユーザー

**コンソール** セッションイベントとエラーメッセージをタブからフォローします。 対応するスペースを、ゲームコードのエラーでサーバー接続エラーを区別することで修正します。

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

> [card] 1. コンソール
>
> ライブセッションのイベントやエラーメッセージをチェックする。セッションが開いたときにイベントがここに表示されます。

**アクティブプレーヤー**タブは、保存されたゲームにログインしたユーザーをリストします。 レコードの外観を作成するには、ライブゲームセッションが開かれる必要があります。

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

> [card] 1. アクティブユーザー
>
> Liveログインユーザーは保存されたゲームにリストされています。

## 接続方法のレビューと保存

**開発者** タブの現在の例から開始、アクション、スコア、結果イベントを取得します。 ここでは、ゲームコードで使用するメソッドをリンク形式にマッチします。

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

> [card] 1. SDKとリンクガイド
>
> 準備が整った橋渡しの試合、スコア、結果イベントの契約はこちらから。

メインリスト**ミニゲームサーバー** タブで、自分のサーバーのインストールと操作状況を追跡できます。 自分の情報をアップロードし、コード、図表、報酬をゲームを登録します。 ユーザーの側にアクティブなゲームを開くことによってツアーをチェックしてください。


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