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元素，速度和角度。

游戏循环（setIntervall回调）非常基础，应该进行改进。有很多关于它的教程。例如检查此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>

将子弹射到屏幕外

1 个答案: