使元素在与另一个元素jquery的触摸时消失

时间：2014-07-31 18:29:04

标签： javascript jquery html css

好吧，这是我第一次在这里问一个问题。希望没有其他答案这样的问题，我看过......这是我的问题，我＆＃39;我刚刚开始学习JavaScript，我认为制作一个像Space Invaders这样的简单游戏会很好。

但我似乎无法弄清楚如何发生碰撞......我一直试图这样做，当导弹击中图像时，图像和导弹一样消失，但是它已经消失了。这是一项艰巨的任务。我此时发生的事情是船/大炮跟随鼠标x。当你通过点击它发射导弹时，用你的鼠标x位置直接发射导弹。我现在要做的就是让导弹杀死入侵者。任何人都可以告诉我如何实现这一目标的方式，或者有人可以让它完全按照我的意愿行事，这样我就可以查看代码并学习。

Current Fiddle link

HTML 

<div id="invader_game">
        <div id="invader_row_1">
            <img src="http://s23.postimg.org/efz3zzizb/invader_1.png" class="invader breakable" id="invader_top_1">
            <img src="http://s23.postimg.org/efz3zzizb/invader_1.png" class="invader breakable" id="invader_top_2">
            <img src="http://s23.postimg.org/efz3zzizb/invader_1.png" class="invader breakable" id="invader_top_3">
            <img src="http://s23.postimg.org/efz3zzizb/invader_1.png" class="invader breakable" id="invader_top_4">
            <img src="http://s23.postimg.org/efz3zzizb/invader_1.png" class="invader breakable" id="invader_top_5">
            <img src="http://s23.postimg.org/efz3zzizb/invader_1.png" class="invader breakable" id="invader_top_6">
            <img src="http://s23.postimg.org/efz3zzizb/invader_1.png" class="invader breakable" id="invader_top_7">
            <img src="http://s23.postimg.org/efz3zzizb/invader_1.png" class="invader breakable" id="invader_top_8">
            <img src="http://s23.postimg.org/efz3zzizb/invader_1.png" class="invader breakable" id="invader_top_9">
            <img src="http://s23.postimg.org/efz3zzizb/invader_1.png" class="invader breakable" id="invader_top_10">
            <img src="http://s23.postimg.org/efz3zzizb/invader_1.png" class="invader breakable" id="invader_top_11">
        </div>
        <div id="invader_row_2">
            <img src="http://s27.postimg.org/o9xl74xr3/invader_2.png"  style="margin-left:48px;" class="invader2">
            <img src="http://s27.postimg.org/o9xl74xr3/invader_2.png" class="invader2">
            <img src="http://s27.postimg.org/o9xl74xr3/invader_2.png" class="invader2">
            <img src="http://s27.postimg.org/o9xl74xr3/invader_2.png" class="invader2">
            <img src="http://s27.postimg.org/o9xl74xr3/invader_2.png" class="invader2">
            <img src="http://s27.postimg.org/o9xl74xr3/invader_2.png" class="invader2">
            <img src="http://s27.postimg.org/o9xl74xr3/invader_2.png" class="invader2">
            <img src="http://s27.postimg.org/o9xl74xr3/invader_2.png" class="invader2">
            <img src="http://s27.postimg.org/o9xl74xr3/invader_2.png" class="invader2">
            <img src="http://s27.postimg.org/o9xl74xr3/invader_2.png" class="invader2">
            <img src="http://s27.postimg.org/o9xl74xr3/invader_2.png" class="invader2">
        </div>
        <div id="invader_row_3">
            <img src="http://s29.postimg.org/yzvy6upyr/invader_3.png" style="margin-left:48px;" class="invader3">
            <img src="http://s29.postimg.org/yzvy6upyr/invader_3.png" class="invader3">
            <img src="http://s29.postimg.org/yzvy6upyr/invader_3.png" class="invader3">
            <img src="http://s29.postimg.org/yzvy6upyr/invader_3.png" class="invader3">
            <img src="http://s29.postimg.org/yzvy6upyr/invader_3.png" class="invader3">
            <img src="http://s29.postimg.org/yzvy6upyr/invader_3.png" class="invader3">
            <img src="http://s29.postimg.org/yzvy6upyr/invader_3.png" class="invader3">
            <img src="http://s29.postimg.org/yzvy6upyr/invader_3.png" class="invader3">
            <img src="http://s29.postimg.org/yzvy6upyr/invader_3.png" class="invader3">
            <img src="http://s29.postimg.org/yzvy6upyr/invader_3.png" class="invader3">
            <img src="http://s29.postimg.org/yzvy6upyr/invader_3.png" class="invader3">
        </div>
        <div id="bulletrow"></div>
        <div id="shiprow">
            <div id="ship"></div>
        </div>
    </div>

