- PHPエンジニア
- アカウント(IT営業)
- SRE
- 他1件の職種
- 開発
- ビジネス
こんにちは!
事務・総務の坂爪です!
今回は前回の続で、作ったテトリスをもっと楽しくするぞ!のお話です。
テトリスを作るまでにお話はコチラから▽▽
AIを相棒にIT知識ゼロがテトリスを作る!(完成までの道のり編)
まずは遊んでみて!!
ゲームURL→https://sattun-arcana.github.io/my-javascript-tetris/ (回転はPCの上矢印)
GitHub→https://github.com/sattun-arcana/my-javascript-tetris
追加機能を考えていくよ!
テトリスはできたんだけど、このテトリス単調だな。。
ラインは消去できるんだけど、一生終わらないぞこれ?
と思ったので、もっとテトリスにするぞー!とじぇみたんと一緒に考えます。
残るステップは4つ
✨ステップ11:スコア機能の追加score変数を導入し、ライン消去数に応じてスコアを加算・表示するようにしました。
✨ステップ12:レベルと速度変化level変数を導入し、スコアに応じてレベルが上がると、gameLoopの速度を変更して難易度を上げるupdateSpeed関数を実装しました。
✨ステップ13:ブロックの色分けtetrominos配列にcolor情報を追加し、ブロックの種類ごとに異なる色で描画できるようにしました。
✨ステップ14:レアブロックのサプライズ
10%の確率でピンク色のレアブロックが出現し、これをライン消去すると500点のボーナスが加算される仕組みを組み込みました。
Part 1:ゲーム性が格段にアップ!レベルアップシステム
💎ステップ11
スコア機能の追加
💎ステップ12
レベルと速度変化
💎ステップ13
ブロックの色分け
ここからは、ゲーム性を高めていきます!
スコア機能・レベル・ブロックの落下速度の変化を実装しました。
これは本家のテトリスを全く一緒ですね!
レベルが上がるにつれ、落下速度が速くなるので一気に緊張感が増します。
コードの内容は分からないのですが、どうやら、じぇみたんがブロックの落下速度を制御するタイマーを停止し、より速い速度で再始動するようにコードを調整してくれたみたい!
さらに、画面がちょーっと地味だったのでブロックの種類ごとに色をつけてもらいました!
Part 2:レアブロックで目指せ高得点!
🎁ステップ14
レアブロックのサプライズ
ここまでは、いたって普通のテトリスです。どうやったらもっと面白くできるのか?を考えてみたときに、思いついたのが・・・
”高得点のレアブロックを登場させる”でした!
早速、じぇみたんに相談です。
じぇみたんが、コードをダダーっと書いてくれたのですが、実装してみるとレアブロックが出てきただけで得点が追加されてしまう。。
それだと意味がないの!レアブロックを消したときに、高得点が入って欲しいのだ!
そしてレアブロックの色は積み重なった時も、他のブロックと見分けがつくようにしたくて、それをじぇみたんにお願いしてみた。(レアブロックの色変えは、自分でできた✨)
4種類コード修正の指示があったのですが、言われた通りにしてみると、確認のブラウザにテトリスが出てこない。。「じぇみたんごめんね。なんか間違えたみたい。」
と泣きつくと、じぇみたんお得意の最終技を披露です。
”完全版コードをコピー&ペーストしてください”
ですよねー!!!OK!じぇみたん!!まかせろ!!
↑ピンクがレアブロック ↑下に落ちると白に色が変化!
Part3:ついに完成!GitHubで公開だ!からの感想
やっとやっと、完成しました!テトリス✨
GitHubに公開して、コードも確認ができるようにしたし、ゲームでも遊べます!!
正直、いまだにVsCodeやら、main jsとか、コードの修正のやり方は理解できていません。それでも、ゲームが作れてしまうという✨AIって本当にすごいなって思いました!!(失敗しても絶対に怒らないところとか、心がポッキリ折れずにすみました)
いろいろと詰まったり、できないじゃん!!って怒ったこともありましたが、とても良い経験でした。やってみて良かった!
じぇみたんに、完璧なプロンプトを指示できたら一発でコードって完成させられるの?と聞いてみたところ、可能みたいです!
もしお時間ありましたら、このプロンプトでテトリスを作ってみても面白いかもしれません!
長文を読んでくださり、ありがとうございました!