Увольнение пули на экран

Question

У меня есть сценарий, который следует за мышью, и мне было интересно, если и как, я мог бы выстрелить «пулю» и исчезнуть, когда ее выключит экран. Вот мой следующий код:

var box=$(".box"); 
var boxCenter=[box.offset().left+box.width()/2, box.offset().top+box.height()/2]; 
$(document).mousemove(function(e){  

var angle = Math.atan2(e.pageX- boxCenter[0],- (e.pageY- boxCenter[1]))*(180/Math.PI);  

box.css({ "-webkit-transform": 'translate(-50%,-50%) rotate(' + angle + 'deg)'});  
box.css({ '-moz-transform': 'translate(-50%,-50%) rotate(' + angle + 'deg)'}); 
box.css({ 'transform': 'translate(-50%,-50%) rotate(' + angle + 'deg)'}); 

}); 

Answer 1

Пожалуйста, посмотрите на это jsFiddle и демонстрационное. Он запускает пулю при каждом нажатии, но огонь не работает должным образом.

Существует также обработка пули в каждом интервале обновления пули, она проверяет, находится ли пуля вне экрана. Каждая пуля добавляется в массив для отслеживания каждого из них. Каждая пуля в массиве имеет свойства - элемент DOM, скорость и угол.

Игровой цикл (callIntervall callback) является очень простым и должен быть улучшен. Об этом много учебников. например проверьте это page.

$(function() { 
 
    var box = $(".box"), 
 
     screenWidth = $(window).width(), 
 
     screenHeight = $(window).height(), 
 
     $bullet = $('<div/>').addClass('bullet'), 
 
     bulletSpeed=10, 
 
     bulletList = [], 
 
     angle = 0, 
 
     boxCenter = [box.offset().left + box.width()/2, box.offset().top + box.height()/2]; 
 

 
    console.log(screenWidth, screenHeight);  
 
    $(document).mousemove(function (e) { 
 

 
     angle = Math.atan2(e.pageX - boxCenter[0], -(e.pageY - boxCenter[1])) * (180/Math.PI); 
 
     //console.log(angle); 
 
     box.css({ 
 
      "-webkit-transform": 'translate(-50%,-50%) rotate(' + angle + 'deg)' 
 
     }); 
 
     box.css({ 
 
      '-moz-transform': 'translate(-50%,-50%) rotate(' + angle + 'deg)' 
 
     }); 
 
     box.css({ 
 
      'transform': 'translate(-50%,-50%) rotate(' + angle + 'deg)' 
 
     }); 
 

 
    }); 
 
    $(document).on('click', function() { 
 
     console.log('fire bullet'); 
 
     var $newBullet = $bullet.clone(); 
 
     $(document.body).append($newBullet); 
 
     bulletList.push({$el: $newBullet, 
 
         speed: bulletSpeed, 
 
         angle: parseInt(angle)}); 
 
    }); 
 
    
 
    var checkBullet = function() { 
 
     if (bulletList.length > 0) { 
 
      $.each(bulletList, function(index, bullet) { 
 
       if (!bullet) return; 
 
       
 
       // tan = top/left = sin/cos 
 
       var y = bullet.$el.position().top; 
 
       var x = bullet.$el.position().left; 
 
       x += Math.cos((90-bullet.angle) * Math.PI/180) * bullet.speed; // spped angle not correct yet. 
 
       y += Math.sin(bullet.angle * Math.PI/180) * bullet.speed; // speed angle not correct! 
 
       bullet.$el.css({left: x, top: y}); 
 
       //console.log(x); 
 
       if (x > screenWidth || y > screenHeight){ 
 
        // off-screen --> delete bullet 
 
        bullet.$el.remove(); 
 
        delete bulletList[index]; 
 
        console.log('bullet '+ index +' destroyed!'); 
 
       } 
 
      }); 
 
     } 
 
    }; 
 
    
 
    setInterval(checkBullet, 1/30); 
 
});

.box { 
 
    position: absolute; 
 
    width: 10px; 
 
    height: 10px; 
 
    background-color: blue; 
 
} 
 

 
.bullet { 
 
    position: absolute; 
 
    width: 2px; 
 
    height: 2px; 
 
    background-color: black; 
 
    top: 10px; 
 
    left: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="box"></div>