MDNのチュートリアルで「ブロックくずし」を作ってみた。part3(勝敗デザイン編)

MDNのチュートリアルで「ブロックくずし」を作ってみた。part3(勝敗デザイン編)

<前回までのあらすじ>ボールをぶっ飛ばしたり閉じ込めたりして、ニコニコした

part2はこちら▼

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

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

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

step4〜7に取り組んで「遊べる」ようにする!

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

ゲーム性を追加して、「アニメーション」から「ゲーム」にする作業です。

この一連の記事で、一番書きたかった話です

<step4>パドルとキーボード操作

完成したもの▼

学んだこと▼
◆ ゲームに必要なもの① → ユーザーとの対話要素
・キーボードで操作できるパドルを追加する
・keydownイベント/keyupイベントで、「左キーを押したか」「右キーを押したか」のフラグを切り替える

<step5>ゲームオーバー

完成したもの▼

学んだこと▼
◆ ゲームに必要なもの② → ゲームオーバー
・「負ける」ことが出来るようにする
→ブロックくずしの「負け」は、ボールがキャンバスの下端にぶつかること
・下端との衝突を検出したとき、「GAME OVER」のアラートを表示する

「ボールがパドルに当たったときに速く動くようにする」っていう課題があったのですが。。うまく実装できませんでした。。悲

にしても「敗北」をデザインするって…
考えさせられるな(悟り)

<step6>ブロックのかたまりを作る

完成したもの▼

学んだこと▼
◆ ゲームに必要なもの③ → ゲームクリアー
・「勝つ」ことが出来るようにする
→ブロックくずしの「勝ち」は、ボールがすべてのブロックを消すこと
・STEP6の時点では、ブロックを描画しただけなので、ボールは素通りしていってしまいます。。

<step7>衝突検出 ←ここが一番楽しい!!

完成したもの▼

わ〜〜〜!!!!急にゲームっぽくなった!!!!!!!
(調子に乗ってボールの色を変えだす)

学んだこと▼
◆ ボールとブロックの衝突を検出
・ボールがブロックで弾んで、ブロックが壊れるようにする
・ボールの中心がブロックの範囲内に存在する場合、ブロックを消す

をもってゲームとするか?

STEP4〜7は、コーディング内容ではなく「ゲームの定義」に着目しました。
おさらいすると

ゲームに必要なものは……
 ① ユーザーとの対話要素(=ユーザーインターフェース)
 ② ゲームオーバー
 ③ ゲームクリアー

厳密に言えば、まだまだ他にも必要なものはあると思いますが。

これまでの人生で、「ゲームを作ろう」なんて考えたことがなかった自分としては、かなり新鮮な学びでした!


ゲームをプレイする目的は、当然「ゲームクリア」ですよね。
プレイヤーは、「ゲームオーバー」にならないように操作を調整しながら
この目的を達成するために、コツコツと進捗を積み上げていきます。

これって実際、何にでも通じる話です。
わかりやすく私の例をあげるなら、「アウトプットしよう(かつそれを習慣化しよう)」という目的(目標?)があって、現在この目的に向かって試行錯誤しています。

ゲームと違うのは、「ゲームオーバー」が無いってことでしょうか。
何かに挑戦しようとして「失敗したかも…」と思うことがあっても、別にそれってゲームオーバーじゃない。
むしろその経験をもって再チャレンジするなら、「失敗」ですらないというか。

どんな挑戦もゲームみたいに楽しみながらできたら、最高ですね!



そんなことを思いながら…今回の記事はここまで。
次回は「ひと手間編」です。

[Eye catch image] Photo by Sarah Pflug from Burst

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