JS === aircraft spit bullets

Brushed up native JS, review the case of an airplane spit bullets

Knowledge points:

offsetY ---- cursor coordinates in the element for which it is

clientY ---- top coordinates of the cursor from the visible region

Coordinates of the cursor from the top of the page pageY ----

Mouse events: onmousemove

Ideas:

1, let the aircraft moves with the mouse

Use the mouse onmousemove event, set the coordinates of the aircraft

var x = event.clientX - div.offsetWidth /2;

2. Set bullet

Interval function, every 500ms create a bullet

Coordinates of the bullet, is always relative to the aircraft coordinates, let the bullets always shot from the middle of the aircraft.

bullet.style.left = div.offsetLeft + div.offsetWidth/2 - 10 + 'px';
bullet.style.top = div.offsetTop + 'px'

3, let the bullets fly

Setting the interval function, every 16ms, Top coordinate reduce this time to pay attention to determine what, when bullets coordinate Top has <-100, and then you can put a bullet removed, otherwise they will have accumulated

 for(var i = 0; i<bullets.length;i++){
            currentTop = bullets[i].offsetTop;
            if(currentTop < -100){
                bullets[i].remove()
            }else{
                bullets[i].style.top = currentTop -5+ 'px' } }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    div.plane{
        width:66px;
        height:80px;
        background:url('./img/own.png');
        position:absolute;
        top:0;
        left:0;
    }
    .bullet{ 
        width:20px;
        height:20px;
        border-radius: 50%;
        background: Green; 
        position: Absolute; 
        left: 0 ; 
        Top: 0 ; 
    }
     </ style> 
</ head> 
<body> 
    <div class = "Plane"> </ div> 
    <Script> // obtain div, follow the mouse mobile var div = document.querySelector ( 'div.plane' ) 
    window.onmousemove = function (Event) {
         // Get mouse coordinates, and so that in the middle position var X = event.clientX - div.offsetWidth / 2;
         var Y = event.clientY - div.offsetHeight / 2;
 
        div.style.left = X + 'PX' ;
    
    
        
        div.style.top bulletFly () {Y + = 'PX' 
    } 

   function biubiubiu () {
     //     create a bullet 
    var bullet = document.createElement ( 'div' ); 
    bullet.className = 'bullet' ; 
    bullet.style.left = div.offsetLeft div.offsetWidth + / 2 - 10 + 'PX'; 
    bullet.style.top div.offsetTop + = 'PX' // tree     document.body.appendChild (bullet) 
   } //     500ms create a bullet every 
   the setInterval ( function () { 
       biubiubiu ( ); 
   }, 500 ) //     let the bullets fly function 
       setInterval ( function
    






   (){
        //  取得所有的子弹
        var bullets = document.querySelectorAll('.bullet')
        var currentTop;

        for(var i = 0; i<bullets.length;i++){
            currentTop = bullets[i].offsetTop;
            if(currentTop < -100){
                bullets[i].remove()
            }else{
                bullets[i].style.top = currentTop -5+ 'px'
            }
        }

       },16)
       
   }
   bulletFly()
    
    
    
    </script>
</body>
</html>

Aircraft picture:

JS === aircraft spit bullets

Guess you like