JAVASCRIPT / JQUERY 

 function startinvaders(){
        setTimeout( function() {
            $("#invader_row_1").addClass("invadermove");
        }, 5000);
        setTimeout( function() {
            $("#invader_row_2").addClass("invadermove");
        }, 2500);
        $("#invader_row_3").addClass("invadermove");
        $('body').mousemove(function(e){
            var x = e.pageX - this.offsetLeft;
            var x2 = x - 57;
            $('#ship').css({
                left: x2
            });
        });
        $( "body" ).click(function(e) {
            var currenthtml =  $("#bulletrow").html();
            var x = e.pageX - this.offsetLeft;
            $("#bulletrow").append('<div class="bullet ui-widget-content" id="bullet" style="left:' + x + 'px !important; position:absolute; animation:bulletup 5s; -webkit-animation:bulletup 5s;"></div>');
        });
    }
    startinvaders();

CSS（不是真的需要，但在这里。）

body {
    background: #000;
}

.invader {
    height:50px;
    margin-left: 50px;
}
.invader3 {
    height:40px;
    margin-left: 35px;
}
.invader2 {
    height:50px;
    margin-left: 35px;
}

#invader2 {
    height:50px;
    margin-left: 35px;
}

#invader_row_2 {
    width:1200px;
    text-align: center;
    padding-top: 50px;
    margin-left:auto;
    margin-right: auto;
}

#invader_row_1 {
    width:1200px;
    text-align: center;
    padding-top: 50px;
    margin-left:auto;
    margin-right: auto;
}

#invader_row_3 {
    width:1200px;
    text-align: center;
    padding-top: 50px;
    margin-left:auto;
    margin-right: auto;
}

#invader3 {
    height:40px;
    margin-left: 35px;
}

#invader_game {
    width:100%;
    height:100%;
}
.invadermove{
    animation:invadermove 10s infinite;
    -webkit-animation:invadermove 10s infinite; /* Safari and Chrome */
}

@keyframes invadermove
{
    0%   {padding-left:0px;}
    11%   {padding-left:0px;}
    12%   {padding-left:12px;}
    23%   {padding-left:12px;}
    24%   {padding-left:24px;}
    35%   {padding-left:24px;}
    36%   {padding-left:38px;}
    47%   {padding-left:38px;}
    48%   {padding-left:50px;}
    59%   {padding-left:50px;}
    60%   {padding-left:38px;}
    71%   {padding-left:38px;}
    72%   {padding-left:24px;}
    83%   {padding-left:24px;}
    84%   {padding-left:12px;}
    95%   {padding-left:12px;}
    96%   {padding-left:0px;}
    100%   {padding-left:0px;}
}

@-webkit-keyframes invadermove /* Safari and Chrome */
{
    0%   {padding-left:0px;}
    11%   {padding-left:0px;}
    12%   {padding-left:12px;}
    23%   {padding-left:12px;}
    24%   {padding-left:24px;}
    35%   {padding-left:24px;}
    36%   {padding-left:38px;}
    47%   {padding-left:38px;}
    48%   {padding-left:50px;}
    59%   {padding-left:50px;}
    60%   {padding-left:38px;}
    71%   {padding-left:38px;}
    72%   {padding-left:24px;}
    83%   {padding-left:24px;}
    84%   {padding-left:12px;}
    95%   {padding-left:12px;}
    96%   {padding-left:0px;}
    100%   {padding-left:0px;}
} 

#shiprow {
    position: absolute;
    bottom:0px;
    height:100%;
    width: 100%;
}

#ship {
    height:50px;
    width:100px;
    position: absolute;
    bottom:0px;
    background-image: url(http://s7.postimg.org/pn387gu9z/cannon.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.bullet {
    position: absolute;
    height:20px;
    width: 2px;
    background-color: #fff;
    bottom:10000px;
}

#bulletrow {
    height:100%;
}
@keyframes bulletup
{
    0%   {bottom:0px;}
    100%   {bottom:10000px;}
}

@-webkit-keyframes bulletup /* Safari and Chrome */
{
    0%   {bottom:0px;}
    100%   {bottom:10000px;}
}

0 个答案:

没有答案
相关问题
最新问题