JavaScriptによるテトリス制作日記　その３

ではテトリス制作日記の続きを。JavaScript(以下JS)によるテトリス制作をしていて一番微妙な気持ちになっていた瞬間はデザインなどを考えていたときです。使用するBGM・背景画像を選んだり、操作方法やボタン配置を考えたり…。僕は優柔不断な人間なので本当になかなか決まらない。頭の中では適当で良いと考えているのに即決できない優柔不断さ。これプログラミングと関係ないよなぁ…とストレスアップ。レスポンシブ対応を考えたときに一部D&D(ドロッグ＆ドラップ)で誤魔化せないか？と考え実装しましたが結局使用しなかったり…と、勉強になってはいるものの結構無駄な時間を使っていました。

どこまでコードを修正するか？ということについても優柔不断さから葛藤をしながらの作業でした。そこまでテトリスに興味がないのだから早く他の動画学習へ進んだ方が良いんじゃないか？と自問自答の繰り返し。それでも気になった箇所があり自分で修正できる可能性がある以上はコードをいじってみたくなる気持ちが勝る。そんな感じで修正しては他に気になるところができる…という繰り返しでエンドレス状態になっていました。新しい知識が入るとやっぱりこっちの方が良いかな？と再修正になったりしますから本当に終わらない。納得いくまでやっていたら僕の知識ではいつまで経っても終わりがみえない…ので、なんとか適当なところで妥協しました。

というか日記風で記事を書いていたらいつまで経ってもテトリス制作日記ばかりになりかねないので、そろそろまとめにかかろうと思います。とりあえず動画で説明されていた状態からコードに手を加えた内容を↓にまとめます(すでに記憶が朧気なので不確かですが…)。

大体↑な感じだったと思います。他にも難易度選択とかも適当にいれていますが。公式なテトリスではホールドというブロックを一時的に一つキープできる機能もあるようですが、そこまでしなくても良いかな…とスルー。ただNextブロックに関しては乱数の問題なのか同じブロックが何度も連続するのが鬱陶しかったので変更。公式では全種類が一巡で落ちる仕様になっているようなので真似ておきました。最適化については全然です。一応canvasを一つ増やしてはみたものの…他のところで無駄な処理を多くしているのでほぼ意味ないのですよね。これも経験ということで複数canvasを使用してみましたが。最終的には動けば何でも良いという精神で適当にコードを書いていたという…。

一番面倒というか苦労したのはレスポンシブ対応かな。知識がないのでとっかかるのに時間がかかりましたし、それまで問題がなかった箇所がエラーになって大変でした。いじりながらタッチイベントなどについて少し知識が増えたのは良かった。BGMの再生に関しては…完全に妥協しました。というか心折れました。もう先に進みたいのです。実はバグが少し残っていたりする…。まぁ気づいていないバグが他にもまだあるのだろうし一つくらい良いかな？と。

最後に

JSによるテトリス制作をしてみて思ったこと。ゲーム制作がプログラミング学習に最適すぎる！と。いじっているうちに割と調べることになるのでなんだかんだで勉強になるのです。JSだけでなくHTML・CSSに関しても多少調べることになりますし。今回僕が参考にさせていただいたAkichonプログラミング講座チャンネルさんのテトリス制作動画をみれば色々勉強になると思います。僕のようなプログラミング初心者の方なら特に。ライン消去判定に手を加えて「ぷよぷよ」風にしたり色々遊べると思います。テトリス制作のコード修正で自分がハマったところについては別記事で書いていきます(たぶん)。