jquery太空入侵者项目,我该怎么做才能杀死外星人?

时间:2017-04-19 15:26:22

标签: javascript jquery html

我正在写一个太空入侵者游戏代码,我不知道如何用子弹杀死外星人。当船和子弹从顶部和左边到达相同的位置时,我尝试移除元素,但它不适用于我,我不知道它的实现是错还是想法本身。 (长而丑陋的代码,我知道,但请告诉我,如果你有任何建议可以改善它,我还是初学者:D)

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

0 个答案:

没有答案