1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

IT初心者が作る猫ちゃんの落ちゲー🐈‍⬛(使用アプリ:Claude)

Posted at

ITの知識ゼロでゲームを作ってみた!その2

今日もClaudeでブラウザゲーム作ってみました!

↓完成したゲームはこちらから体験できます🐾

🐈‍⬛猫落としパズルゲームを作る🐈

【はじめに】

猫落としパズルゲーム「にゃんこパズル」という、猫ちゃんのブラウザゲームを作ってみました。
同じ色の猫ちゃんを揃えてポイントを稼ぐいわゆる落ちゲーです。

【目標】

同じ色の猫ちゃんを揃えてポイントゲット。揃える猫数に応じて加点が変わります。

【操作方法】

十字キー(PC)もしくは←→ボタン:落ちてくる猫を左右に移動
画面タップもしくは↓ボタン:落下スピードアップ

【ルール】

6種類の色の猫が落ちてきます。
同じ色の猫を3匹隣り合わせに並べると20ポイント。4匹で40ポイント。5匹で80ポイント。
相性の悪い猫たち要注意!隣り合わせになるとケンカして魚(消えない障害物)に変わります。
猫の相性に注意して高得点を目指しましょう。

【IT素人のプロンプト】

1.「アプリを作りたい。いろんな角形をした猫が1匹ずつ上から落ちてくる。同じ形の猫をくっつけたら消える。」

今回は落ちゲーつくりたいなと思って、まずは最初の形を作ってもらいます。
スクリーンショット 2025-12-12 18.24.23.png

作成されたアプリ
スクリーンショット 2025-12-12 22.54.36.png

(猫じゃなくて図形になっちゃった・・・!)

2.「猫のイラストにして。ピクセル絵みたいなやつ??」

スクリーンショット 2025-12-12 18.24.34.png

作成されたアプリ
スクリーンショット 2025-12-12 18.25.37.png

(ピクセル絵かわいいいい♡)

3.「左右とかスマホでも操作できるようにしたい。あと猫は自動で降りてくる」

スマホで左右移動の操作ができなかったので←↓→ボタンを追加。猫が[DROP!]ボタンでストンと落ちる感じなので、自動で落ちてくるようにもしました。
スクリーンショット 2025-12-12 18.24.46.png

作成されたアプリ
スクリーンショット 2025-12-12 18.26.03.png

4.「画面を2タップしたら即落ちるみたいな機能にしたい。」

↓ボタンでしか落下速度を上げられなかったので、2タップでもできるようにしました。

スクリーンショット 2025-12-12 18.24.51.png

作成されたアプリ
スクリーンショット 2025-12-12 18.26.20.png

5.「同じ猫が上下左右手で隣り合わせになったらその猫を消して!10ポイント加点。同じ猫が3匹並んだら20点。4匹並んだら40点加点。

相性の悪い猫の組み合わせも考えて。相性悪い猫が上下左右隣り合わせになったら喧嘩して5ポイント減点で消えていく。」
ここでルールや加点についてを固めていきました。相性の悪い猫の組み合わせがあると面白いかなと考えました。
スクリーンショット 2025-12-12 18.24.56.png

作成されたアプリ
スクリーンショット 2025-12-13 13.15.52.png

6.「やっぱり2匹までは加点なしで。3匹並んでから加点にしよう。相性悪い猫は2匹で大丈夫。相性悪い猫がくっ付いたら減点じゃなくてそこが魚になる。同じように下の猫が消えたら下に落ちるけど消えてくれない(障害物になる)設定。」

2匹だとすぐ消えてしまうので、3匹から消えてポイント加点に変更。減点だと0点のときに何も起きないので障害物に変化してしまう設定に変更しました。
スクリーンショット 2025-12-12 18.25.06.png

作成されたアプリ
スクリーンショット 2025-12-13 12.14.29.png

7.「猫の耳をピクセルで追加できる?」

猫っぽく見えるよう耳を追加。
スクリーンショット 2025-12-12 18.25.14.png

作成されたアプリ
スクリーンショット 2025-12-12 18.27.17.png

(ここで無料枠の制限のため一旦終了。無料でできるまでしばし待機・・・)

