なぜ要るか
遊べるものはできました。でもたぶん、こう感じています。「動くけど、なんか味気ない」
ここで多くの人が「機能が足りないからだ」と考えて、機能を足します。逆です。 足りないのは機能ではなく、手応えです。
同じルールのゲームでも、押した瞬間の反応があるかないかで、まったく別物に感じます。しかも手応えを直す作業は、機能を足すより短時間で終わります。
だからこの術では、操作を1つに絞って手触りだけを見ます。このゲームの操作は「札をえらんで、的に置く」1つだけです。ここを徹底的に良くします。
AIプロンプト
この術の作業をAIへ任せるときは、これをそのまま貼ってください。
index.html を直して。札を置くときの手応えを良くしたい。えらんだ札が少し浮いて分かるようにして、置いた直後は両者とも裏のままにして0.5秒くらい間を置いてから同時にひらいて、ひらいた札だけ動きを付けて。それ以外は変えないで。
0.5秒の部分は、遊んでみてじれったければ0.3秒のように縮めて頼み直してください。
手応えは3つの要素でできています
覚えるのはこれだけです。
| 要素 | 何をするか | このゲームでは |
|---|---|---|
| 押した合図 | 触れた瞬間に見た目を変える | えらんだ札が浮く |
| 間 | すぐに答えを出さず、少し待つ | 両者の札を0.5秒後に同時にひらく |
| 結果の強調 | どうなったかをはっきり見せる | ひらいた札だけ動きを付ける |
特効薬は間です。押した瞬間に全部答えが出ると、作業に感じます。0.5秒待つだけで「勝負」になります。
このゲームでは間に理由もあります。 互いに伏せて出すルールなので、置いた直後は相手が何を出したか分かりません。その一瞬が読み合いの山場です。
これはカードゲームだけの話ではありません。申込ボタンを押した後に「送信中…」が出るかどうかと同じ話です。仕事のツールでもそのまま効きます。
やってみる
3つまとめて頼む
cd my-first-game claude -p "index.html を直して。札を置くときの手応えを良くしたい。えらんだ札が少し浮いて分かるようにして、置いた直後は両者とも裏のままにして0.5秒くらい間を置いてから同時にひらいて、ひらいた札だけ動きを付けて。それ以外は変えないで。"「それ以外は変えないで」を必ず付けます。 付けないと、頼んでいない部分まで作り替えられて、何が効いたか分からなくなります。
返事を読む
実際に返ってきたものです。
0.5秒待ってから同時にひらく - 置いた瞬間は両者とも hidden: true で伏せたまま置き、 「相手も置きます…」と表示します - 0.5秒後に reveal() が走り、hidden を外して数字を出します - いまひらいた札だけ hiraku クラスを付け、次の描画で外しています - 待っている間は finished ではないので、二度押しを place() の先頭で 弾くようにしました見慣れない言葉が並んでいますが、読み取るのは1点だけです。伏せて置いてから、0.5秒後にひらく流れになっているか。
reveal()がひらく処理、hirakuはひらいた札に動きを付けるための目印の名前です。「二度押しを弾く」 に注目してください。頼んでいません。待っている0.5秒の間に続けて押されても受け付けない、という作りです。間を置くと二度押しできてしまう、という副作用に先回りしています。
開いて、押してみる
open index.html札を1枚押して、次に置く的を押します。置いた直後の状態がこれです。自分の札も相手の札も、まだ伏せたままです。
この0.5秒が手応えです。 前は一瞬で結果が出ていました。
自分の感覚で判定する
3回遊んで、どちらか答えてください。
- 前より「勝負している感じ」がするか
- 待ち時間が長すぎて、じれったくないか
じれったければ「0.3秒に縮めて」と頼みます。数字を変えるだけなので何度でも試せます。
保存する
git add . git commit -m "手触りを良くした" git push手応えが良くなった状態を記録に残します。このあと数字を変えて悪くなっても、ここへ戻せます。
ここでも1-5のルールが効いています
返事の最後にこうありました。
場札を描く処理が相手側と自分側で2箇所に分かれていたので、
fudaHtml() にまとめて両方から呼ぶようにしました
札を1枚描く処理が、相手側と自分側で別々に書かれていたので、1つにまとめて両方から使う形にしたという報告です。頼んでいません。 手触りを直すついでに、散らかりかけていた場所を片付けています。AGENTS.md の「同じ処理を2箇所に書かない」が働いた結果です。
放っておくと、こういう重複が積み上がります。直すたびに片付いていく状態を作れているかどうかが、続けられるかの分かれ目になります。
つまずきどころ
変えたのに違いが分からない
手応えは、前の状態と並べて初めて分かります。記憶の中の「前」はあてになりません。git checkout . で一度戻して、前の状態で遊んでみてください。比べると分かります。 戻したあとは git checkout の代わりに直近のコミットへ戻せば元に戻ります。
間を入れたら遅く感じる
0.5秒は目安です。0.2〜0.8秒の間で試してください。カードゲームは長め、アクションは短めが合います。
演出を足したくなった
いい兆候です。ただし5章まで待ってください。 ここでは操作1つ分の手応えだけに絞ります。絞るから判定できます。
どの的に置いたか分からなくなった
置ける的が3つあるので、押し間違いが起きます。札をえらんだ状態のときだけ、的の枠を目立たせてください。
claude -p "index.html を直して。札をえらんでいる間だけ、置ける的の枠を目立たせて。えらんでいない間は元の見た目のままにして。それ以外は変えないで。"
これも手応えの1つです。次に押す場所が光っていれば、迷う時間が消えます。 「〜している間だけ」という条件を必ず言ってください。言わないと常時光ってしまい、目印になりません。
Windows の場合
claude -p の使い方は同じです。ファイルを開くのは start index.html です。
次の一歩
誰かに1回だけ遊んでもらってください。 説明せずに、パソコンを渡すだけです。
黙って見ていると、どこで迷ったかが分かります。押す場所が分からなかったのか、結果が読めなかったのか。その1回が、次に直す場所を教えてくれます！
ここまでの三つの的
この講座は、見本ゲーム「三つの的」を術ごとにすこしずつ育てながら進みます。下にあるのはこの術を終えた時点の実物です。そのまま遊べます。
