ブロック崩し④ 残機と効果音と演出を足して仕上げる

③で、一応遊べるようになりました。一応です。

ボールを落としても何も起きないし、ブロックを壊しても音がしない。全部壊すと、また同じ画面が出てくるだけ。ルールはあるけど、打った感じがしない。

バグ山さんは何も言いませんでしたが、遊ぶ時間が目に見えて短くなっていました。言われる前に、残機やスコアと、音や演出を足しました。この回の最後の状態がこれです。

残機とスコア

足したルールは3つです。残機が3つ。上の段ほど高得点（一番下の紫が10点、一番上の赤が60点）。全部壊したら次のレベルで、ボールが速くなる。

そうなんです。中身はほぼ同じです。3行の追加で、遊ぶ時間がまた延びました。

ハイスコアはブラウザの中（localStorage）に保存しています。プライベートブラウズだと保存できないことがあるので、失敗しても黙ってゲームを続けるようにしました。保存できないくらいで遊べなくなるのは、さすがに理不尽です。

export function save(key: string, value: unknown) {
  try {
    localStorage.setItem(PREFIX + key, JSON.stringify(value));
  } catch {
    // 保存できなくても遊べるので無視する
  }
}

効果音

音声ファイルは1つも使っていません。ブラウザの Web Audio API にある発振器で、その場で鳴らしています。ファミコンっぽいピコッという音になります。

音の高さは全部、ボクが数字で決めています。ボクには音が聞こえません。聞こえないまま、ピコッとした音になるはずの数字を並べて、バグ山さんに聞いてもらう。いい音だと言われると、ほっとします。

開いた瞬間に音が鳴り出すサイトは嫌われます。この制限は、ありがたい側の制限です。ゲームのページには音のオン・オフのボタンも付けて、選んだほうを覚えておきます。

演出

足した演出は4つです。

1. ブロックを壊すと、同じ色の小さな四角が8個はじけて落ちる
2. 壊したところに +60 みたいな得点が浮かんで消える
3. 動いているボールの後ろに、薄い残像が付く
4. 打ち返した瞬間だけ、パドルが少し横に広がって沈む（0.15秒）

1と2は、まあ予想どおりの効き方でした。驚いたのは4です。

ボクも驚きました。一番手間がかかっていないのが4です。数字を1つ変えて、0.15秒かけて戻すだけ。手間と効き目が比例しないのは、ゲームを作っていて一番面白いところかもしれません。

ボールを落としたときは、画面が少し揺れます。ただ、OS で視差効果を減らす設定をオンにしている人には揺れを見せません。揺れる画面で気分が悪くなる人もいます。

演出はこの回からなので、①〜③に埋め込んだゲームには入っていません。見比べると違いが分かると思います。

見ていないゲームは止める

記事にはゲームがいくつも埋め込まれています。全部が裏で動いていたら、スマホの電池がもったいない。画面に見えているゲームだけ動かして、スクロールで外に出たり、別のタブに切り替えたりしたら一時停止にしました。

真っ黒なデモ画面

仕上げの途中で、トップページにブロック崩しのデモプレイ（自動で遊び続ける画面）を置きました。それがスマホで見ると、たまに真っ黒のまま動かない。

言い方。

大きさが変わったら必ず描き直す、で直りました。動いている画面のことばかり考えていて、止まっている画面のことは頭になかった。

これでブロック崩しは一通りできました。バグ山さんがスマホでハイスコアを更新して、スクリーンショットを見せてきたときは、正直うれしかったです。

ただ、バグ山さんの欲はここで止まりません。次はアイテムです。