向屏幕外发射子弹

Firing a Bullet to off-screen

本文关键字：子弹 发射 屏幕      更新时间：2024-02-21

我有一个跟随鼠标的脚本，我想知道我是否以及如何发射一个"子弹"，并在它离开屏幕时让它消失。这是我的以下代码：

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)'});
});

请看一下这个jsFiddle和下面的演示。它每次点击都会发射一颗子弹，但发射角度还没有正确工作。

还有项目符号处理，在每个项目符号更新间隔中，它将检查项目符号是否在屏幕之外。每个项目符号都被添加到一个数组中，以跟踪每个项目符号。数组中的每个项目符号都具有属性-DOM元素、速度和角度。

游戏循环（setIntervall回调）是非常基本的，应该改进。有很多关于它的教程。例如，查看此页。

$(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>

相关文章：