2022-07-24

JavaScriptとcanvasを使って「オブジェクト指向」について説明します。

敵キャラクターがうろつく画面を作ってみます。

まずはベースを作ります。640✕400のcanvasを表示して、0.2秒毎に再表示させています。
実行画面

敵キャラクターを表示します。画面に変化はありませんが、0.2秒毎に再表示されています。
実行画面

敵キャラクターを動かします。
ランダムな場所に0.2秒間隔(1秒間に5回)で表示されます。
実行画面

飛びまくるので、移動方向だけランダムに決めて、今いる位置から移動するようにします。
実行画面

もし何も表示されていない場合、再表示してみてください。
時間が経つと、画面表示外まで移動する場合があります。

それっぽくなってきました。

さて、敵キャラクターを2体に増やしたくなりました。どうしましょう?
簡単に考えればこうなります。
実行画面

もし何も表示されていない場合、再表示してみてください。
時間が経つと、画面表示外まで移動する場合があります。

敵1と敵2用に、それぞれのコードを書いています。
力技です。
コード長いですが5体くらいまでならなんとかなりそうです。

でも、100体とか言われたら無理です。

では、これをクラスにしてみましょう。
実行画面

もし何も表示されていない場合、再表示してみてください。
時間が経つと、画面表示外まで移動する場合があります。

「ViewTekiCls」がクラス、
「ViewTeki1」と「ViewTeki2」がオブジェクトになります。

使う前に記述しないといけないので、「ViewTekiCls」を先に書いています。
「constructor」はオブジェクト作成時に実行されます。
「move()」で移動を処理します。

オブジェクトも配列にできるので、配列にして10個作ります。
実行画面

もし何も表示されていない場合、再表示してみてください。
時間が経つと、画面表示外まで移動する場合があります。

開始座標(X,Y)と色をランダム生成しています。



あまりにウロウロしすぎるので、30%の確率で直進させます。
実行画面

もし何も表示されていない場合、再表示してみてください。
時間が経つと、画面表示外まで移動する場合があります。

画面から外れるので画面内に収まるようにします。
実行画面

100体にするのも楽勝です。
実行画面

Classを修正すればすべてのオブジェクトで動きが変わります。


(C)2022 Yosshii50