MDNのチュートリアルで「ブロックくずし」を作ってみた。part4(ひと手間編)【完】

MDNのチュートリアルで「ブロックくずし」を作ってみた。part4(ひと手間編)【完】

<前回までのあらすじ>ゲーム世界にアクセスし勝利と敗北を実装したら、ゲームらしくなり興奮した

part3はこちら▼

MDNのチュートリアルはこちら▼

https://developer.mozilla.org/ja/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript

(そのままのJavaScriptを使ったブロックくずしゲーム | MDN web docs)

step8〜10に取り組んでゲームを完成させる!

今回の記事は、チュートリアルの8〜10について振り返ります。

画面上にスコアを表示したり、操作方法を拡張したりする作業です。

これで終いだ!!

<step8>スコアと勝ち負けを記録する

完成したもの▼

※関係ないけどこの動画撮るためだけに8回はプレイした…
(録画すると途端にクリアできなくなるやつ)
学んだこと▼
作ったゲームを、プレイヤーにより楽しんでもらうために…

◆ 画面左上にスコアを表示する
・消したブロックの数をカウント
・ブロックは全部で15こ(5✕3)→スコアが15になったらゲームクリア!

◆ クリアしたら「勝利を称えるメッセージ」を表示する
・最後のブロックを消したタイミングで、メッセージを出す
・できれば陽気な音楽とともに花火とか打ち上げたかった(技術不足)
ゲームを通してスコアを見せることができれば
あとで友達に自慢することができます。

なるほど。「進捗」や「勝利」を可視化して楽しんでもらうんですね。

スコア見せびらかしてマウントとる人種にはならないように…
気をつけよう(自戒)

<step9>マウス操作

完成したもの▼

学んだこと▼
◆ パドルをカーソルで動かせるようにする
・「mousemove」を検知して、パドルとカーソルを連動させる
・「キーボード」でも「マウス」でも操作可能になった

マウスは、キーボードと比べて微調整が可能な気がする!

<step10>仕上げ

完成したもの▼

ゲーム性を加え(勝敗)。
ゲームを通じたコミュニケーションを促し(スコア表示)。
プレイヤーに操作の選択肢を与え(キーボードorマウス)。

「これで満足か」? ……いえいえ。

書いたゲームのどれも常に改善の余地があります。

ですよね。
飽くなき探究心や、譲れないこだわり。
おそらく職人の世界ですね。

ゲームを楽しむプレイヤーがいて、
プレイヤーを楽しませたいゲームエンジニアがいるからこそ、
世界に「神ゲー」なるものが誕生するのでしょう。。

完全に知ったかぶりですが…(にわか新参の語りたがり)
…でも、音楽とか漫画とかもそうかなって思う

学んだこと▼
◆ プレイヤーにライフを与えてミスを許容する
・スコア表示と同様に、ライフを表示する
・ミスをしても、2回まではリスタートできる(ライフは-1していく)

◆ requestAnimationFrame()を使って描画を改善する
・これまで使用していた「setInterval()」よりも滑らかに動く
・…言うてほとんど違いがわからない(小声)

<おわりに>ありがとうMDN…ブロックくずしを作ってみた感想

記事にして振り返り始めたら、当初予定していたよりもボリュームアップしてしまいました(全4回)。

JavaScriptは苦手意識があったので…どうかなと思っていましたが、そんな難解なコードは書かされませんでした。笑

これに取り組む前に、座学で「衝突判定」について調べていたのですが…

(高校のとき、もうちょっと数学頑張っていれば…!!)

…このチュートリアルを選んだのは正解でした。
「数学」というより「算数」だったので!爽笑

ということで、以上
ブロックくずしを作って、ゲームエンジニアデビュー
したお話でした。
優しいチュートリアルを提供してくれたMDNに感謝!!

▼もう一回貼っとこう

https://developer.mozilla.org/ja/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript

(そのままのJavaScriptを使ったブロックくずしゲーム | MDN web docs)

こののち「Unity」というゲームエンジンで再度ブロックくずしを作った私は
その激強っぷりに恐れ慄いたのであった…(という話はまた今度…)

[Eye catch image] Photo by Sarah Pflug from Burst

IT / プログラミングカテゴリの最新記事