イベント
マウスクリック、クリック終了時に特定の関数を実行します。初期処理に次のコードを追加します。
|
1 2 3 4 5 6 7 8 9 10 |
/* 初期処理 */ function init(){ document.addEventListener("keydown", keyDown); document.addEventListener("keyup", keyUp); document.addEventListener('mousedown',mouseDown); document.addEventListener('mouseup',stop); ・ ・ |
マウスクリック時にmouseDown()、クリック終了時にstop()関数を実行します。
mouseDown()関数ではクリックされた座標をゲーム画面、パッド毎に求めます。そしてクリック時の処理を行うaction()関数を実行します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
/* マウスをクリック */ function mouseDown(e){ var x = e.clientX - controller.getBoundingClientRect().left;//コントローラーのクリック横座標 var y = e.clientY - controller.getBoundingClientRect().top; //コントローラーのクリック縦座標 var x2 = e.clientX - canvas.getBoundingClientRect().left; //ゲーム画面のクリック横座標 var y2 = e.clientY - canvas.getBoundingClientRect().top; //ゲーム画面のクリック縦座標 action(x,y,x2,y2); //クリック処理 } /* マウスクリック終了、タッチ終了 */ function stop(e){ my_houkou =0; bullet_flg = false; bullet_count = BAKUHA_INTER; //最初は必ず発射 } |
stop()関数では戦闘機の移動を止め(17行目)、発射を終了状態(18行目)にしています。
操作
クリック時の処理をクリック、タッチ処理(action())で行います。まず開始画面でボックス内をクリックされたらゲームを開始します。それが5行～12行目の判断文です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
/* クリック、タッチ処理 */ function action(x,y,x2,y2){ if(game_status == GAME_START){ //開始画面クリック、タッチ if( (x2 >= canvas.width*1/4) && ( x2 <= canvas.width*3/4) && (y2 >= canvas.height*1/4) && (y2 <= canvas.height*3/4)){ start(); } return; } //コントローラー範囲外 if( y < 0 || y > controller.height){ return; } if( x >= L_S && x <= L_E ){ //コントローラー左 my_houkou = MY_SPEED * -1; }else if( x >= R_S && x <= R_E){//コントローラー右 my_houkou = MY_SPEED; } if( x >= M_S && x <= M_E){ //発射 bullet_flg = true; bullet_count = BULLET_INTER; } } |
パッド内のどの部品がクリックされたか判断し処理を行っています(17行～25行目)
実行
マウスでゲーム開始ができるか、移動、発射ができるか確認します。実行画面へ
