Create.xyz用のプロンプトです。Create.xyzで生成ガチャされるため、同じプロンプトを利用しても再現されない場合があります。あくまでもデモとして雰囲気を楽しむもので動作を保証するものではありません。また皆さまのお持ちのデバイスのスペック（動作速度）により操作性や難易度が変わることがあります。。
アクセス解析を組み込む
Create自体にアクセス解析機能があるものの、Businessプラン以上を対象のため多くの人は利用できません。別案としてGA4を組み込むことが可能でした。
取得したID（GA4のID取得については割愛）をプロンプトに書き、GA4を組み込むようを指示すると実装が行われます。
GA4を組み込め。
IDはG-XXXXXXXXXX
スイカゲームもどき
Xでバズったスイカゲームもどき。あえてゲームとしては完成させていません。
再現性はそこそこ。GPT-4でも作れました。
matter.jsを使ったゲーム
ゲームエリアは500x500
マウスでクリックした場所の最上部から丸を落下
発生する丸はランダムのサイズ。クリックで発生するのは30〜90pxまで
30px 赤
60px 紫
90px 黄緑
120px 青
160px 黄色
240px 緑
同じ丸が２つ衝突するとその丸は消えて同じ位置に一つ上の大きさの丸が発生する
CDNでmatter.jsをMainComponent内で読み込む
マルバツゲーム
なんどかRetryの必要はありますが、そこそこの確率で動くものが作れます。
canvasでマルバツゲーム(三目ならべ)を作って。
先手後手はランダムで決定。
マルはユーザーが対応。
バスはプログラム的に処理する
マルとバツはペンで書いたような描画をする
勝者が決まったら勝者の名前とRestartボタンを表示
15スライドパズル
再現性は高くなく、この内容にした上でGenerateガチャしています。
4x4マスの15スライドパズル
タイトルとして「15 SLIDING PUZZLE」を表示
タイトル下にStartボタン
押すとStartボタンを決して起動時処理を実行する
## 起動時処理
Stable Diffusionで400x400の画像を生成。"nature"または"cat"または"skyarts"または"fantasy background"または"forest"または"dog"のいずれかのimage。これをパズルの絵に使う。画面の上下左右中央に105x105のcanvasをタイル上に4x4で配置。各canvasの間は2px空ける
右下のcanvasは非表示にして空欄マスとして定義
次にシャッフル処理を行う
---
## シャッフル処理
blankarea = 一番右下の空欄マスの場所
パネルをシャッフルする。次の処理を200回行う
{
target_canvas = blankareaの上下左右いずれかのcanvasの一つをランダムで決定;
target_positon = target_canvasの位置
target_canvasを空欄マスの位置に移動する
blankarea = target_positon
}
処理が完了したらタッチ箇所整理の処理を行う
---
## タッチ箇所整理
canvasに設定されたクリック判定を削除。
blankareaに隣り合うcanvasをクリック対象にする
---
## クリック時処理
対象のcanvasをblankareaの場所に50m秒かけて滑らかにスライド移動。
タッチ箇所整理の処理を行う。
canvasの位置が元の位置に戻ったら画面下部にGame clearの表示。
再度画像生成をしてシャッフル処理を行う
簡易ChatGPTの作り方
簡単なチャットUIは次のようなプロンプトで実装可能です。
/[ChatGPT]はIntegrationで追加される部分です。
ChatGPTのようなチャットUI
/[ChatGPT]での処理中はプリローダを表示し、入力受付を停止する
お絵描きアプリの作り方
描いた絵の保存機能まで備えたお絵描きアプリです。
canvasというキーワードを使うと、画像処理やゲーム関連の処理に強くなります。
「canvasに対してtouch-action: none;とする」という一文は、スマホでお絵描き中にスクロールしないようにするための呪文です。
お絵描きアプリ
canvasにマウスのドラッグまたはタッチ操作で絵を描ける。画面上部にペンの太さを変えるスライダーと、色を変えるボタンを配置。
選べる色は白、黒、赤、青、緑、黄色
画面下部にExportボタン。canvasの内容をjpegでローカル保存できる。
canvas上では描く以外のイベントを無効化する
canvasに対してtouch-action: none;とする
canvasの初期表示は白
サイズは500x500
canvasはwidth:100%;max-width:500px;
ウィンドウのリサイズ時もcanvasの内容を維持する
描画の際canvasの縮尺を考慮して描画位置を補正する
スライダーについて
初期表示時にペン太さはスライダーと同期をとる
スライダーの横に直径がスライダーの値の半分の円を表示。色はカラーパレットで選択中の色とする
カラーパレットについて
デフォルトは黒
ハンバーガー（開閉）メニューの実装
Createでは基本レスポンシブ対応（PCとスマートフォン両対応）していますが、そのままではハンバーガーメニューの開閉ができません。一例ですが、次のようなプロンプトを組み込むと開閉機能が実装されることが多いです。
#メニュー挙動
レスポンシブハンバーガーメニューを作成。
モバイル: ハンバーガーメニュー、タブレット/デスクトップ: 横並び。JavaScript でメニュー開閉制御。
リンクを押したらページ内の目的の場所にスクロールさせたい場合は次のような書き方をします。
#メニュー挙動
レスポンシブハンバーガーメニューを作成。
モバイル: ハンバーガーメニュー、タブレット/デスクトップ: 横並び。JavaScript でメニュー開閉制御。
メニューをクリックしたら現在スクロール座標から対象セクションまでスムーズスクロール。ハンバーガーメニューは閉じる。