JS ===航空機串弾

ネイティブJSをブラッシュアップし、飛行機のつば弾のケースを検討

知識ポイント：

offsetY ----カーソルは、それがされている要素座標

clientYプロパティ----トップは、可視領域からカーソルの座標

ページのトップpageYからカーソルの座標----

マウスイベント：れるonmousemove

アイデア：

1、マウスで航空機を移動しましょう

航空機の座標を設定し、イベントONMOUSEMOVEマウスを使用しています

VAR X = event.clientX - div.offsetWidth / 2。

2.設定弾丸

インターバル機能、500msごとに箇条書きを作成します

弾丸の座標は、弾丸が常に航空機の途中から撮影してみましょう、常に航空機の座標を基準にしています。

bullet.style.left = div.offsetLeft + div.offsetWidth / 2から10 + 'ピクセル'; 
bullet.style.top = div.offsetTop + 'PX'

3、弾丸が飛んでみよう

インターバル機能を設定し、トップは座標ごとに16msのは、<-100を持って、その後、削除した弾丸を置くことができ、それ以外の場合は、蓄積してきただろう弾丸がトップ座標何を決定するために注意を払うように、この時間を短縮します

（; iはbullets.lengthを<; VAR I = 0 iが++の場合）{ 
            currentTop = 弾丸[I] .offsetTop。
            IF（currentTop <-100 ）{  弾丸[I] .remove（） }他{  弾[I] .style.top = currentTop -5+ 'ピクセル' }}

<！DOCTYPE HTML> 
<HTML LANG = "EN"> 
<HEAD> 
    <メタ文字コード= "UTF-8"> 
    <メタ名= "ビューポート"コンテンツ= "幅=装置幅、初期の規模= 1.0"> 
    <メタHTTP-当量= "X-UA-互換性のある"コンテンツ= "IE =エッジ"> 
    <タイトル>ドキュメント</ TITLE> 
    <スタイル> 
    div.plane { 
        幅：66px; 
        高さ：80px; 
        背景：URL（ './img/own.png' ）; 
        位置：絶対; 
        トップ： 0 ; 
        左： 0 ; 
    } 
    .bullet { 
        幅：20ピクセル。
        高さ：20ピクセル; 
        ボーダー -radius：50％;
        背景：緑; 
        位置：絶対; 
        左： 0 ; 
        トップ： 0 ; 
    }
     </スタイル> 
</ HEAD> 
<BODY> 
    <DIV CLASS = "プレーン"> </ div> 
    <スクリプト> // div要素を取得、マウスをたどりますモバイルVARの DIV = document.querySelector（ 'div.plane' ）
    window.onmousemove = 関数（イベント）{
         // マウス座標を取得し、そしてその結果、中間位置におけるVAR X = event.clientX - div.offsetWidth / 2。
         VAR Y = event.clientY - div.offsetHeight / 2;
 
        div.style.left = X + 'PX' 。
    
    
        
        div.style.top = Y + 'PX' 
    } 

   関数biubiubiu（）{
     //     弾丸作成
    するvar弾丸を=のdocument.createElement（ 'DIV' ）; 
    bullet.className = '弾丸' ; 
    bullet.style.left = div.offsetLeft div.offsetWidth + / 2から10 + 'PX'; 
    bullet.style.top div.offsetTop + = 'PX' // ツリー    document.body.appendChild（弾丸）
   } //     500ミリ秒毎に弾丸作成 
   のsetInterval（関数を（）{ 
       biubiubiu（）; 
   }、 500 ）//     弾丸せ関数bulletFlyを（）{
    






   
       setInterval（関数（）{
         //   取得所有的子弹
        VARの弾丸= document.querySelectorAll（ '弾丸' ）
         VaRのcurrentTop。

        用（VAR ; iはbullets.lengthを<; I = 0 iが++ ）{ 
            currentTop = 弾丸[I] .offsetTop。
            もし（currentTop <-100 ）{ 
                弾丸[I] .remove（）
            } 他{ 
                弾[I] .style.top = currentTop -5+ 'ピクセル' 
            } 
        } 

       }、 16 ）
       
   } 
   bulletFly（）
    
    
    
    </スクリプト>  
< /ボディ>
</ HTML>

航空機写真：

おすすめ