フェーズ4～5 演出→難易度設計
ここで足りないものを整理
- 演出
- BGM
- 難易度設計
この3つを追加するとだいぶゲームらしくなりそうです。
まずは演出とBGMから実装していきます。
- 当たったブロックを一瞬だけ光らせる
- ブロックが壊れた瞬間小さな破片を飛ばす
- 開始ボタンでBGM再生
// 命中時：一瞬だけ光らせてSEを鳴らす
function onBrickDestroyed(b){
b.flash = 3; // 3フレーム光る
playHit(); // 小さめ音量で
}
function onBrickDestroyed(b){
b.flash = 3; // 3フレーム光る
playHit(); // 小さめ音量で
}
// draw時：flash中は少し明るく描く
const c = b.flash ? lighten(b.color, 0.5) : b.color;
drawBrick(b, c);
if (b.flash) b.flash–；
const c = b.flash ? lighten(b.color, 0.5) : b.color;
drawBrick(b, c);
if (b.flash) b.flash–；
実行してみます。
うまく表現できてますね。
BGMもしっかり再生されています。
難易度設計の部分は↓の部分で調整しています。
private buildLevel(level: number) {
// …
const rows = Phaser.Math.Clamp(level, 1, 5); // ← レベル1..5で行数が増える
const cols = 11;
// rows × cols のブロックを生成
}
// …
const rows = Phaser.Math.Clamp(level, 1, 5); // ← レベル1..5で行数が増える
const cols = 11;
// rows × cols のブロックを生成
}
現在のレベルを定義しておき、クリアしていくごとにブロックを増やしています。
↓ではボール数と速度を調節しています。
const ballCount = 1 + (this.level – 1); // ← レベル毎に +1 球増加
const baseSpeed = 240 + (this.level – 1) * 40; // ← レベル毎に +40 速度増加
for (let i = 0; i < ballCount; i++) {
const angle = Phaser.Math.Between(-20, 20);
this.spawnBall(baseSpeed, angle);
const baseSpeed = 240 + (this.level – 1) * 40; // ← レベル毎に +40 速度増加
for (let i = 0; i < ballCount; i++) {
const angle = Phaser.Math.Between(-20, 20);
this.spawnBall(baseSpeed, angle);
こちらもステージクリアごとに速度を増加させています。
まとめ
初めてTypeScript ＆ Phaser を使いました。
Node.jsのインストールから始まり、サーバーに接続させる部分からChatGPTの力を借りながら進めています。
プログラミング初学者の私が5時間ほどである程度遊べる形まで製作することができたので生成AIのすばらしさを再度体感。
次回は少しレベルアップしてテトリスを製作してみようかと思います。
テトリスの後はシューティングゲームかな～。
コメント