あるくテック

日々試行錯誤しつつ実践中

enchant.jsのTIPS - クラス同士の衝突判定

クラスの良さを伝えるには?

授業ではenchant.jsを用いたプログラミングを行います。HTML5、JavaScript、enchant.jsについて覚えることも大切ですが、オブジェクト指向に馴染み理解することも大切な授業の目的です。

特にクラスを使う便利さが分かってくるかどうかで、オブジェクト指向プログラミングに取り組む意欲の差がでてくるように思います。

 

他のプログラミングの授業でも、クラスに先だってfunctionの書き方を学習することもあってか、サブルーチン化とクラス化の区別がつくまでは、記述が一見シンプルなfunctionを使いたいようです。

クラスの宣言の記述はenchant.jsの場合少し長いので最初面倒に感じてしまうでしょうね。

なんとかクラスの便利さを実感してもらえたらと授業の題材として使ったのがサンプルの1つが、クラス同士の衝突判定です。

プログラムに「ざっくりとした」指示をする

f:id:takakosudou:20180228152725p:plain

たとえば画面上に白クマが発射した10個のボール(ボールNo.1~ボールNo.10)と10頭の茶クマ(クマNo.1~クマNo.10)が表示されていて常に動いているとします。

組み合わせはどれでもいいのでボールのどれか1個と茶クマのどれか1頭が衝突しているかどうかを知るためのプログラムを書くとしましょう。

もし総当たりで判定していくとどうなるでしょうか。

ボールNo1とクマNo.1が衝突しているかをチェックして、次にボールNo1とクマNo.2、次に次にボールNo1とクマNo.3と判定をすると、、、、判定処理が10x10の100回となります(イコール記述行数ではありませんがその辺は割愛します)。

「ボールのどれかと、クマのどれかが当たっている?」というざっくりした記述で1回で済んだらこれは楽です。

 

クラスを使えばこれが叶います。ボールクラスとクマクラスが衝突しているか?という記述が出来ます。

 

コードやサンプルプロジェクトをご覧になりたい方は、Qiitaのページをご覧ください。

qiita.com

参考にしている書籍