年末だし時間割でブロック崩しをして忘年しよう！
さて、もう12/14ですね。あっという間に年末の空気になってしまいました。やはり年末といえば忘年会ですが、寒いので家で手軽に済ませたいお年頃なので、今年は時間割をブロック崩しで壊すことで忘年会に替えたいと思います。
時間割をテーブル形式に変換
履修した科目一覧の取得
まずは今年履修した授業を時間割のように並べてみましょう。履修システムであるTwinsの成績ページから履修一覧をCSVでダウンロードします。
学籍番号や名前など不要な情報がたくさん入っていますが、科目番号、開講年度、開講区分だけを使います。
時間割の形にする
開講されている科目一覧データをKdBから取得して、Twin:teなどのようなテーブルの時間割形式にします。この記事ではKdBに不要な負荷をかけないため、KdBを定期的にクロールしているkdb-crawlerのkdb.min.jsonを利用します。
実はもうアドベントカレンダーの担当日当日の0:17で、あまり時間がないので、科目データの曜時限というフィールドに月～金が含まれていたら、 曜日の番号(1-5) * 曜時限データに含まれている数字をリストに追加する簡易的な方法で作ることにします。
月曜日の1限は 0、水曜日の5限は 16 という調子です。
試しに出力してみると以下のようになりました。とりあえずは問題なさそうです。
ではこれをブロック崩しのマップにしていきましょう。
ブロック崩し
ステージのベースを作る
ブロック崩しをしっかり作っている時間はもうないので、matter-js というライブラリを使って手抜きで作っていきます。50行程度で以下のようなステージができあがりました。
時間割をブロックとして追加
筑波大学では、全部で6つのモジュールと呼ばれる学期が存在し、各学期に月～金の5日の授業日が存在します。したがって最終的な全体の時間割は6*5=30 columns、6 rowsですね。学期ごとに余白を取って、適当な高さで配置してみます。
前期の分のみですが、実際の僕の履修と比較してもこんな感じで綺麗に描画できています。
最後に、ブロックにボールが当たった時に消える機能を実装すれば良さそうですね。
ブロックの衝突の検知
matter.jsの collisionEnd を使ってボールとブロックの衝突をハンドルします。衝突した際に片方がボールで、もう片方がブロックであることを確認した後、 World.remove() を使います。
また、同時に、操作するためのバーも追加します。 Mouse.create(render.canvas) でマウスの座標を取れるようにした後に、beforeUpdate イベントでX座標を mouse.position.x にします。適切に範囲を制限したら完成です。
おわり
もう3時になってしまいました。先程の時間割をよくよく見ればバレてしまうのですが、今日は1限があるのでこのあたりで終わりにします。2023年の履修も綺麗に消え去り、無事忘年できたと言えます。これで来年はまた新しい気持ちで授業を受けることができそうです。
PS: 記事を公開した途端にTwitterのt.coが落ちてツイートから記事にアクセスできなくなってしまいました。Twitter社も忘年したい時期なのでしょうか。
Discussion