← Back

ゲームを投稿する

FOR CREATORS

技術要件

  • 1ファイルで完結するHTMLであること。CSSとJavaScriptは同じファイルの中に書いてください。
  • アップロードするHTMLは1MBまでです。許可CDNのスクリプトをインライン化した後は5MBまで許容されます。
  • 外部スクリプトは次の4本のみ許可されています。それ以外のCDNは使えません。原則は素のJavaScriptの利用を推奨します。
    • cdn.tailwindcss.com（Tailwind Play CDN）
    • cdnjs.cloudflare.com/ajax/libs/matter-js/（Matter.js: 2D物理）
    • cdnjs.cloudflare.com/ajax/libs/three.js/（three.js: 3D）
    • cdnjs.cloudflare.com/ajax/libs/howler/（Howler.js: 音声）
  • ゲームは <iframe sandbox="allow-scripts">(opaque origin)と厳格なCSPの下で動きます。fetch / eval / document.cookie は実行時に無効です。localStorageはメモリ上だけの実装に差し替わり、リロードのたびに中身が空になります。ハイスコアなどの保存には使えません。
  • 固定pxや固定のアスペクト比にせず、実際の画面比に追従させてください。固定比で作ると、他の端末で黒帯や見切れが発生します。
  • スコアの送信は parent.postMessage({ type: 'gameOver', score }, '*') を呼び出してください。

投稿手順

  1. /create を開く
  2. HTMLファイルを選ぶか、コードを貼り付ける
  3. 名前と説明を入力する
  4. 送信する
  5. 審査後、フィードに公開される

AIに貼るプロンプト

上の技術要件をまとめた指示文です。AIチャットにそのまま貼り付けてゲームを生成させてください。 

HTML5のミニゲームを1つ作ってください。以下の条件をすべて満たしてください。

- 1ファイルで完結するHTMLにすること。CSSとJavaScriptは同じファイルの中に書き、外部ファイルを読み込まないこと
- 完成したHTMLファイルは1MB以内に収めること
- 画面サイズを固定pxや固定のアスペクト比で決め打ちにせず、実際の画面の縦横比に追従させること(縦長・横長のどちらでも黒帯や見切れが出ないようにする)
- fetch・XMLHttpRequest・evalなど、外部通信やeval系の機能は使わないこと(実行環境で無効化されます)
- localStorageは実行環境ではメモリ上だけの実装に差し替えられ、リロードのたびに中身が空になること。ハイスコアやセーブデータの保存には使わないこと
- ゲームが終了したら parent.postMessage({ type: 'gameOver', score }, '*') を呼び出し、scoreに数値のスコアを入れること

完成したら https://punipo.com/create から投稿してください。

よくある失敗

  • 固定のアスペクト比で作ってしまい、縦長の端末で黒帯が出る。
  • 見本と盤など隣接する要素の座標をそれぞれ別々に計算してしまい、特定の画面比でだけ重なる(片方の実寸から、もう片方の位置を導出すること)。
  • fetchでデータを取りに行こうとする(CSPにより実行時に通信できない)。
  • スコアを送信していないため、リザルトが表示されない。

次にすること

準備ができたら投稿ページからゲームを送信してください。 よくある疑問はよくある質問にまとめています。