8.「スタートボタンで開始にしたい。制限時間は3分間。上まで積み上がったらGAMEOVER。初級・中級・上級に分かれていて、猫の落ちてくる速さと猫の種類の数が違う」

待機中にルールを考えてました。制限時間を作って難しさも3パターンに。
スクリーンショット 2025-12-13 12.21.42.png

作成されたアプリ
スクリーンショット 2025-12-13 12.21.19.png
スクリーンショット 2025-12-13 12.24.56.png

9.「猫の種類は初級が5種類、」「中級は6類、上級は7種類。速度の表示入らない(はいらない)」「やっぱり猫の種類はどの級も6種類で速度だけ変えるようにして」

ここで、表示をシンプルにしたり、猫の種類、速度、相性の設定を模索。
スクリーンショット 2025-12-13 12.31.45.png
スクリーンショット 2025-12-13 12.31.59.png

作成されたアプリ
スクリーンショット 2025-12-13 12.29.27.png
 

10.「猫の種類は初級が5種類、」「中級は6類、上級は7種類。速度の表示入らない(はいらない)」「やっぱり猫の種類はどの級も6種類で速度だけ変えるようにして」「猫の相性も6種類の色で考えて」

ここで、表示をシンプルにしたり、猫の種類、速度の設定を模索。
スクリーンショット 2025-12-13 12.31.45.png
スクリーンショット 2025-12-13 12.31.59.png

作成されたアプリ
スクリーンショット 2025-12-13 12.35.52.png
スクリーンショット 2025-12-13 12.36.10.png

11.「🐟 喧嘩→魚 🐟、この説明をわかりやすく描いて。中級のスピードを速めて、さらに上級歯2段ずつ降りてくるスピード感で」

相性が悪い猫の説明をわかりやすく。中上級のスピードアップ。
スクリーンショット 2025-12-13 12.35.34.png

作成されたアプリ
スクリーンショット 2025-12-13 12.37.28.png

12.「3分タイマーが起動してないよ。」

タイマーが起動していないことに気づき修正する。
スクリーンショット 2025-12-13 12.38.58.png

作成されたアプリ
スクリーンショット 2025-12-13 12.40.33.png

(猫が落ちてこなくなった!でもここで無料枠終わったので朝まで待機・・・)

13.「猫が落ちてこないよ。中級のスピードを上級と同じにして。上級の魚は落ちずにそこで固定して難易度を上げたい。」

猫が落ちてくるよう修正。一晩寝てる間に夢の中で考えていたので設定も変更。
スクリーンショット 2025-12-13 12.44.23.png

作成されたアプリ
スクリーンショット 2025-12-13 12.46.06.png

14.「中級・上級のタイマーが進まない。」

中上級の3分タイマーが進んでいないので修正。
スクリーンショット 2025-12-13 12.47.11.png

15.「スタートボタンから開始したい。あと、⚠️ 相性が悪い猫 ⚠️隣り合わせになると...🧡×🖤 🤍×🤎 🩶×❤️ 💛×🤎 ❤️×🧡↓両方とも🐟に変身!🐟は消えない障害物上級: 🐟は落ちない!のところの表示を変えたい 相性の悪い猫同士が隣り合わせになると魚(障害物)に変わるよ!障害物は消えないので、猫の色の組み合わせに注意しよう!🧡×🖤  🤍×🤎  🩶×❤️  💛×🤎  ❤️×🧡」

ルールの表示を変更。いきなりスタートだったのでスタートボタンを追加。
スクリーンショット 2025-12-13 12.48.35.png

作成されたアプリ
スクリーンショット 2025-12-13 12.48.45.png
スクリーンショット 2025-12-13 12.48.54.png

16.「ステージを横6列にしたい。」

スクリーンショット 2025-12-13 12.53.25.png

ということで!!!完成しましたーーーー!!

完成したアプリ
スクリーンショット 2025-12-13 12.55.43.png
スクリーンショット 2025-12-13 12.55.51.png
スクリーンショット 2025-12-13 12.54.17.png

【感想】

前回より修正やルール変更で時間がかかりましたが、猫ちゃんの落ちゲー完成しました🐾かわいい!

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?