落ちゲーアプリ作成３

引き続き JavaScript を使用して落ちゲーを作成中。

キャラの落下、クリックによる消去をおこなった。

document.querySelector(`#ninjas`).animate(

[

{ transform: 'translateY(0)' },

{ transform: 'translateY(800px)' }

],

{duration: 3000}

);

js に慣れない中、ネット検索したものを利用しています。

animate により選択した `#ninjas` を y 座標 0 から 800px (画面外) まで移動させています。 duration 3000 ミリ秒 (3秒) での移動となる。

本来であれば、ランダムのスピードを設定し、ランダムのキャラクターを落としたいところですが、初期段階としては、 id = "ninjas" を複数作成することで、違う速さの落下キャラクターを作成することにする。

落ちてくるキャラクターを消去するコードとして、

const ninja1 = document.getElementById("ninja_1");

ninja1.addEventListener("click",() => {

ninja1.remove();

});

const ninja2 = document.getElementById("ninja_2");

ninja2.addEventListener("click",() => {

ninja2.remove();

});

をそれぞれ記述することとする。

本来であれば、getElementById で ID を複数取得して、コードを少なくしたいところだが、 複数の忍者（キャラクターを） ID として指定してしまうと、ワンクリックで多くの忍者が消えてしまうので、コード記述のシンプル化は今後の課題として、まず完成を目指していく。