Javascript jquery太空入侵者项目，我应该怎么做才能杀死外星人？

我正在写一个太空入侵者的游戏代码，我不知道如何用子弹杀死外星人。当飞船和子弹从顶部和左侧到达同一位置时，我尝试移除该元素，但我不知道它的实现是错误的还是想法本身。（我知道代码又长又难看，但请告诉我你是否有任何改进建议，我还是个初学者：D）

$（文档）.ready（函数（）{
var key={l:0，r:0，s:0}；
//箭头键和空格键向下
$（文档）.keydown（函数（e）{
开关（如钥匙代码）{
案例37://左箭头
键l=1；
打破
案例39://右箭头
键r=1；
打破
案例32://空格键
key.s=1；
打破
}
});
//箭头键和空格键向上
$（文档）.keyup（函数（e）{
开关（如钥匙代码）{
案例37://左箭头
key.l=0；
打破
案例39://右箭头
键r=0；
打破
案例32://空格键
key.s=0；
打破
}
});
运动（）；
//用箭头键和usnig空格键拍摄飞船的运动
函数移动（）{
请求动画帧（移动）；
如果（$（'.bullet'）。长度>0）{
$（'.bullet'）.css（{“top”：“-=20”}）；
如果（$（'.bullet'）.position（）.top<0）
$（'.bullet'）.remove（）；
}
如果（$（'#ship'）.position（）.left>890）
键r=0；
else if（$（'#ship'）.position（）.left 450）{
$（'#alien2'）。删除（）；
location.reload（）；}
}，延迟2）；
setInterval（函数（）{
$（'#alien3'）.css({
顶部：“+=20”
});
如果（$（'#alien3'）.position（）.top>450）{
$（'#alien3'）。删除（）；
location.reload（）；}
}，延迟3）；
setInterval（函数（）{
$（'#alien4'）.css({
顶部：“+=20”
});
如果（$（'#alien4'）.position（）.top>450）{
$（'#alien4'）。删除（）；
location.reload（）；}
}，延迟4）；
setInterval（函数（）{
$（'#alien5'）.css({
顶部：“+=20”
});
如果（$（'#alien5'）.position（）.top>450）{
$（'#alien5'）。删除（）；
location.reload（）；}
}，延迟5）；
setInterval（函数（）{
$（'#alien6'）.css({
顶部：“+=20”
});
如果（$（'#alien6'）.position（）.top>450）{
$（'#alien6'）。删除（）；
location.reload（）；}
}，延迟6）；
setInterval（函数（）{
$（'#alien7'）.css({
顶部：“+=20”
});
如果（$（'#alien7'）.position（）.top>450）{
$（'#alien7'）。删除（）；
location.reload（）；}
}，延迟7）；
setInterval（函数（）{
$（'#alien8'）.css({
顶部：“+=20”
});
如果（$（'#alien8'）.position（）.top>450）{
$（'#alien8'）。删除（）；
location.reload（）；}
}，延迟8）；
setInterval（函数（）{
$（'#alien9'）.css({
顶部：“+=20”
});
如果（$（'#alien9'）.position（）.top>450）{
$（'#alien9'）。删除（）；
location.reload（）；}
}，延迟9）；
setInterval（函数（）{
$（'#alien10'）.css({
顶部：“+=20”
});
如果（$（'#alien10'）.position（）.top>450）{
$（'#alien10'）。删除（）；
location.reload（）；}
}，延迟10）
}
});
你可能想考虑添加一个JSFoDLE，这样人们就可以看到你的代码在运行。移除它不会起作用，因为你一直在移除和替换它们来移动外星人。你必须找出一种方法来存储外星人是否正在被渲染。硬编码你个人外星人的ID闻起来像是坏代码。如果将它们存储在一个数组中，那么您就可以使用相同的代码段一致地对它们进行操作。这里有很多重复。另外，每次调用location.reload（）时；它将重置你的整个页面-这是你想要的吗？你的情况是不是比较了位置？应该比较子弹和物体的矩形。你可能想考虑添加一个JSFoDLE，这样人们就可以看到你的代码在运行。移除它不会起作用，因为你一直在移除和替换它们来移动外星人。你必须找出一种方法来存储外星人是否正在被渲染。硬编码你个人外星人的ID闻起来像是坏代码。如果将它们存储在一个数组中，那么您就可以使用相同的代码段一致地对它们进行操作。这里有很多重复。另外，每次调用location.reload（）时；它将重置你的整个页面-这是你想要的吗？你的情况是不是比较了位置？应该比较子弹和物体的矩形。
  <script>

    $(document).ready(function () {
        var key = {l: 0, r: 0, s: 0};

        //arrow keys and spacebar down
        $(document).keydown(function (e) {
            switch (e.keyCode) {
                case 37: //left arrow
                    key.l = 1;
                    break;
                case 39: //right arrow
                    key.r = 1;
                    break;
                case 32: //spacebar
                    key.s = 1;

                    break;
            }
        });
        //arrow keys and spacebar up
        $(document).keyup(function (e) {
            switch (e.keyCode) {
                case 37: //left arrow
                    key.l = 0;
                    break;
                case 39: //right arrow
                    key.r = 0;
                    break;
                case 32: //spacebar
                    key.s = 0;
                    break;
            }
        });


        Movement();

        //the movement of the ship with the arrow keys and shooting usnig spacebar
        function Movement() {
            requestAnimationFrame(Movement);

        if ($('.bullet').length > 0) {
            $('.bullet').css({"top": "-=20"});
            if ($('.bullet').position().top < 0)
                $('.bullet').remove();
        }
        if($('#ship').position().left>890 )
            key.r=0;
        else if($('#ship').position().left<=0)
            key.l=0;

        if (key.l) {
            $("#ship").css({"left": $('#ship').position().left - 10})
        }
        if (key.r) {
            $("#ship").css({"left": $('#ship').position().left + 10})
        }
        if (key.s) {

            $('#myDiv').append('<img class="bullet" src="bullet.png" width="40" height="100">');
            if($())

            $('.bullet').css({
                "position": "absolute",
                "top": $('#ship').position().top - 100,
                "left": $('#ship').position().left + 30
             });
            }
         }
        createAliens();
        //creating aliens 
        function createAliens() {

            for(var i=1;i<=10;i++) {
                $('#myDiv').append('<img id="alien'+i+'" src="alien.ico" width="70" height="70">');
            }
            $('#alien1').css({
                position: "absolute",
                left: parseInt(Math.random() * 940 + 1)
                });
            $('#alien2').css({
                position: "absolute",
                left: parseInt(Math.random() * 940 + 1)
            });
            $('#alien3').css({
                position: "absolute",
                left: parseInt(Math.random() * 940 + 1)
            });
            $('#alien4').css({
                position: "absolute",
                left: parseInt(Math.random() * 940 + 1)
            });

            $('#alien5').css({
                position: "absolute",
                left: parseInt(Math.random() * 940 + 1)
            });
            $('#alien6').css({
                position: "absolute",
                left: parseInt(Math.random() * 940 + 1)
            });
            $('#alien7').css({
                position: "absolute",
                left: parseInt(Math.random() * 940 + 1)
            });
            $('#alien8').css({
                position: "absolute",
                left: parseInt(Math.random() * 940 + 1)
            });
            $('#alien9').css({
                position: "absolute",
                left: parseInt(Math.random() * 940 + 1)
            });
            $('#alien10').css({
                position: "absolute",
                left: parseInt(Math.random() * 940 + 1)
            });
            timer();
        }
        //timer for aliens to move from top to bottom
        function timer() {
            var delay1=parseInt(Math.random()*(3000-1000)+1000);
            var delay2=parseInt(Math.random()*(3000-1000)+1000);
            var delay3=parseInt(Math.random()*(3000-1000)+1000);
            var delay4=parseInt(Math.random()*(3000-1000)+1000);
            var delay5=parseInt(Math.random()*(3000-1000)+1000);
            var delay6=parseInt(Math.random()*(3000-1000)+1000);
            var delay7=parseInt(Math.random()*(3000-1000)+1000);
            var delay8=parseInt(Math.random()*(3000-1000)+1000);
            var delay9=parseInt(Math.random()*(3000-1000)+1000);
            var delay10=parseInt(Math.random()*(3000-1000)+1000);

            setInterval(function () {

                $('#alien1').css({
                  top: "+=20"
                });
                if ($('#alien1').position().top > 450){
                    $('#alien1').remove();
                    location.reload();}
                },delay1);
            setInterval(function () {
                $('#alien2').css({
                    top: "+=20"
                });
                if ($('#alien2').position().top > 450){
                    $('#alien2').remove();
                    location.reload();}

            }, delay2);
            setInterval(function () {
                $('#alien3').css({
                    top: "+=20"
                });
                if ($('#alien3').position().top > 450){
                    $('#alien3').remove();
                    location.reload();}

                }, delay3);

            setInterval(function () {
                $('#alien4').css({
                    top: "+=20"
                });
                if ($('#alien4').position().top > 450){
                    $('#alien4').remove();
                    location.reload();}

            },delay4);
            setInterval(function () {
                $('#alien5').css({
                    top: "+=20"
                });
                if ($('#alien5').position().top > 450){
                    $('#alien5').remove();
                    location.reload();}

                    },delay5);
            setInterval(function () {
                $('#alien6').css({
                    top: "+=20"
                });
                if ($('#alien6').position().top > 450){
                    $('#alien6').remove();
                    location.reload();}

            }, delay6);
            setInterval(function () {
                $('#alien7').css({
                    top: "+=20"
                });
                if ($('#alien7').position().top > 450){
                    $('#alien7').remove();
                    location.reload();}

            },delay7);
            setInterval(function () {
                $('#alien8').css({
                    top: "+=20"
                });
                if ($('#alien8').position().top > 450){
                    $('#alien8').remove();
                    location.reload();}

                    },delay8);
            setInterval(function () {
                $('#alien9').css({
                    top: "+=20"
                });
                if ($('#alien9').position().top > 450){
                    $('#alien9').remove();
                    location.reload();}

            }, delay9);
            setInterval(function () {
                $('#alien10').css({
                    top: "+=20"
                });
                if ($('#alien10').position().top > 450){
                    $('#alien10').remove();
                    location.reload();}
            }, delay10)
        }
    });
</script>