ゲームのUIを修正した!

以前作ったゲームをより使いやすく修正しました。このゲームです。

https://daiki-ncu-2024.github.io/doubutu_oyatu_game

これが

前のやつ

こうなりました

以下が主な変更点です。

  • デザイン:おやつパーティーなので、クッキーの上に動物を乗せました。これで自分の駒がわかりやすくなりました。そしてタイトルの伏線回収っぽいものが生まれました。
  • ルールを増やす:従来では、🦁か🐺以外の駒がなくなれば、一騎打ちになって追いかけっこをしてしまいます。そのため、一番奥についたら逃げ切り勝ちというルールを設けました。これで遊びやすくなったはずです。
  • あそびかた:メニューを別に加えました。これはHTMLの仕様でできますとGeminiが教えてくれました。あそびかたを横に設定するとスマホで遊びにくかったんですよね。

これで楽しく遊びやすくなりました。ぜひやってみてください。

以下はデザインの変更経過です。没案として見ていってください。

ルール追加とともに、ゴールを分かるやすくするために斜線を引きました。また、クッキーを乗せましたが、どちらも見づらいので課題でした。

クッキーの上に乗るのではなく、駒のうごきを示すクッキーを作れば良いのではと思いましたが、流石にGeminiさんの力ではうまくいきません。

ここらへんで、あそびかたを別ボタンで見れるようにすればいいとひらめき、実践しました。

以下は実際のGeminiとのやり取りの1部です。

途中で画像を挿入してここを修正したいといえば簡単に理解してもらえることに気づきました。

バイブコーディング(生成AIと対話してコードを書くこと)で静的なアプリ開発をしましたが、楽しいですね。これからも面白いアイデアをすぐに行動に移したいです。

Comments

No comments yet. Why don’t you start the discussion?

コメントを残す