落ちゲーアプリ作成19（ゲーム開始前の襖移動２）

お疲れ様です。

なかなかオリアプに手がつけれていませんが、少し進捗がありました。

JavaScript を使って、違う要素をクリックすることで襖を開くことに成功しました。

参考記事は以下

【JavaScript】animate()でアニメーションの再生/停止 - ガジェット・テクノロジー・暮らしの情報サイト/ライフハック『MONO365 -Color your days-』

ゲームスタート前は襖が塞がっていて、ボタンを押すと襖が開くようにします。

一旦開くとスタート位置に戻ってきてしまって、また襖が閉まった状態になってしまうので、ゲーム実行時（10秒間）はずっと開く方向に動きっぱなしという設定にしたいと思います。

最初に animate で動きをつけましたが、クリックしなくても１回目の動作をしてしまうので動きを定義したすぐ後に openLeft.pause(); を記述することで解消しました。

その後クリックをイベント発火にした openLeft.play(); を記述することで動きをつけました。これによりBGMを鳴らすことができるはず。

 js のコード内容はこんな感じです。

function gamestart() {

const openLeft = document.querySelector('.fusuma_left').animate(

[

{ transform: 'translateX(0)' },

{ transform: 'translateX(-2000%)'}

],

{ duration: 11000 }

);

openLeft.pause();

const openRight = document.querySelector('.fusuma_right').animate(

[

{ transform: 'translateX(0)' },

{ transform: 'translateX(2000%)'}

],

{ duration: 11000 }

);

openRight.pause();

document.querySelector(`.sound_start`).addEventListener('click', () => {

openLeft.play();

openRight.play();

});

};

if(document.URL.match(/new/)){window.addEventListener('load', gamestart)};

その前に、タイマー表示と時間で自動的に終了画面に遷移するのも止めなければいけません。

その他の勉強と並行で進めていきたいと思います。